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

 

 

 

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

コメントを残す