Tabulator tips

第8回 bottomCalc で他のセルの値を合計する

2020.01.15

bottomCalc で他のセルの値を合計するには、bottomCalc にカスタム関数を記述します。

カスタム関数で与えられる第二引数dataに行のデータが保存されているので 必要なデータを参照して計算します。

サンプルコードはカラム b_data の値を合計している。

//values - セルの値の配列
//data   - すべてのテーブルデータ
var sum_a_data = function(values, data){
    var sum = 0;
    data.forEach(d=>{
        // b_dataのbottomCalc だが、a_data の値を合計する。
        sum += d.a_data
    })
    return "a_dataの合計:"+sum;
}

以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

{title:"a_data", field:"a_data",bottomCalc:"sum"},
{title:"b_data", field:"b_data",bottomCalc:sum_a_data},

データ定義

{ a_data:1, b_data:10 },
{ a_data:2, b_data:20 },

実行結果

サンプルコード

<!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>  bottomCalc で他のセルの値を合計する </h1>
<div id="table"></div>

<script type="text/javascript">
//values - セルの値の配列
//data   - すべてのテーブルデータ
var sum_a_data = function(values, data){
    var sum = 0;
    data.forEach(d=>{
        // b_dataのbottomCalc だが、a_data の値を合計する。
        sum += d.a_data
    })
    return "a_dataの合計:"+sum;
}

var show_table=function(){
    var tdata = [
        { a_data:1, b_data:10 },
        { a_data:2, b_data:20 },
    ]
    new Tabulator("#table", {
        data:tdata,
        columns:[
            {title:"a_data", field:"a_data",bottomCalc:"sum"},
            {title:"b_data", field:"b_data",bottomCalc:sum_a_data},
        ],
    });
}
</script>

著者プロフィール

naka

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

記事一覧Index