Tabulator tips

第10回 属性をあとで設定し、columns 宣言の見通しを良くする

2020.01.29

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>

著者プロフィール

naka

すきなコマンドは awk と bc です。なにかを計算する時、awk か bc を使います。

記事一覧Index