前回、通貨表示("money")とカスタム関数は formatter に同時に定義できない記事を書きました。
rowFormatter でカスタム関数(disp_red)を定義すると formatterに通貨表示("money")を定義することができます。
var disp_red=function(row){
// field:'money'のデータ取得
var cell = row.getCell('money');
var val = cell.getValue();
// rowFormater の設定は bottomCalc にも反映される。
if(val<0) cell.getElement().style.color="#ff0000";
return val;
}
new Tabulator("#table", {
rowFormatter:disp_red,
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
{
title:"金額",
field:"money",
formatter:"money",
formatterParams:{precision:0},
bottomCalc:"sum",
bottomCalcFormatter:"money",
bottomCalcFormatterParams:{precision:0},
}
データ定義
{money: 5000},
{money: 0},
{money: -10000},
{money: undefined},
{money: NaN},
{money: null},
実行結果
サンプルコード
<!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>通貨表示("money")で値がマイナスの時、赤で表示する</h1>
<div id="table"></div>
<script type="text/javascript">
var disp_red=function(row){
// field:'money'のデータ取得
var cell = row.getCell('money');
var val = cell.getValue();
// rowFormater の設定は bottomCalc にも反映される。
if(val<0) cell.getElement().style.color="#ff0000";
return val;
}
var show_table=function(){
var tdata = [
{money: 5000},
{money: 0},
{money: -10000},
{money: undefined},
{money: NaN},
{money: null},
];
new Tabulator("#table", {
rowFormatter:disp_red,
data:tdata,
columns: [
{
title:"金額",
field:"money",
formatter:"money",
formatterParams:{precision:0},
bottomCalc:"sum",
bottomCalcFormatter:"money",
bottomCalcFormatterParams:{precision:0},
}
],
});
}
</script>