カテゴリー: JavaScript

Tabulator のチャートを使ってみる

投稿日: 投稿者:

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 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時点)

楽天で購入

 

 

Tabulator で 行クリックを動的発生させてメイン表と明細表を同時に表示させる

投稿日: 投稿者:

 

 

 

マスタリンクしている２表があってメインレコードをクリックして明細表を横やサブグリッドで表示することはよくあると思います。
メイン表を読み込んだ時点で明細表も同時に表示したくなり、
これも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行目クリックを発生させる
明細テーブルが表示される、更に明細テーブルにも同様の処理を追加して、機材の写真と登録履歴を横に表示

Tabulator で行に下線をつける

投稿日: 投稿者:

 

 

 

Tabulator でグループピングするまでもないものの、区切り線で分ければわかりやすくなるので、ソートされたカラムの値でグループで別れてる変わり目に区切り線をつけてみました。

< コード例 >

tableBuiltのリスナーで行を読み込んで下線を引く行にクラスを追加しています。

CSS


.border-bottom-blue1 {
    border-bottom: solid 1px blue
}

JavaScript


        // @@ tabulator テーブル生成完了時 @@ //
        table.on('tableBuilt', function () {

            console.log('--- data loaded ---')
            console.log(new Date().getTime())

            // テーブルの行を配列にする //
            const rows = table.getRows()

            // 日付変化下線用日付配列 //
            let dates = []
            rows.forEach((row) => {
                dates.push(row.getData().subgDepDate)
            })
            console.log(dates)

            // 日が変わる行のインデックス位置を配列にする //
            let underlineIdxs = []
            dates.forEach((dt, i) => {
                if (i > 0 && dt !== dates[i - 1]) {
                    underlineIdxs.push(i - 1)
                }
            })
            console.log(underlineIdxs)

            // ++ 行を走査して下線位置に下線を引く ++ //
            rows.forEach((row, i) => {
                // 該当行の場合 //
                if (underlineIdxs.includes(i)) {
                    const elm = row.getElement()
                    // 下線クラスを追加 //
                    $(elm).addClass("border-bottom-blue1")
                }
            })

        })

< 画面例 >
スカイマークの飛行機の日付別運航履歴がわかりやすくなりました。

 

Tabulator でクリップボードにコピー

投稿日: 投稿者:

 

 

 

Tabulator に copyToClipboard メソッドがあり、特にDOMを操作しなくても出来ました。
方法は公式ドキュメントに詳しく書かれています。

< コード例 >

プロパティ


  // ++ Tabulator ++ //
  let table = new Tabulator("#altable", {


    // クリップボード設定 //
    clipboard: true,
    clipboardCopyConfig: {
      columnHeaders: true, //do not include column headers in clipboard output
      columnGroups: false, //do not include column groups in column headers for printed table
      rowGroups: false, //do not include row groups in clipboard output
      columnCalcs: true, //do not include column calculation rows in clipboard output
      dataTree: false, //do not include data tree in printed table
      formatCells: false, //show raw cell values without formatter
    },

    // == 他は省略 == //

  })

テーブル生成後のイベントでステータスバーにコピー用アイコンを配置して、クリックのリスナーを書いてます。


  // @@ テーブル生成時 @@ //
  table.on("tableBuilt", function () {

    // コピーボタン挿入 //
    const html = `<span id="clipbtn" class="ml-2 mr-2 curpo tippydiv"
    title="Copy to clipboard all records">
    <img src="Img/copy_64_darkgray.png" width="20"/>
    </span>`
    const ftcnts = $(".tabulator-footer-contents").eq(0)
    $(ftcnts).prepend(html)

    // @@ コピーボタンを押した時 @@ //
    $("#clipbtn").on("click", function (e) {
      table.copyToClipboard("all") //copy the currently selected rows to the clipboard
      toastr.info("All records were copied to clipboard")
    })

    // tippy //
    tippy('.tippydiv', {
      placement: 'top',
      animation: 'scale',
      duration: 1000,
      arrow: true
    })

  })

< 画面例 >

