用colspan将数据加载到扩展Bootstrap表中

Question

对不起，现在我用this来制作一个表。现在我想要一个表头有这个属性，colspan="6"。但是，如何将数据加载到此表中？

注意。表结构为：

<tr> 
<th colspan="6" class="col-xs-4" data-field="status" data-sortable="true">Status</th> 
</tr> 

注意。余数据加载到自举表的方法是：

$("#table").bootstrapTable({data: data}); 

Answer 1

自举表不支持rowspan和colspan头暂时。

更多信息：https://github.com/wenzhixin/bootstrap-table/issues/182

或者，你可以试试下面的解决方案

$('#table').bootstrapTable({ 
 
    columns: [{ 
 
     field: 'id', 
 
     title: 'Item ID' 
 
    }, { 
 
     field: 'name', 
 
     title: 'Item Name' 
 
    }, 
 
    { 
 
     field: 'price', 
 
     title: 'Item Price' 
 
    }, 
 
    { 
 
     field: 'color', 
 
     title: 'Item Color' 
 
    }, 
 
    { 
 
     field: 'size', 
 
     title: 'Item Size' 
 
    }, 
 
    { 
 
     field: 'discount', 
 
     title: 'Item Discount' 
 
    }], 
 
    data: [{ 
 
     id: 1, 
 
     name: 'Item 1', 
 
     price: '$1', 
 
     color: 'Red', 
 
     size: 'XL', 
 
     discount: '20%' 
 
    },{ 
 
     id: 2, 
 
     name: 'Item 2', 
 
     price: '$2', 
 
     color: 'Green', 
 
     size: 'L', 
 
     discount: '30%' 
 
     
 
    },{ 
 
\t id: 'Total Items', 
 
\t name: 2 
 
    }] 
 
}); 
 

 

 
$('#table').bootstrapTable('mergeCells', { 
 
\t index: 2, 
 
\t field: 'name', 
 
\t colspan: 5 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.css" rel="stylesheet"/> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<table id="table"></table>