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では、グリッドテーブルの「イメージ」から申請済みの案件の詳細画面を呼び出す方法を紹介します。 この方法を利用すると別の案件を参照しながら新しく申請を行うことができます。 BISで作 …

no image

ノード毎に入力モード(表示モード)変換を切り替える方法

このCookBookでは、BISワークフローにおいて、ノード毎に各アイテムの入力(表示)モードを切り替える方法を紹介します。 ノード毎に別画面を作成する方法もありますが、本稿ではアクション設定を利用し …

no image

Payara blog のご紹介

この CookBook では Payara のブログについて紹介したいと思います。 以下の URL で Payara に関する様々な記事が投稿されています。 https://blog.payara.f …

no image

eBuilderの起動時処理のパフォーマンス改善

このCookBookでは、ローカル環境でe Builderの起動を速くするための設定を行います。 そのために、特定の機能を外して速く起動させる設定の方法について説明します。 ただし本設定を行うことによ …

no image

No.8 Excel からの一括ユーザ一括登録

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、LogicDesignerを利用して、入社や組織変更等の発生時に有用なExcelファイルの …

RSSRSSRSSRSS