今回は editor:"select"で定義したプルダウンから選択した値により 処理を行う方法について記述します。
プルダウン後に処理を行うには、cellEdited コールバックを用います。
Tabulatorドキュメント「Cell Callbaks ページ」 の Cell Edited パラグラフより抜粋
cellEdited コールバックはセルのデータが変更されたときに呼び出されます。
var table = new Tabulator("#example-table", {
cellEdited:function(cell){
//cell - セルデータ
},
});
cellEdited 処理は 「第14回 グループ分け、表示制限」 でプログラムしています。
- #table のテーブルでプルダウンを定義。
- #filter のテーブルを保存した変数 table でデータを table.setGroupBy() で操作。
処理コード
cellEdited: function(cell){
var val = cell.getValue();
if(val === "日付でグループ分け"){
if(table)table.setGroupBy('date');
}
else if (val === "日付(英)でグループ分け"){
if(table)table.setGroupBy('dateE');
}
else if (val === "月でグループ分け"){
if(table)table.setGroupBy('month');
}
else if(val === "Marのみ表示") {
if(table)table.setFilter("month","=","Mar");
}
else if (val === "日が１０日以上を表示") {
if(table)table.setFilter("date",">=",10);
}
else if (val === "制限解除"){
if(table)table.clearFilter();
}
}
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
{ title:"日付", field:"date" },
{ title:"日付(英)", field:"dateE" },
{ title:"月", field:"month" },
{ title:"日", field:"date" }
データ定義
{ dateE : "Nov 1", date:"11/1" , month: "Nov", date:1},
{ dateE : "Aug 5", date:"8/5" , month: "Aug", date:5},
{ dateE : "Mar 30",date:"5/9" , month: "Mar", date:9},
{ dateE : "Mar 30",date:"5/3" , month: "Mar", date:3},
{ dateE : "Mar 30",date:"5/5" , month: "Mar", date:5},
{ dateE : "Mar 30",date:"5/15" , month: "Mar", date:15},
{ dateE : "Mar 30",date:"5/30" , month: "Mar", date:30},
{ dateE : "Aug 10",date:"8/10" , month: "Aug", date:10},
{ dateE : "Jan 10",date:"1/10" , month: "Jan", date:10},
実行結果
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.6.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.3/dist/js/tabulator.min.js"></script>
</head>
<body onload="show_table()">
<h1 id=title> プルダウン後に処理を行う(cellEdited コールバック) </h1>
<p><div id="filter"></div></p>
<p><div id="table"></div></p>
<script type="text/javascript">
var show_table=function(){
var tdata = [
{ dateE : "Nov 1", date:"11/1" , month: "Nov", date:1},
{ dateE : "Aug 5", date:"8/5" , month: "Aug", date:5},
{ dateE : "Mar 30",date:"5/9" , month: "Mar", date:9},
{ dateE : "Mar 30",date:"5/3" , month: "Mar", date:3},
{ dateE : "Mar 30",date:"5/5" , month: "Mar", date:5},
{ dateE : "Mar 30",date:"5/15" , month: "Mar", date:15},
{ dateE : "Mar 30",date:"5/30" , month: "Mar", date:30},
{ dateE : "Aug 10",date:"8/10" , month: "Aug", date:10},
{ dateE : "Jan 10",date:"1/10" , month: "Jan", date:10},
];
var table = new Tabulator("#table", {
groupBy: "dateE",
data:tdata,
columns: [
{ title:"日付", field:"date" },
{ title:"日付(英)", field:"dateE" },
{ title:"月", field:"month" },
{ title:"日", field:"date" }
]
});
new Tabulator("#filter", {
data:[ {filter:"---"} ],
columns: [
{
title:"表示制限",
field:"filter",
editor:"select",
editorParams:{
values:[
"日付でグループ分け",
"日付(英)でグループ分け",
"月でグループ分け",
"Marのみ表示",
"日が１０日以上を表示",
"制限解除"
]
},
cellEdited: function(cell){
var val = cell.getValue();
if(val === "日付でグループ分け"){
if(table)table.setGroupBy('date');
}
else if (val === "日付(英)でグループ分け"){
if(table)table.setGroupBy('dateE');
}
else if (val === "月でグループ分け"){
if(table)table.setGroupBy('month');
}
else if(val === "Marのみ表示") {
if(table)table.setFilter("month","=","Mar");
}
else if (val === "日が１０日以上を表示") {
if(table)table.setFilter("date",">=",10);
}
else if (val === "制限解除"){
if(table)table.clearFilter();
}
}
}
]
});
}
</script>