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

Bootstrap-Table でテーブル表示（その1）:

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

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

JavaScriptライブラリ

Bootstrap Table: 1.12.1 

テーブルの作成

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 }); 

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

以上です。