2016-11-10 51 views
1

對不起,現在我用this來製作一個表。現在我想要一個表頭有這個屬性,colspan="6"。但是,如何將數據加載到此表中?用colspan將數據加載到擴展Bootstrap表中

注意。表結構爲:

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

注意。餘數據加載到自舉表的方法是:

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

初始化'一些數據data'變量。 –

回答

1

自舉表不支持rowspancolspan頭暫時。

更多信息: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>