はじめに
この記事は javascript ライブラリ Tabulator の tips です。
記事中のプログラムは Tabulator を使うため、以下の CDN を使用します。
<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>
Tabulator のドキュメントは以下にあります。
記事の構成は以下の通りです。
- tips の説明
- カラム定義 (サンプルコードから抜粋)
- データ定義 (サンプルコードから抜粋)
- 実行結果 (サンプルコードを実行した結果)
- サンプルコード
以下、記事本文となります。
セルの値がマイナスの時、赤で表示する
セルの表示を変えるため formatter にカスタム関数(disp_red)を指定します。
フッターの値がマイナスの場合も赤く表示したいので、bottomCalcFormater にもカスタム関数(disp_red)を指定します。
// セルの値がマイナスの時、赤で表示する。
var disp_red=function(cell){ // 引数はセルデータ(cell)
var val = cell.getValue(); // セルの値を取得
if(val<0) { // 値がマイナスの場合、赤を設定。
cell.getElement().style.color="#ff0000";
}
return val; // 表示する値を返す
}
サンプルコードでは、データ定義に数値以外に undefined, NaN, null, string を指定して、どのような表示になるか、試しています。
表示は次のようになりました。
- 0, プラス値 .. 数値が表示
- マイナス値 .. 数値が赤で表示
- undefined .. 表示されない
- NaN .. "NaN" が表示
- null .. 表示されない
- string .. 文字列が表示
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
{
title:"数値",
field:"number",
formatter:disp_red, // 関数disp_redを指定
bottomCalc:"sum", // bottomCalc は合計"sum"を指定
bottomCalcFormatter:disp_red // 関数disp_redを指定
}
データ定義
{number: 50},
{number: 0},
{number: -100},
{number: undefined},
{number: NaN},
{number: null},
{number: "string"},
実行結果
サンプルコード
<!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>セルの値がマイナスの時、赤で表示する </h1>
<div id="table"></div>
<script type="text/javascript">
// セルの値がマイナスの時、赤で表示する。
var disp_red=function(cell){ // 引数はセルデータ(cell)
var val = cell.getValue(); // セルの値を取得
if(val<0) { // 値がマイナスの場合、赤を設定。
cell.getElement().style.color="#ff0000";
}
return val; // 表示する値を返す
}
var show_table=function(){
var tdata = [
{number: 50},
{number: 0},
{number: -100},
{number: undefined},
{number: NaN},
{number: null},
{number: "string"},
];
new Tabulator("#table", {
data:tdata,
columns: [
{
title:"数値",
field:"number",
formatter:disp_red, // 関数disp_redを指定
bottomCalc:"sum", // bottomCalc は合計"sum"を指定
bottomCalcFormatter:disp_red // 関数disp_redを指定
}
]
});
}
</script>