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

intra-martを初めて使う開発者が、まずは e Builder で「Hello world!」する方法

e Builder は、intra-mart Accel Platform で動作するアプリケーションを開発するための開発支援ツールです。 このレッスンでは、intra-martを初めて使う開発者が …

no image

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(テーブルアイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、テーブルアイテムからテーブルアイテムへ値を渡す方法について紹介します。 今回は例として、グリッドテーブルを利用し …

スプレッドシートのバインディングデータを別途テーブルに出力する方法

スプレッドシートのJsonデータとバインディングデータは、Formaヘッダーテーブルにバイナリカラムで格納されます。 Formaヘッダーテーブルに格納されたスプレッドシートデータは、登録データ情報管理 …

no image

intra-mart WebPlatform をサイレントインストールする方法

この CookBook では、intra-mart WebPlatform をサイレントインストールする方法について紹介しています。 インストーラのサイレント・モードについては以下のセットアップに記載 …

no image

EWS2017 「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」講演内容のご紹介

この記事では、EWS2017 Technology Track「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」での講演内容 …

RSSRSSRSSRSS