編集可能にしたTabulator で、ALL check のチェックＢＯＸを設置する

Tabulator は、編集用に設置した場合、
チェック（tickcross）に対する、ALL check ON/OFF を切り替える＝入力する為の
機能または部品というのは標準で用意されていない。
ALL check ON/OFF の部品は、普通のＵＩ感覚では、表のヘッダにある。
しかし、Tabulator のヘッダカラム定義でそこに設置するのは、
表示フィルタでありALL check ON/OFF ではない。
では、どうするか？
トリッキーな方法をするしかない。
Tabulator のフィルタは、カスタムフィルタを指定できることになっている。
まず、、チェック(tickcross) に対してフィルタではなく全てをセットする。
・・・この時点、ＯＮにする設定だけで、後でＯＦＦにする処理は別である。
そして、このヘッダの定義で、headerFilterPlaceholder を敢えて設定しておく、

var columndefine = [
   {  field:"active", editor:"tick", align:"center", formatter: "tickCross",
      headerFilter: true, width: 40,
      headerFilterPlaceholder:"Allcheck",
      headerFilterFunc:function(headerValue, rowValue, rowData, filterParams){
            rowData.active = 1;
            return true;
         }
      },
      { title:"名前",  field:"name",   editor:"input", sortable:true, headerFilter:false } ,
];

rowData のデータをフィルタのチェックで、全てＯＮ（＝１）をセットしてフィルタを
働かせてしまうのだ。これは、フィルタ関数の実行が各行に対して実行されるから、
成立する。
全てＯＦＦは、この後で、jQuery の click イベント捕捉の関数定義で処理する。

Tabulator データ定義と設置

$('#example-table').tabulator({
   layout: "fitDataFill",
   columns: columndefine,
});
var tabledata = [
   {id:1, active: 1, name:"あああ" },
   {id:2, active: 0, name:"いいい" },
   {id:3, active: 1, name:"ううう" },
   {id:4, active: 0, name:"ABCDE"  },
   {id:5, active: 1, name:"12345"  },
];

// load sample data into the table
$("#example-table").tabulator("setData", tabledata);

placeholder='Allcheck' の input を click した時の設定関数を定義する

var setAllchecker = function(){
   $("input[placeholder='Allcheck']").click(function(){
      if (!$(this).prop('checked')){
         var res = [];
         $.each($("#example-table").tabulator("getData"), function(i, row){
            row.active = 0;
            res.push(row);
         });
         $("#example-table").tabulator("destroy");
         $('#example-table').tabulator({
            layout: "fitDataFill",
            columns: columndefine,
         });
         $("#example-table").tabulator("setData", res);
         setAllchecker();
      }
   });
};

この中では、destroy して再表示させているので、もう一度、setAllchecker() を呼び出して
再定義が必要になる。
最後に、setAllchecker() を実行

// setAllchecker() を実行
setAllchecker();