[Bootstrap-Table] JavaScriptでテーブル表示（その1）

Bootstrap Table のテーブルを使用したサンプルプログラムを紹介します。

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

JavaScriptライブラリ

Bootstrap Table: 1.12.1

ライブラリの読み込み

以下の2ファイルを参照します。

index.html

<link rel="stylesheet" type="text/css" href="../../lib/bootstrap-table/bootstrap-table.min.css" />
<script type="text/javascript" src="../../lib/bootstrap-table/bootstrap-table.min.js"></script>

テーブルの作成

bootstrapTable({})でテーブルに表示するカラム定義とデータを指定します。

テーブルの作成

userTable.bootstrapTable({
    data: initDataList,
    columns: [
        {
            field: 'name', // データ上のカラム名
            title: 'Name' // 表示上のカラム名
        },
        {
            field: 'age',
            title: 'Age'
        },
        {
            field: 'gender',
            title: 'Gender'
        }
    ]
});

デモはこちら
ソースファイルはこちら

データの取得

bootstrapTable('getData')でテーブルに表示しているデータを取得します。

データの取得

var dataList = userTable.bootstrapTable('getData');

デモはこちら
ソースファイルはこちら

選択したデータの削除

bootstrapTable('getSelections')でテーブルのチェックボックスで選択しているデータを取得します。
bootstrapTable('remove', {})でテーブルに表示しているデータを削除します。

選択したデータの削除

var idList = $.map(userTable.bootstrapTable('getSelections'), function (row) {
    return row.id;
});
userTable.bootstrapTable('remove', { field: 'id', values: idList });

デモはこちら
ソースファイルはこちら

データの追加

bootstrapTable('insertRow', {})でテーブルにデータを追加します。

データの追加

var dataList = userTable.bootstrapTable('getData');
userTable.bootstrapTable('insertRow', { index: dataList.length, row: rowData });

デモはこちら
ソースファイルはこちら

データの更新

bootstrapTable('updateRow', {})でテーブルにデータを更新します。

データの更新

var rowIndex = $('#rowIndex').val();
userTable.bootstrapTable('updateRow', { index: rowIndex, row: rowData });

デモはこちら
ソースファイルはこちら

以上です。

関連記事

[Bootstrap-Table] JavaScriptでテーブル表示（その1）
[Bootstrap-Table] JavaScriptでテーブル表示（その2）
[Bootstrap-Table] JavaScriptでテーブル表示（その3）
[Bootstrap-Table] JavaScriptでテーブル表示（その4）
[Bootstrap-Table] JavaScriptでテーブル表示（その5）