【GeneXus Tips】GeneXusで複数選択可能なListBox
- 2015.12.01
- GeneXus JavaScript
お久しぶりですkudoです。
皆さんはGeneXusで複数のアイテムを選択させる場合にどのような画面を作成していますでしょうか?
Gridとチェックボックスを利用して選択させていないでしょうか?
自分はGridとチェックボックスを使って選択させています!
でも、WebにはListBoxという複数選択が可能なコントロールがあるではないですか
・・・
・・・・・・
・・・・・・・・・
GeneXusで作成できるListBoxって複数選択できないんですけどね
じゃぁ複数選択可能なListBoxを作っちゃいましょう
1 2 3 4 5 |
<select multiple> <option value="1">りんご</option> <option value="2">みかん</option> <option value="3">バナナ</option> </select> |
できましたw
でも、これだと選択した値をGeneXusで利用することができません。
ならどうするか・・・JSしかないでしょ!
今回は、他の項目と同じようにすぐ値を利用できるよう
ListBox(Selectタグ)のOnChangeを利用してGeneXus側で用意した変数に選択されたアイテムのValueを格納します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript"> function JSListSelect(){ var Values = ""; var ListBox = document.forms["MAINFORM"].elements["JSListBox"].options; for(var i = 0; i < ListBox.length; i++){ if(ListBox[i].selected){ Values += ListBox[i].value+","; } } document.all.item("%GxValues%").value=Values.substring(0,Values.length-1); } </script> ・ ・ ・ <select name="JSListBox" class="Attribute" size="5" onchange="JSListSelect()" multiple>' <option value="1">リンゴ</option> <option value="2">みかん</option> <option value="3">バナナ</option> </select> |
※%GxValue%にはGeneXusの変数のInternalNameを設定
GeneXusで記述すると以下のような形になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// JavaScriptを利用して、自作したリストボックスの値を文字列型の変数に格納する Form.HeaderRawHTML = '<script type="text/javascript">' + 'function JSListSelect(){' + 'var Values = "";' + 'var ListBox = document.forms["MAINFORM"].elements["JSListBox"].options;' + 'for(var i = 0; i < ListBox.length; i++){' + 'if(ListBox[i].selected){' + 'Values += ListBox[i].value+",";' + '}' + '}' + 'document.all.item("' + &GxValues.InternalName + '").value=Values.substring(0,Values.length-1);' + '}' + '</script>' // リストボックスに表示するデータを取得 &List = DP_List() // WebFormに配置したTextBlockに直接HTMLを記述 TB_ListBox.Caption = '<select name="JSListBox" class="Attribute" size="5" onchange="JSListSelect()" multiple>' For &Item In &List TB_ListBox.Caption += '<option value="' + &Item.CD + '">' + &Item.Name + '</option>' EndFor TB_ListBox.Caption += '</select>' |
※値を利用する場合は、Splitなどを利用て値をCharcter型コレクションに変換して利用してください。
このようなJSを追加するだけで、GeneXusの変数に、選択したアイテムのValueがカンマ区切りで格納されます。
面倒なのでコードの説明は端折りますが、簡単に言うと
ListBoxの値が変わったら、Select内のOptionをチェックして、選択されているアイテムのValueを変数に足しこむ。
ということです。
似たようなことはチェックボックスやラジオボタンでも実装できるので
GeneXusのコントロールに嫌気がさしたら、どうぞお試しあれ
※IsValidとの競合があるかもしれません。
※使用する場合は自己責任でお願いします。
-
前の記事
勉強会に参加してJava APIの訴訟について話をしました 2015.11.29
-
次の記事
Microsoft AzureにGeneXusのプロジェクトをデプロイするまで 2015.12.02