bottomCalc の組み込み処理について記述します。
- sum .. 合計
- avg .. 平均値。値にNaN,undefined,文字列があると計算結果はNaN になるため、例では NaN,undefined, 文字列を指定しないデータにしている。
- max .. 最大値
- min .. 最小値
- count .. セル数。count は値があるセルをカウントする。セルの値が0,undefined,NaN,nullの場合はカウント対象にならない。
- concat .. 結合。セルの内容を文字列として結合する。
- カスタム関数 .. bottomCalに指定した関数で表示したい値を返す。例では「合計値は」を付加した文字列をを表示する。
カスタム関数の例。"sum" と同じ合計値を算出する。 "合計値は"という文字列を付けて表示する。
// bottomCalcに関数を指定した場合、引数にセルの値の配列 values が与えられる。
var self_sum=function(values){
// この関数はセルの合計値に"合計値は"という文字列を付加して返す。
var sum = 0
values.forEach(val=>{
// undefined,NaN,nullを加算するとsumがNaNになるので除外する。
// 文字列を加算すると数値でなくなるのでNumber()で対応
if(Number(val)) sum+=Number(val)
})
// "合計値は"という文字列を付加する。
return "合計値は" + sum
}
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
{title:"合計", field:"sum",bottomCalc:"sum"},
{title:"平均", field:"avg",bottomCalc:"avg"},
{title:"最大", field:"max",bottomCalc:"max"},
{title:"最小", field:"min",bottomCalc:"min"},
{title:"カウント",field:"count", bottomCalc:"count"},
{title:"結合",field:"concat",bottomCalc:"concat"},
{title:"関数指定",field:"self_sum",bottomCalc:self_sum},
データ定義
{ sum: 0, avg: 0, max: 0, min: 0, count:0, concat: 0, self_sum:0},
{ sum: 1, avg: 1, max: 1, min: 1, count:1, concat: 1, self_sum:1},
{ sum: undefined, avg: 2, max: undefined, min: undefined, count:undefined, concat: undefined, self_sum:undefined},
{ sum: 3, avg: 3, max: 3, min: 3, count:3, concat: 3, self_sum:3},
{ sum: NaN, avg: 4, max: NaN, min: NaN, count:NaN, concat: NaN, self_sum:NaN},
{ sum: null, avg: null, max: null, min: null, count:null, concat: null, self_sum:null},
{ sum: "文字列", avg: 6, max: "文字列", min: "文字列", count:"文字列", concat: "文字列", self_sum:"文字列"},
実行結果
サンプルコード
<!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">
// bottomCalcに関数を指定した場合、引数にセルの値の配列 values が与えられる。
var self_sum=function(values){
// この関数はセルの合計値に"合計値は"という文字列を付加して返す。
var sum = 0
values.forEach(val=>{
// undefined,NaN,nullを加算するとsumがNaNになるので除外する。
// 文字列を加算すると数値でなくなるのでNumber()で対応
if(Number(val)) sum+=Number(val)
})
// "合計値は"という文字列を付加する。
return "合計値は" + sum
}
var show_table=function(){
var tdata = [
{ sum: 0, avg: 0, max: 0, min: 0, count:0, concat: 0, self_sum:0},
{ sum: 1, avg: 1, max: 1, min: 1, count:1, concat: 1, self_sum:1},
{ sum: undefined, avg: 2, max: undefined, min: undefined, count:undefined, concat: undefined, self_sum:undefined},
{ sum: 3, avg: 3, max: 3, min: 3, count:3, concat: 3, self_sum:3},
{ sum: NaN, avg: 4, max: NaN, min: NaN, count:NaN, concat: NaN, self_sum:NaN},
{ sum: null, avg: null, max: null, min: null, count:null, concat: null, self_sum:null},
{ sum: "文字列", avg: 6, max: "文字列", min: "文字列", count:"文字列", concat: "文字列", self_sum:"文字列"},
]
new Tabulator("#table", {
data:tdata,
columns:[
{title:"合計", field:"sum",bottomCalc:"sum"},
{title:"平均", field:"avg",bottomCalc:"avg"},
{title:"最大", field:"max",bottomCalc:"max"},
{title:"最小", field:"min",bottomCalc:"min"},
{title:"カウント",field:"count", bottomCalc:"count"},
{title:"結合",field:"concat",bottomCalc:"concat"},
{title:"関数指定",field:"self_sum",bottomCalc:self_sum},
],
});
}
</script>