日: 2022年12月22日

ここで教えていただきました。

< コード例 >

      locale: true,   //trueならばブラウザの言語設定を自動検出 'ja'のように指定することも可能
      langs: {
        ja: {
          //データ読込関連のテキストの翻訳
          data: {
            loading: '読込中',
            error: 'エラー',
          },
          //ページネーション関連のテキストの翻訳
          pagination: {
            page_size: '表示件数',
            page_title: 'ページを表示',
            first: '最初',
            first_title: '最初のページ',
            last: '最後',
            last_title: '最後のページ',
            prev: '前',
            prev_title: '前のページ',
            next: '次',
            next_title: '次のページ',
            all: 'すべて',
            counter: {
              showing: '表示中',
              of: '/',
              rows: '件',
              pages: 'ページ',
            },
          },
        },

      },

< 画面例 >

JavaScriptコードレシピ集 スグに使えるテクニック278　最新ECMAScri [ 池田泰延 ] 価格：3278円（税込、送料無料) (2023/1/20時点) 楽天で購入

columns の formatter を progress にします。

詳しくはこちら

< コード例 >

データはサーバー側で用意してます。

  // パーセンテージプログレスバー //
  {
    title: "TTS Ratio", field: "PCNT_TTS", formatter: "progress", formatterParams: {
      min: 0,                   // 範囲最小値
      max: 100,                 // 範囲最大値
      color: ["#008600"],       // 棒グラフ色
      legend: true,             // 値表示 or not
      legendColor: "#FFFFFF",   // 値色
      legendAlign: "justify",   // 値位置
    },
    width: 100,
    topCalc: "avg", bottomCalcParams: { precision: 1 },
    /*formatter: function (cell, formatterParams, onRendered) {
      return Math.round(cell.getValue() / 5)
    },*/
  }

< 画面例 >

過去1年分の為替レートの最大を100, 最小を0とした率を表示

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時点) 楽天で購入

マスタリンクしている２表があってメインレコードをクリックして明細表を横やサブグリッドで表示することはよくあると思います。
メイン表を読み込んだ時点で明細表も同時に表示したくなり、
これもStackOverFlowで同様のことをしたい人を見つけ、回答を参考にして書いてみました。

< コード例 >

カラムには”id”の列が必要なので設定
“id”はサーバー側でセット済

 { field: "id", visible: false }

tableBuiltのイベントでメイン表の1行目をクリックさせる

  // @@ 機材別合計テーブル生成時 @@ //
    table.on("tableBuilt", function () {
  
      // == 省略 == //

      // == 1行目クリック == //
      const fstrow = table.getRow(1)     // <=== 合計計算行を上に配置したのでインデックスは1になる(と思う)
      const fstrowelm = fstrow.getElement()
      $(fstrowelm).trigger('click')

    })

メインテーブルの行クリックイベント

    // @@ メインテーブル行をクリックした時 @@ //
    table.on("rowClick", function (e, row) {
      //e - the click event object
      //row - row component

      // == 省略 == //

      // -C 明細データリクエスト取得 //
      const dlg = new OpeEqDialog()
      let details = dlg.getModelDetails(al_icao, name)["rows"]
      details.forEach((tmp, i) => {
        if (OpeEqDialog.active_regnumbers.includes(tmp.nm_regist)) {
          tmp.is_active = "*"
        } else {
          tmp.is_active = ""
        }

        tmp["id"] = i
      })

      console.log(details)

      // 番号コード明細テーブル表示 //
      dlg.showDetailTable(details, name)

    })

< 画面例 >

1行目クリックを発生させない場合
明細テーブルが非表示

1行目クリックを発生させる
明細テーブルが表示される、更に明細テーブルにも同様の処理を追加して、機材の写真と登録履歴を横に表示