使用 colspan 将数据加载到扩展的 Bootstrap 表中答案

【问题标题】：Load data into extended Bootstrap table with colspan使用 colspan 将数据加载到扩展的 Bootstrap 表中
【发布时间】：2016-11-10 06:38:13
【问题描述】：

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

注意。表结构为：

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

注意。我将数据加载到引导表中的方式是：

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

【问题讨论】：

用一些数据初始化data变量。

标签： twitter-bootstrap-3 bootstrap-table

【解决方案1】：

Bootstrap-table 暂时不支持rowspan 和colspan Header。

或者，您可以尝试以下解决方案

$('#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%'
        
    },{
	   id: 'Total Items',
	   name: 2
    }]
});


$('#table').bootstrapTable('mergeCells', {
	index: 2,
	field: 'name',
	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>

【讨论】：