Question

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

请注意。表结构是：

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

请注意。我将数据加载到bootstrap表的方式是：

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

Answer 1

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

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

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

＆＃13;

$('#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
});

＆＃13;

<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>

＆＃13;

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

1 个答案: