Tabulator でカラムのformatter設定で文字色を変えたり、画像を表示したりできますが、列が多くなると見通しが悪くなるので、rowFormatterで同様の処理をしてみました。
< コード例 >
// @@ 行をフォーマットする時 @@ //
rowFormatter: (row) => {
// ++ 各行の列走査をしてエレメントを取得 ++ //
$.each($(row.getElement()).children(''), function (j, itm) {
// 属性に 'tabulator-field'がある場合 //
const fld = $(this).attr('tabulator-field');
// TTS前営業日差 //
if (fld === 'RT_TTS_LASTDIFF') {
const currDiff = row.getData().RT_TTS_LASTDIFF;
if (currDiff >= 0) {
$(this).text('+' + numeral(currDiff).format('#,###.#0'));
$(this).css('color', 'blue');
} else {
$(this).css('color', 'red');
}
}
// TTB前営業日差 //
if (fld === 'RT_TTB_LASTDIFF') {
const currDiff = row.getData().RT_TTB_LASTDIFF;
const currTTB = row.getData().RT_TTB;
if (currTTB <= 0) {
$(this).text("")
}
else {
if (currDiff >= 0) {
$(this).text('+' + numeral(currDiff).format('#,###.#0'));
$(this).css('color', 'blue');
} else {
$(this).css('color', 'red');
}
}
}
// セルの右罫線色変更 //
if (fld === 'CD_CURR' && $(this).text().length === 3) {
let curstyleV = $(this).attr('style');
curstyleV += 'border-right-color:#3c3c3c;';
$(this).attr('style', curstyleV);
}
// ドラッグドロップ行移動説明 //
if ($(this).hasClass("tabulator-row-handle")) {
$(this).attr('title', "ドラッグドロップしてこの行を移動出来ます");
$(this).addClass('tippydiv');
}
});
},
< 画面例 >
銀行発表の日次為替レート
前営業日より上がった場合、青文字、下がった場合赤文字。
|
|