CookBook

imuiListTableで行の背景色を動的に変更する方法

投稿日:

このCookBookでは、imuiListTableで行の背景色を動的に変更する方法について紹介しています。

imuiListTableについての詳細はAPIドキュメントを参照してください。

完成イメージ

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

e builder プロジェクト : im_cookbook_113290_listtable_backcolor.zip
imm ファイル : cookbook_113290-1.0.0.imm

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/cookbook/113290/list
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. onGridComplete属性を付与したimuiListTableタグを作成してください。
  2. データ取得用のファイルを用意してください。
  3. セルの値を取得して、色分けを行うfuncitonを作成してください。

1. onGridComplete属性を付与したimuiListTableタグを作成してください。

以下のように プレゼンテーションページのimuiListTableにonGridComplete属性を定義してください。
onGridCompleteではグリッド読み込み完了時に実行するfunctionを定義することができます。

src/main/jssp/src/im_cookbook_113290/views/list.html

imuiListTableについての詳細はAPIドキュメントを参照してください。

2. データ取得用のファイルを用意してください。

以下のように、リストテーブルに表示するデータを取得するファイルを作成してください。

src/main/jssp/src/im_cookbook_113290/ajax/getList.js

3. セルの値を取得して、色分けを行うfuncitonを作成してください。

プレゼンテーションページに「1. onGridComplete属性を付与したimuiListTableタグを作成してください。」でonGridComplete属性に定義したgridCompleteを作成してください。
gridComplete内でセルの値を取得し色分けを行います。

ここでは、「2. サーバサイドのデータ取得用のファイルを用意してください。」で取得したデータのstatusCodeによって色分けしています。

セルの背景色の変更はjqGridのsetCellを用いることで実現できます。
setCellの第一引数には列のidを指定してください。列のidはcolタグのkey属性にtrueを指定した値になります。
第二引数にはセット対象のセル名を指定してください。
第三引数には変更するセルの値を入れます。空文字を渡すとセルの値は変更されません。
第四引数にセルに適用するスタイルを指定してください。今回は背景色を指定してください。

以上でimuiListTable表示時にセルの値によって列ごとに背景色を変えることができました。

im_cookbook_113290_01

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

IM-BloomMaker Chrome 拡張機能のデバッグツールの使い方

この CookBook では、2022 Winter でリリースされた Chrome 拡張機能であるデバッグツールの使い方を、実際に不具合のあるコンテンツをデバッグしていきながらご紹介いたします。 レ …

no image

PostgreSQL の Docker を作成する。

この CookBook では、PostgreSQL 検証用の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 PostgreSQL の Docker イメージを作成しま …

スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法

このクックブックでは、スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法をご紹介します。 ポートレットは、スプレッドシートとIM-Workflow REST APIを利用して作成し …

IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する方法について紹介しています。 人事異動を重ねることで、未処理案件の中には …

IM-BloomMaker セルが結合されたテーブルの作成方法

このCookBookでは、セルが結合されたテーブルのような見た目を作成する方法をご紹介いたします。今回は簡単にセルの結合を実現するため、テーブル系のエレメントの代わりにコンテンツ種別「Bulma」の「 …