グループ分け
groupBy の指定により、カラムをグループにした表示ができます。
"#table" のテーブルで初期グループ groupBy: "dateE" を設定しました。
"#filter" のテーブルでプルダウンメニューから表示制限の処理を呼び出す処理を実装しました。
日付でグループ分け table.setGroupBy('date')
日付(英)でグループ分け table.setGroupBy('dateE')
月でグループ分け table.setGroupBy('month')
表示制限
table.setFilter('表示条件') により表示制限を行うことができます。
カラム"month"が "Mar"の行だけ表示
table.setFilter("month","=","Mar")
カラム"date"が 10 以上の行だけ表示
table.setFilter("date",">=",10)
表示制限解除
table.clearFilter()
処理コード
var table = new Tabulator("#table", {
groupBy: "dateE",
new Tabulator("#filter", {
data:[ {filter:"---"} ],
columns: [
{
title:"表示制限",
field:"filter",
editor:"select",
editorParams:{
values:[
"日付でグループ分け",
"日付(英)でグループ分け",
"月でグループ分け",
"Marのみ表示",
"日が10日以上を表示",
"制限解除"
]
},
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 === "日が10日以上を表示") {
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.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
</head>
<body onload="show_table()">
<h1 id=title> グループ分け、表示制限 </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のみ表示",
"日が10日以上を表示",
"制限解除"
]
},
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 === "日が10日以上を表示") {
if(table)table.setFilter("date",">=",10);
}
else if (val === "制限解除"){
if(table)table.clearFilter();
}
}
}
]
});
}
</script>