2017年1月8日

tableタグのtrタグを指定したデータで追加するjQueryプラグイン作ってみた

業務アプリケーションを作っていると、テーブルに行を追加する処理が良く出てきます。
例えば、検索ウィンドウで条件を入力して検索するとその検索結果が行として表示され、選択するとメイン画面に反映するとか。

毎回同じコーディングをして面倒だったのでjQueryのプラグインにしてしまいました。
既にもっと高機能なものが提供されている可能性もありますが、自分がやりたいように改造もしたいので車輪の再発明をしました。


プラグインのダウンロードは、こちら(jQuery.tabler)から


    
    Tabler
    
    
    



    
    
$(function() {
  'use strinct';

      // ポイント : tablerの準備
      //
      $("#search_list").tabler({
        rowTemplate: '.row_template',
        rowDetail: '.row_detail',
        addPoint: 'tr:last'
      });

      $("#button").on({
        click: function() {

            var data = [
                {id: 100, text: '100のデータ'},
                {id: 101, text: '101のデータ'},
                {id: 102, text: '102のデータ'},
                {id: 103, text: '103のデータ'},
                {id: 104, text: '104のデータ'},
            ];

            // ポイント : テーブルに行を追加する
            $("#search_list").tabler.bindData(data, {
                clear: true,
                // 行編集
                editRow: function(index, item, newRow) {
                $(".no", newRow).text(item.id);
                $(".タイトル", newRow).text(item.text);

                return true;
                }
            });
        }
     });
});
プラグインのダウンロードは、こちら(jQuery.tabler)から