intra-mart Accel Kaiden! プログラミングガイド 第20版 2023-12-22

3.2.7. ListData

intra-mart Accel Kaiden!ではドロップダウンリストを作成するためのタグライブラリを用意しています。
本項では、タグライブラリ(ドロップダウンリスト <k:select>)を使用したプログラミング方法を解説します。

3.2.7.1. リストデータとは?

リストデータとは、ドロップダウンリストで使用する選択肢(<option>)となるデータを指します。
リストデータはJavaScriptで作成する方法や、タグライブラリ(リストデータ)で生成する方法などがあります。

3.2.7.2. リストデータの作成

リストデータは、KAIDEN.base.foundation.SelectListData.storeListを使用し、作成することができます。
  • プログラミング例
    第一引数がリストデータ名、第二引数はリストデータとなり、
    第一引数のリストデータ名は、HTMLページ全体で一意な名称で扱われます。
    // リストデータの作成
    jQuery(function($) {
      KAIDEN.base.foundation.SelectListData.storeList("listName"
       , [{key:"key1", value:"value1", deleteFlag:"false"}
       ,  {key:"key2", value:"value2", deleteFlag:"false"}
       ,  {key:"key3", value:"value3", deleteFlag:"true"}]);
    });
    

コラム

intra-mart Accel Kaiden!では、上記の様なプログラミング以外にもタグライブラリとしてリストデータを用意しています。
詳細は、タグライブラリ - リストデータを参照してください。

3.2.7.3. リストデータの動的変更

リストデータの動的な変更は、前項と同様に、KAIDEN.base.foundation.SelectListData.storeListを使用します。
  • プログラミング例
    第一引数のリストデータ名を同じ名前で再定義することで、
    関連づいている<select>すべての<option>値が新しく書き換わります。
    // リストデータの作成
    jQuery(function($) {
      KAIDEN.base.foundation.SelectListData.storeList("listName"
       , [{key:"key1", value:"値1", deleteFlag:"false"}
       ,  {key:"key2", value:"値2", deleteFlag:"false"}
       ,  {key:"key3", value:"値3", deleteFlag:"true"}]);
    });
    

コラム

リストデータが動的に変更された場合、選択済みのコードが変更後のリストデータにもあれば復元(選択状態)します。
選択済みのコードが変更後のリストデータになければ、valueが空文字の<option>が選択されるか、存在しなければselectedIndex = -1を設定します。

3.2.7.4. リストデータの動的変更(Ajax)

KAIDEN.base.foundation.SelectListData.storeListには、Ajax通信を利用しリストデータを動的に変更する仕組みが用意されています。
  • プログラミング例
    refreshList()を実行することで、追加条件({criteriaData:”2013/01/01”})を付与してAjax通信を行い、
    その戻り値に応じて<select>の<option>を変更します。
    // リストデータの作成
    jQuery(function($) {
      KAIDEN.base.foundation.SelectListData.storeList("listName"
       , [{key:"key1", value:"値1", deleteFlag:"false"}
       ,  {key:"key2", value:"値2", deleteFlag:"false"}
       ,  {key:"key3", value:"値3", deleteFlag:"true"}]
       , "ajaxURL"
       , {companyCd:"comp_sample_01"});
    });
    
    // リストデータのリフレッシュ
    KAIDEN.base.foundation.SelectListData.refreshList("listName", {criteriaData:"2013/01/01"});
    

コラム

Ajax通信の戻り値は、JSON形式のリストデータを返却するようにしてください。
storeList()を実行した時点でもURLを指定しますが、この時点ではAjax通信は行われません。

3.2.7.5. タグライブラリ

タグライブラリを使用してリストデータを作成可能です。
  • プログラミング例
    <%@ taglib prefix="k" uri="http://kaiden.slcs.co.jp/taglib/ui" %>
    <%@ taglib prefix="klist_labor" uri="http://kaiden.slcs.co.jp/taglib/v2/listdata/labormgr" %>
    
    <klist_labor:listDataWorkStatusCat name="workStatusCatData" blank="false" />
    <k:select name="workStatusCat" mode="0" dataName="workStatusCatData"/>
    

コラム

詳細は、タグライブラリ - リストデータを参照してください。

3.2.7.6. ドロップダウンリストとの連携

前項までで作成したリストデータを、ドロップダウンリスト <k:select>に連携させ、<option>を生成します。
  • プログラミング例
    <%-- ドロップダウンリストの作成 --%>
    <k:select name="list" mode="0" dataName="listName" />
    
  • HTML
    前項までで作成したリストデータを連携させた場合、次の様なHTMLを生成します。
    <select name="list">
      <option value="key1">value1</option>
      <option value="key2">value2</option>
    </select>
    

コラム

リストデータのdeleteFlagが”true”の場合は、<option>は生成されません。
ドロップダウンリスト <k:select>にincludeDisabled=”true”を設定すると、
deleteFlagが”true”のデータの<option>も生成します。

ドロップダウンリスト <k:select>にmode=”1”を設定した際に、
Accessorを使用してsetValue(“コード値”)すると、deleteFlagを無視してデータを表示します。