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

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

Bootstrap Table で前回紹介したUIと異なるデータ追加/更新方法を紹介します。

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

JavaScriptライブラリ

Bootstrap Table: 1.12.1 

入力値の更新

テキストボックスやプルダウンの値が変更したら

変更した内容を更新するという実装になっています。

HTMLのIDから、テーブルのindexを取得します。

その後、bootstrapTable('getData')でデータを取得します。

以上から、bootstrapTable('updateRow',{})でデータを更新します。

入力値の更新

}).on('change', '[id^=name_]', function () { 
    var id = $(this).attr('id'); 
    var index = parseInt(id.replace('name_', '')); 
    var dataList = userTable.bootstrapTable('getData'); 
    dataList[index].name = $(this).val(); 
    userTable.bootstrapTable('updateRow', { index: index, row: dataList[index] }); 
}) 

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

関連記事

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

以上です。