CookBook

imuiListTableで複数選択した行データを取得する方法

投稿日:

このCookBookでは、imuiListTableで複数選択した行データを取得する方法を紹介します。

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

完成イメージ

リストテーブルにユーザ名を表示し、選択したユーザ名に紐付くユーザコードを表示するサンプルです。


1. リストテーブルにユーザ名が表示されています。
2. 任意の行をクリックして選択状態にします。
3. selectをクリックします。
4. 選択したユーザのユーザコードがテキストボックス内に表示されます。

完成サンプル

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

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

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

レシピ

  1. imuiListTableタグを作成する
  2. imuiListTableに表示するデータを用意する
  3. 選択した行データを取得するfunctionを作成する

1. imuiListTableタグを作成する

imuiListTableタグを使用し、リストテーブルを作成します。

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

  • multiSelect属性
    リストテーブルの左端にチェックボックスを表示するための属性です。
    trueを指定してください。

  • key属性 (任意)
    取得するデータを特定するための属性です。
    データを取得したいカラムのcolタグにtrueを指定してください。
    今回のサンプルではユーザコードを取得するので、1番目のcolタグのkey属性にtrueを指定しています。

  • hidden属性 (任意)
    カラムを非表示にするための属性です。
    データを取得するカラムを画面に表示したくない場合はtrueを指定してください。

2. imuiListTableに表示するデータを用意する

imuiListTableタグのdata属性に指定するデータを定義します。

src/main/jssp/src/im_cookbook_110550_listtable_multiselect/views/list.js

3. 選択した行データを取得するfunctionを作成する

今回は、selectをクリックした際に呼び出されるfunction selectUserCd()の中で行データを取得します。

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

リストテーブルに対してgetGridParam('selarrrow')を使用すると、行データの配列を取得できます。
selarrrowはjqGridのオプションです。
詳細は jqGrid Wiki を参照してください。

サンプルでは、動作確認のために取得した値をテキストボックスに表示しています。

-CookBook
-

執筆者:


comment

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

関連記事

no image

画面UI部品(imuiValidate)のバリデーションメッセージを任意の場所に表示する方法

このCookBookでは、画面UI部品のバリデーションメッセージを任意の場所に表示する方法について紹介しています。 intra-mart Accel Platform では、画面上に配置したUI部品の …

no image

IM-FormaDesignerで複数のセレクトボックスを連動させて利用する方法

このCookbookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。 この方法は、IM-FormaDesignerのみ導入環境での方法です。 IM-B …

no image

IMBox に投稿種別を追加する方法(textile)

このCookBookでは、IMBoxに投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミングガ …

no image

Formaの実行画面でセッションを維持するには

このCookbookでは、IM-FormaDesignerの実行画面でセッションを維持する方法を記載します。 この方法を利用すると、通常は時間制限によりタイムアウトしてしまうログインセッションを、自動 …

特定フローの特定ノードで、処理中の案件に対し、任意の処理対象者を追加する方法

このCookBookでは、LogicDesignerを利用して、特定フローの特定ノードで、処理中の案件に対し、任意の処理対象者を追加する方法について紹介しています。 人事異動で担当者が追加となり、複数 …

まだデータがありません。

RSSRSSRSSRSS