今回はセルに2つの値を表示する処理について記述します。
セルに２つの値を表示させるために値を"<br>" で結合し、2段になるようにします。
サンプルプログラムは税抜価格、税込価格を同じセルに表示します。
カラムdisp1は、セルに直接、"<br>" を埋め込む方法、 カラムdisp2は、セルに税抜価格を設定して formatter のカスタム関数で表示する方法を記述しました。
カラムdisp1: セルに"<br>" 埋め込む方法
- セルに"<br>" を区切り文字列にして、税抜価格、税込価格を埋め込む
- formatterプロパティは"html"を指定
- bottomCalc カスタム関数で区切り文字列で分割して、 上段、下段の合計値を計算し、合計した税抜価格、税込価格を表示
カラムdisp2: formatter のカスタム関数で表示する方法
- セルに税抜価格を設定
- formatterのカスタム関数で表示内容を作成。 下段の表記に<span style='font-size:x-small'>' 指定してフォントサイズを小さく表示
- bottomCalcは"sum"で合計を指定しているので bottomCalcFormatterのカスタム関数内で合計処理は不要となり、 通常セルと同じカスタム関数が使用できる。
formatterで表示内容を作成するとプログラムがスッキリするので セルには生データを入れて、formatterで表示内容を作成する記述がおすすめです。
// 1.1倍した値を返す
var getZeikomi = function(val){
return Math.floor(val*1.1);
}
// disp1 の区切り文字列
var get_delim = function(){
return "<br>税込 ";
}
// disp1 の bottomCalc 関数
var zeiCalc = function(values){
// カンマを取って、数値に戻す。
var toint = function(val){
return Number(val.replace(/,/g,""))
}
const delim = get_delim();
var zeinuki = 0;
var zeikomi = 0;
values.forEach(item=>{
// dlim:"<br>税込" で区切って計算する
items = item.split(delim);
zeinuki += toint(items[0])
zeikomi += toint(items[1])
})
return zeinuki + delim + zeikomi;
}
// disp2 カスタム関数。通常セル、bottomCalc は同じ関数を使用する
var zeiFormatter = function(cell){
var val = cell.getValue();
var zeinuki = val.toLocaleString();
var zeikomi = getZeikomi(val).toLocaleString();
// 2段目のfontサイズを小さくします。
// es6のテンプレートリテラル機能を使うと記述がスッキリする
return `${zeinuki}<br>
<span style='font-size:x-small;'>
(税抜き ${zeikomi})
</span>`;
}
カラム定義
{ title:"disp1",
field:"disp1",
align: "right",
formatter: "html",
bottomCalc:zeiCalc,
bottomCalcFormatter: "html",
},
{ title:"disp2",
field:"disp2",
align: "right",
formatter: zeiFormatter,
bottomCalc:"sum",
bottomCalcFormatter:zeiFormatter,
}
データ定義
var data = [
1532,
192,
780,
3000
];
var delim = get_delim();
var tdata = [];
data.forEach(val=>{
// 表示内容を作成する。
var zeikomi = getZeikomi(val).toLocaleString();
var zeinuki = val.toLocaleString();
tdata.push({
// 文字列"<br>税込"で結合した値を設定
disp1:zeinuki + delim + zeikomi,
disp2:val // disp2 は税抜き数値を設定
});
})
サンプルコード
<!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">
// 1.1倍した値を返す
var getZeikomi = function(val){
return Math.floor(val*1.1);
}
// disp1 の区切り文字列
var get_delim = function(){
return "<br>税込 ";
}
// disp1 の bottomCalc 関数
var zeiCalc = function(values){
// カンマを取って、数値に戻す。
var toint = function(val){
return Number(val.replace(/,/g,""))
}
const delim = get_delim();
var zeinuki = 0;
var zeikomi = 0;
values.forEach(item=>{
// dlim:"<br>税込" で区切って計算する
items = item.split(delim);
zeinuki += toint(items[0])
zeikomi += toint(items[1])
})
return zeinuki + delim + zeikomi;
}
// disp2 カスタム関数。通常セル、bottomCalc は同じ関数を使用する
var zeiFormatter = function(cell){
var val = cell.getValue();
var zeinuki = val.toLocaleString();
var zeikomi = getZeikomi(val).toLocaleString();
// 2段目のfontサイズを小さくします。
// es6のテンプレートリテラル機能を使うと記述がスッキリする
return `${zeinuki}<br>
<span style='font-size:x-small;'>
(税抜き ${zeikomi})
</span>`;
}
var show_table=function(){
var data = [
1532,
192,
780,
3000
];
var delim = get_delim();
var tdata = [];
data.forEach(val=>{
// 表示内容を作成する。
var zeikomi = getZeikomi(val).toLocaleString();
var zeinuki = val.toLocaleString();
tdata.push({
// 文字列"<br>税込"で結合した値を設定
disp1:zeinuki + delim + zeikomi,
disp2:val // disp2 は税抜き数値を設定
});
})
new Tabulator("#table", {
// bottomCalc の結果をすべて表示するため
layoutColumnsOnNewData:true,
data:tdata,
columns:[
{ title:"disp1",
field:"disp1",
align: "right",
formatter: "html",
bottomCalc:zeiCalc,
bottomCalcFormatter: "html",
},
{ title:"disp2",
field:"disp2",
align: "right",
formatter: zeiFormatter,
bottomCalc:"sum",
bottomCalcFormatter:zeiFormatter,
}
],
}).setData(tdata);//bottomCalc の結果をすべて表示するためデータ再ロード
}
</script>