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

このCookBookでは、imuiListTableで複数選択した行データを取得する方法を紹介します。 imuiListTableについての詳細はAPIドキュメントを参照してください。

• [imuiListTable]

完成イメージ

リストテーブルにユーザ名を表示し、選択したユーザ名に紐付くユーザコードを表示するサンプルです。 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

var $sampleData;

function init() { $sampleData = [ {"col1":"ueda", "col2":"ueda tatsuo"}, {"col1":"aoyagi", "col2":"aoyagi tatsumi"}, {"col1":"hayashi", "col2":"hayashi masayoshi"}, {"col1":"maruyama", "col2":"maruyama masuo"}, {"col1":"sekine", "col2":"sekine chika"} ]; }

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

今回は、selectをクリックした際に呼び出されるfunction selectUserCd()の中で行データを取得します。 src/main/jssp/src/im_cookbook_110550_listtable_multiselect/views/list.html