columns の属性が多くなると columns の宣言内容の見通しが悪くなってきます。
columns 定義の後で属性を追加するとコードがスッキリして、見通しがよくなります。
var set_field =function(columns,field,key,val){
var d = columns.find(item=>item.field===field);
if(d) d[key] = val;
}
/*
* "money" のように複数設定が必要な属性は専用の関数を定義する。
* align,formatter,formatterParamsの指定は決まっているので
* key,valueの指定は必要ない。
*/
var set_money_field=(columns, field)=>{
var d = columns.find(item=>item.field===field);
if(d){
d.align ="right";
d.formatter ="money";
d.formatterParams={precision:0};
}
}
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
// 宣言時はtitle,name だけでシンプルにすると宣言のコードの見通しがよくなる。
var columns = [
{title:"金額",field:"mon"},
{title:"数値",field:"num"},
]
// 属性を設定
set_field(columns,"num","align","center");
// "money"のように複数設定が必要な属性は専用の関数を定義する。
set_money_field(columns,"mon");
データ定義
{num: 5463, mon: 500000},
{num: 135, mon: 750000},
実行結果
サンプルコード
<!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> 属性をあとで設定し、columns 宣言の見通しを良くする</h1>
<div id="table"></div>
<script type="text/javascript">
var set_field =function(columns,field,key,val){
var d = columns.find(item=>item.field===field);
if(d) d[key] = val;
}
/*
* "money" のように複数設定が必要な属性は専用の関数を定義する。
* align,formatter,formatterParamsの指定は決まっているので
* key,valueの指定は必要ない。
*/
var set_money_field=(columns, field)=>{
var d = columns.find(item=>item.field===field);
if(d){
d.align ="right";
d.formatter ="money";
d.formatterParams={precision:0};
}
}
var show_table=function(){
// 宣言時はtitle,name だけでシンプルにすると宣言のコードの見通しがよくなる。
var columns = [
{title:"金額",field:"mon"},
{title:"数値",field:"num"},
]
// 属性を設定
set_field(columns,"num","align","center");
// "money"のように複数設定が必要な属性は専用の関数を定義する。
set_money_field(columns,"mon");
var tdata = [
{num: 5463, mon: 500000},
{num: 135, mon: 750000},
]
new Tabulator("#table", {
data:tdata,
columns: columns
});
}
</script>