Tabulator tips

第26回 formatterで他のセルのデータを参照する

2020.05.27

今回は formatter 処理で他のセルのデータを参照する方法 について記述します。

formatter 関数において cell.getData() によりそのセルがあるカラムデータを取得します。 取得したデータからフィールド名を指定すれば、他のセルデータを参照できます。

// 他のセルのデータ参照
let data = cell.getData();
let price = data.price;

カラム定義

{
    title:"価格",
    field:"price",
    align: "right",
    formatter: "money",
    formatterParams:{precision:0}, 
},
{
    title:"税率",
    field:"ritsu",
    align: "right",
    formatter: function(cell){
        let val = cell.getValue();
        if(val) return val+"%"
    }
},
{
    title:"税込み",
    field:"komi",
    align: "right",
    formatter: disp_zeikomi,
},

データ定義

{ price: 1000, ritsu: 8 },
{ price: 5000, ritsu: 10 },
{ price: 8000, ritsu: 8 },

サンプルコード

<!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> formatterで他のセルのデータを参照する </h1>

<p><div id="table"></div></p>

<script type="text/javascript">
var disp_zeikomi = function(cell){
    // 他のセルのデータ参照
    let data = cell.getData();
    let price = data.price;
    let zei = data.ritsu/100;

    // 表示データ計算
    let zeikomi = price * (1 + zei);
    // カンマ表示
    return Math.round(zeikomi).toLocaleString()
}
var show_table=function(){
    var tdata = [
        { price: 1000, ritsu: 8 },
        { price: 5000, ritsu: 10 },
        { price: 8000, ritsu: 8 },
    ];
    var columns = [
            {
                title:"価格",
                field:"price",
                align: "right",
                formatter: "money",
                formatterParams:{precision:0}, 
            },
            {
                title:"税率",
                field:"ritsu",
                align: "right",
                formatter: function(cell){
                    let val = cell.getValue();
                    if(val) return val+"%"
                }
            },
            {
                title:"税込み",
                field:"komi",
                align: "right",
                formatter: disp_zeikomi,
            },
    ];
    new Tabulator("#table", {
        data:tdata,
        columns: columns,
    });
}
</script>

著者プロフィール

naka

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

記事一覧Index