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

フォーム内の入力値を案件名に自動入力する方法

このCookbookでは、IM-FormaDesignerで作成した申請画面から入力内容を案件名に設定する方法を紹介します。 この方法を利用するとIM-FormaDesignerの入力内容をIM-Wo …

no image

IM-Workflowの一覧を業務別に使い分けるには

この記事では、”もっと効率的に” IM-Workflowを利用した業務ができるように、一覧画面に表示するフローや案件を絞り込んで表示するための手順をご紹介します。 「フローグループ」機能を利用し、一覧 …

IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法

このCookBookでは、IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法を紹介しています。 単票および表形式の帳票出力を行います。 完成イメージ …

no image

IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスク利用例

このCookBookでは、IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスクの利用例を紹介します。 IM-BISで作成したワークフローの案件終了処理で、画面項目 …

no image

後処理プログラムで画面アイテム「ファイルアップロード」にバリデーションを実行する方法

このCookbookでは、画面アイテム「ファイルアップロード」に添付されたファイルをバリデーションする方法を紹介します。 後処理プログラムを使用してバリデーションを実行することで、画面に表示するエラー …

RSSRSSRSSRSS