[Bootstrap-Table] JavaScriptでテーブル表示（その5）拡張機能

Bootstrap Table の拡張機能について、使えそうな機能を5つ紹介します。
それぞれ拡張機能用のjsファイルを読み込むと使用することができます。

Bootstrap Table
http://bootstrap-table.wenzhixin.net.cn/

JavaScriptライブラリ

Bootstrap Table: 1.12.1

フィルター

テーブルのヘッダー部分にフィルター用のテキストボックスやプルダウンを表示します。
bootstrap-table-filter-control.js を読み込みます。

index.html

<script type="text/javascript" src="../../lib/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>

filterControl: trueを指定することでフィルター機能が有効になります。フィルターの種類は、各カラムで指定することができます。
・filterControl: 'input'は、テキストボックス
・filterControl: 'select'は、プルダウン

index.js

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も読み込む必要があります。

index.html

<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を指定することで行のドラッグアンドドロップ機能が有効になります。

index.js

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を読み込みます。

index.html

<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の指定が必要になります。

index.js

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を読み込みます。

index.html

<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'は、閉じたときのアイコンを指定します。

index.js

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を指定します。

index.html

<script type="text/javascript" src="../../lib/bootstrap-table/extensions/i18n-enhance/bootstrap-table-i18n-enhance.js "></script>

bootstrapTable("changeLocale",) でロケールを変更します。bootstrapTable("changeTitle", )でタイトルの表示を変更します。

index.js

$('#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）