Bootstrap Table の拡張機能について、使えそうな機能を5つ紹介します。
それぞれ拡張機能用のjsファイルを読み込むと使用することができます。
Bootstrap Table
http://bootstrap-table.wenzhixin.net.cn/
Bootstrap Table: 1.12.1
フィルター
テーブルのヘッダー部分にフィルター用のテキストボックスやプルダウンを表示します。
bootstrap-table-filter-control.js を読み込みます。
<script type="text/javascript" src="../../lib/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>
filterControl: trueを指定することでフィルター機能が有効になります。フィルターの種類は、各カラムで指定することができます。
・filterControl: 'input'は、テキストボックス
・filterControl: 'select'は、プルダウン
userTable.bootstrapTable({
filterControl: true,
filterShowClear: true,
data: initDataList,
columns: [
{
field: 'name',
title: 'Name',
filterControl: 'input'
},
{
field: 'age',
title: 'Age',
filterControl: 'select'
},
{
field: 'gender',
title: 'Gender',
filterControl: 'select'
}
]
});
行のドラッグアンドドロップ
テーブルの行のドラッグアンドドロップで移動ができます。
bootstrap-table-reorder-rows.min.js、bootstrap-table-reorder-rows.cssを読み込みます。
また、jquery.tablednd.jsも読み込む必要があります。
<link rel="stylesheet" type="text/css" href="../../lib/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.css" />
<script type="text/javascript" src="../../lib/jquery-tablednd/jquery.tablednd.js"></script>
<script type="text/javascript" src="../../lib/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.min.js"></script>
reorderableRows: trueを指定することで行のドラッグアンドドロップ機能が有効になります。
userTable.bootstrapTable({
useRowAttrFunc: true,
reorderableRows: true,
data: initDataList,
columns: [
{
field: 'name',
title: 'Name'
},
{
field: 'age',
title: 'Age'
},
{
field: 'gender',
title: 'Gender'
}
]
});
ツリー
テーブルにツリー構造を表示します。
bootstrap-table-tree-column.css、bootstrap-table-tree-column.jsを読み込みます。
<link rel="stylesheet" type="text/css" href="../../lib/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.css" />
<script type="text/javascript" src="../../lib/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.js"></script>
treeShowField: 'name'は、ツリーを表示するカラム名を指定します。
parentIdField: 'pid'は、ツリーの親ID（Parent ID）のキー名を指定します。そのため、読み込むデータに、pidの指定が必要になります。
userTable.bootstrapTable({
treeShowField: 'name',
parentIdField: 'pid',
data: initDataList,
columns: [
{
field: 'name',
title: 'Name'
},
{
field: 'age',
title: 'Age'
},
{
field: 'gender',
title: 'Gender'
}
]
});
開閉式のツリー
テーブルに開閉式のツリーを表示します。
bootstrap-table-treegrid.min.jsを読み込みます。
また、jquery.treegrid.min.js、jquery.treegrid.cssを読み込みます。
<link rel="stylesheet" type="text/css" href="../../lib/jquery-treegrid/jquery.treegrid.css" />
<script type="text/javascript" src="../../lib/jquery-treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="../../lib/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
post-body.bs.tableイベントにtreegrid({})を組み合わせることで実現しています。
・initialState: 'collapsed'は、初期表示時の開閉を指定します。
・expanderExpandedClass: 'glyphicon glyphicon-minus',は、開いたときのアイコンを指定します。
・expanderCollapsedClass: 'glyphicon glyphicon-plus'は、閉じたときのアイコンを指定します。
userTable.bootstrapTable({
treeShowField: 'name',
parentIdField: 'pid',
columns: [
{
field: 'name',
title: 'Name'
},
{
field: 'age',
title: 'Age'
},
{
field: 'gender',
title: 'Gender'
}
]
}).on('post-body.bs.table', function () {
userTable.treegrid({
initialState: 'collapsed',
treeColumn: 0,
expanderExpandedClass: 'glyphicon glyphicon-minus',
expanderCollapsedClass: 'glyphicon glyphicon-plus',
onChange: function () {
userTable.bootstrapTable('resetWidth');
}
});
});
多言語化
テーブルを多言語表示します。
bootstrap-table-i18n-enhance.jsを指定します。
<script type="text/javascript" src="../../lib/bootstrap-table/extensions/i18n-enhance/bootstrap-table-i18n-enhance.js "></script>
bootstrapTable("changeLocale",) でロケールを変更します。bootstrapTable("changeTitle", )でタイトルの表示を変更します。
$('#apply').on('click', function () {
var lang = $('#language').val();
var titleObj = null;
if (lang === 'en-US') {
titleObj = {
name: 'Name',
age: 'Age',
gender: 'Gender'
};
} else if (lang === 'ja-JP') {
titleObj = {
name: '名前',
age: '年齢',
gender: '性別'
};
}
userTable.bootstrapTable("changeLocale", lang);
userTable.bootstrapTable("changeTitle", titleObj);
});
以上です。
関連記事
[Bootstrap-Table] JavaScriptでテーブル表示（その1）
[Bootstrap-Table] JavaScriptでテーブル表示（その2）
[Bootstrap-Table] JavaScriptでテーブル表示（その3）
[Bootstrap-Table] JavaScriptでテーブル表示（その4）
[Bootstrap-Table] JavaScriptでテーブル表示（その5）