Tabulator で クリックした行の文字色を変えて強調

投稿日: 投稿者:

 

 

 

Tabulator でクリックした行の明細表を別テーブルで表示する時、メインテーブルのレコードが多い場合、どの行をクリックしたのかがわからなくなるのを防ぐ為にクリックした行の文字色を変えて強調させてみました。

< コード例 >

まずはテーブルが生成された時の行文字色を取得してクラス変数にセット


    // @@ 明細テーブルが生成された時 @@ //
    table.on("tableBuilt", function () {

      const componentToHex = (c) => {
        var hex = c.toString(16)
        return hex.length == 1 ? "0" + hex : hex
      }

      const rgb2hex = (r, g, b) => {
        console.log(r, g, b)
        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b)
      }
 
      // セル文字色取得 //
      const cell = table.getRow(1).getCell("code").getElement()
      const style = window.getComputedStyle(cell)
      const rgbcol = style.getPropertyValue('color')
 
      const rgbtxt = rgbcol.replace("rgb(", "").replace(")", "").replaceAll(" ", "")
   
      const rgbary = rgbtxt.split(",")
      this.cellColorDetail = rgb2hex(rgbary[0], rgbary[1], rgbary[2],)


    })

セルをクリックした時


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

      // 全行文字色をテーブル生成時の文字色にして初期化 //
      const rows = table.getRows()
      rows.forEach(tmp => { tmp.getElement().style.color = this.cellColor })
      // 強調 //
      row.getElement().style.color = "#0000FF"

      // == 以下省略 == //

    })

    return table
  }

< 画面例 >

Tabulator でテーブルにタイトルをつける

投稿日: 投稿者:

 

 

 

 

 

Taburator でテーブルのタイトルをつけるにあたって、プロパティとしてはタイトルの設定がないので、何とかならないかと調べましたところ、StackOverFlowで同様のこと考えている人の投稿を見つけて、GroupHeaderにしてColumnHeaderを2行にすることにより、タイトルをつけられるようになりました。

Is there away to display a title for a Tabulator table? <== これ

