colspanで拡張ブートストラップテーブルにデータをロード

Question

すみません、今ではthisを使用してテーブルを作成しています。今私はこのプロパティ、colspan="6"を持つ1つのテーブルヘッダーをしたいと思います。ただし、このテーブルにデータをロードするにはどうすればよいですか？

注。テーブル構造は次のとおりです。

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