※Ver5のサンプルはご用意していません。

TALONには複数のリストボックスに階層関係を持たせて、情報を絞込する「汎用階層絞り込み」機能があります。
当機能を応用して、絞り込み先の値を複数選択する事を実現するサンプルです。

検索条件は得意先コードと納入先コードをAND条件とし、
納入先コードが複数選択された場合はOR条件で複数納入先を取得しています。

＜使用方法＞
１．検索条件の得意先コードを選択します。
　　（表示が切り替わった納入コードリストボックスが複数選択可能になります）
　　　※標準では納入コードもリストボックスとして表示されますが、ClientSide JavaScriptで
　　　　複数選択可能なリストボックスに変えています。
２．納入コードを複数選択します。
　　 (コントロールボタンを押下しながら選択すると複数選択可能になります)
３．「検索」ボタンをクリックし、条件にマッチした検索結果が表示されることを確認します。


＜制約＞
　複数選択最大数を定める必要があります。（当サンプルでは３）

＜方式＞
　１．複数選択の対象となる子階層リストボックスに対してClient-sideJavaScriptにてエレメント属性をmultipleへ変更します。
　２．選択された値を格納しておく為のHIDDEN項目を用意します。※当サンプルでは３個（＝選択最大数）
　３．画面から選択された値をDB検索前JavaScriptエンジンにてHIDDEN項目へそれぞれ設定し、SELECT式のバインド値へ反映させます。
　　　この時、子階層リストボックスの値はクリアしておく必要があります。（条件の絞り込みを抑止を目的とします）
　４．検索結果が表示される際は、HIDDEN項目の値を子階層リストボックスのoption要素を選択状態にするようClient-sideJavaScriptにて実装します。

＜設定内容＞
　・ブロック設定＞SELECT式
　　-> 複数選択された納入コードをOR条件で検索されるようバインド定義を行うよう編集します。
　　-> 選択された値をバインド値として受け取る為のHIDDEN項目を定義しておきます。

　・ブロック設定＞項目情報
　　-> 得意先コードと納入先コードを検索項目とし、汎用階層の設定を行います。

　・設定画面＞アプリケーション＞Client-sideJavaScript
　　-> 納入先コードリストボックスを複数選択可能となるよう属性を変更します。
　　-> 得意先コードを変更した時に納入先コードの表示が切替わる際のイベントリスナーを追加し、納入コードを複数選択可能にします。
　　-> 納入先コードリストボックスに対して、HIDDEN項目値とマッチする要素を選択状態となるよう実装します。

　 　・検索前JavaScriptエンジン
　　-> 複数選択された納入コードの入力値を取得し、TALON.setSearchConditionData()にてHIDDEN項目らに対して検索条件となるようSELECT式へ渡します。
　　-> 納入先リストボックスの入力値は条件の絞り込みを抑止する為にクリアしておきます。



画面イメージ
・検索条件イメージ１


・検索条件イメージ２





関連マニュアル一覧