< コード例 >



  /**
   * 機材コード、番号明細テーブル
   * @param {*} data 明細データ
   * @param {*} name タイトル用モデル名
   */
  showDetailTable(data, name) {

    const table = new Tabulator("#eachdetail_table", {
      data: data,
      layout: "fitDataTable",
      maxHeight: "100%",
      columns: [
　　　　// 1行目 1列にする フィールドにはデータ列を指定しない 変数で文字を変える //
        {
          title: name + " Details",
          field: "",
          // 2行目 //
          columns: [
            {
              title: "No.",
              field: "rowno",
              formatter: "rownum",
              frozen: true,
              width: 10,
              hozAlign: "right",
              cssClass: "cell_num",
            },
            { title: "RegNo.", field: "nm_regist", width: 70 },
            { title: "ICAO24", field: "icao24", width: 70 },
            { title: "Serial", field: "nm_serial", width: 70 },

            {
              title: "Active",
              field: "is_active",
              width: 6,
              hozAlign: "center",
            },
            { field: "id", visible: false }
          ],
        },
      ],



  /**
   * 機材名別合計テーブル
   * @param {*} data
   */
  showEachTotalTable(data, al_icao) {

    const table = new Tabulator("#eachtotal_table", {

      data: data,
      layout: "fitDataTable",
      maxHeight: "100%",
      columns: [

        {
          field: "", title: al_icao + " Each totls, actives count",
          columns: [
            // 行番号  ???? 幅が狭くならない //
            {
              title: "No.",
              field: "rowno",
              formatter: "rownum",
              frozen: true,
              width: 10,
              hozAlign: "right",
              cssClass: "cell_num",
            },
            { title: "Code", field: "code", width: 50 },
            { title: "Name", field: "name", width: 150, topCalc: "count" },
            {
              title: "Count",
              field: "count",
              width: 40,
              hozAlign: "right",
              topCalc: "sum",
            },
            {
              title: "Active",
              field: "active_count",
              width: 40,
              hozAlign: "right",
              topCalc: "sum",
              /*formatter: function (cell, formatterParams, onRendered) {
                if (cell.getData() == 0) {
                  return ""
                }
                else {
                  return cell.getData()
                }
              }*/
            },
            { field: "id", visible: false }
          ]
        }],

< 画面例 >

 

Tabulator で tippyのツールチップ

投稿日: 投稿者:

 

 

 

Tabulator でtippy.js のツールチップが使いたいので試してみると出来ました。
rowFormatter で各行配下のエレメントを走査して、クラスやフィールド名が合致した場合、getElement()でエレメントを取得します。
後はエレメントに対してDOM操作でセットしています。

< コード例 >


   // @@ 行をフォーマットする時 @@ //
    rowFormatter: row => {

      $.each($(row.getElement()).children(''), function (j, itm) {

        const fld = $(this).attr('tabulator-field')

        // tabulator-row-handle クラスがある場合 //
        if ($(this).hasClass('tabulator-row-handle')) {
          $(this).attr('title', 'Move this row by drag and drop')
          $(this).addClass('tippydiv')
        }

        // フィールド名が '_'である場合 //
        if (fld === '_') {
          $(this).attr('title', 'Show runway details and map')
          $(this).addClass('tippydiv')
        }
      })

      // tippy //
      tippy('.tippydiv', {
        placement: 'bottom',
        animation: 'scale',
        duration: 1000,
        arrow: true
      })
    }
  })


    // @@ 行をフォーマットする時 @@ //
    rowFormatter: (row) => {

      const iata = row.getData().iata_code

      $.each($(row.getElement()).children(""), function (j, itm) {
        const fld = $(this).attr("tabulator-field")

        if ($(this).hasClass("tabulator-row-handle")) {
          $(this).attr('title', "Move this row by drag and drop");
          $(this).addClass('tippydiv');
        }

        if (fld === "cntrycd") {
          $(this).attr("title", CNTRYMAME_MAP[row.getData().cntrycd_org])
          //$(this).attr('title', "国名");
          $(this).addClass("tippydiv")
        }
        if (fld === "__") {
          $(this).attr("title", "By right click, context menu appear")
          //$(this).attr('title', "国名");
          $(this).addClass("tippydiv_top")
        }


      })

      // tippy //
      tippy(".tippydiv", {
        placement: "bottom",
        animation: "scale",
        duration: 1000,
        arrow: true,
      })
      // tippy //
      tippy(".tippydiv_top", {
        placement: "top",
        animation: "scale",
        duration: 1000,
        arrow: true,
      })
    },
  })

< 画面例 >

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

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

楽天で購入

 

 

Tabulator 開発日記

投稿日: 投稿者:

 

 

 

Tabulator を始めました。
仕事ではずっと jqGrid を使ってましたが、jqGridで作ったサイトを今風にリニューアルすることにして、ふさわしいGridを探してましたところ、Tabulatorにたどり着きました。
さすが、後発なだけあって Bootstrap、レスポンシブにもしっかり対応していて動作が軽快で気に入りました。
日本語の情報がまだ少ない気がしますが、公式サイトのサンプル、ドキュメントが詳しく丁寧でわかりやすいので助かります。
今までjQGridで行ってきたカスタマイズをTabulatorで行ってみたコード例などのんびり書いて行こうかと思います。

本家Home
テーマの配色が都バスの掲示板みたいです。

 

 

入門はこれらがわかりやすいです。

https://mmtomitomimm.blogspot.com/2018/12/tabulator.html
https://oopsoop.com/tabulator/
https://confrage.jp/tabulator%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%81%97%E3%81%9F%E3%82%89%E7%B0%A1%E5%8D%98%E3%81%ABweb%E3%82%A2%E3%83%97/

https://qiita.com/yamori813/items/d0c6971ca5154d8fc1bf

https://qiita.com/e21084/items/dcd7e190dc651127aa71

https://ascii.jp/elem/000/001/269/1269722/

tips集を公開して下さってる方がいてこれも分かりやすく役に立ちそうです。

Tabulator tips