Tabulator rowFormatterを使って、文字色を変化させる

 

 

 

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');
          }

        });
      },

< 画面例 >

銀行発表の日次為替レート
前営業日より上がった場合、青文字、下がった場合赤文字。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

かんたんJavaScript ECMAScript2015対応版 (プログラミングの教科書) [ 高橋広樹 ]
価格:2838円(税込、送料無料) (2023/1/19時点)

楽天で購入

 

 

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

JavaScript逆引きレシピ 第2版 [ 山田 祥寛 ]
価格:3,080円(税込、送料無料) (2023/5/23時点)

楽天で購入

 

 

コメントを残す