3.2.8. FS2List¶
intra-mart Accel Kaiden!では2段ヘッダリストを作成するためのタグライブラリを用意しています。本項では、タグライブラリ(2段ヘッダリスト <k:fs2List>)を使用したプログラミング方法を解説します。
3.2.8.2. FS2Listのプログラミング¶
FS2Listは、タグライブラリの2段ヘッダリスト <k:fs2List>を使用します。2段ヘッダリスト <k:fs2List>は、Ajax通信でデータを取得した結果をHTMLに生成します。
3.2.8.2.1. JSP¶
プログラミング例(HTML)ajaxAccessUrlは一覧検索を行う際のURLを指定します。<k:fs2List id="fs2ListId" ajaxAccessUrl="fs2List/search"/> プログラミング例(JavaScript)ajaxAccessUrlは一覧検索を行う際のURLを指定します。// FS2List検索を実行 jQuery(function($) { var fs2List = KAIDEN.Fs2List("fs2ListId"); // 検索条件 var criteria = {"companyCd":companyCd}; fs2List.search(criteria); });コラム
JSP内に複数のFS2Listを生成することが可能です。注意
複数のFS2Listを生成する場合、idは画面内で一意となるように指定してください。
3.2.8.2.2. XML¶
FS2Listは、2段ヘッダリストの設定はxmlファイルにて実装します。各設定値については2段ヘッダリスト <k:fs2List>を参照してください。表示項目はテナント全体の設定、および会社個別の設定を行うことができます。
プログラミング例(XML)<defaultSetting> <limit>20</limit> <rownumberSurfaceKey></rownumberSurfaceKey> <useSelectedMark>true</useSelectedMark> <useRownumber>true</useRownumber> <colsHeight>32px</colsHeight> <fs2ListScrollHeight>350px</fs2ListScrollHeight> <!-- 検索画面の固定列カラム設定 --> <fixedCols> <fixedCol> <fieldKey>fixedColumn</fieldKey> <width>100px</width> <align></align> <headerSurfaceKey></headerSurfaceKey> <colPosition></colPosition> <colspan></colspan> <rowspan>2</rowspan> <sortable>false</sortable> </fixedCol> </fixedCols> <!-- 検索画面の可変列カラム設定 --> <variableCols> <variableCol> <fieldKey>variableColumn</fieldKey> <width>100px</width> <align></align> <headerSurfaceKey></headerSurfaceKey> <colPosition></colPosition> <colspan></colspan> <rowspan>2</rowspan> <sortable>false</sortable> </variableCol> </variableCols> <orders> <order> <fieldKey>A</fieldKey> <type>asc</type> </order> </orders> </defaultSetting> <!-- 会社毎の設定 --> <companySetting> <companyCd>%会社Aのコード値%</companyCd> <settings> %会社Aの設定% </settings> </companySetting>
3.2.8.2.3. Java¶
FS2Listを生成するには、Form、Dto、Controllerクラスを作成します。FS2Listを生成するFormクラスを作成します。FS2ListのFormクラスを実装する場合、jp.co.slcs.kaiden.v2.base.foundation.fs2.AbstractFs2ListForm を継承します。
プログラミング例(Form)package jp.co.slcs.kaiden.v2.base.feature.form.kaiden; import jp.co.slcs.kaiden.v2.base.foundation.fs2.AbstractFs2ListForm; /** * FS2ListのFormクラスです。 */ public class Fs2ListForm extends AbstractFs2ListForm { // 実装なし }FS2Listを生成するDtoクラスを作成します。FS2ListのDtoクラスを実装する場合、jp.co.slcs.kaiden.v2.base.foundation.fs2.AbstractFs2ListDto を継承します。
プログラミング例(Dto)package jp.co.slcs.kaiden.v2.base.feature.dto.kaiden; import jp.co.slcs.kaiden.v2.base.foundation.fs2.AbstractFs2ListDto; /** * FS2ListのDTOクラスです。 */ public class Fs2ListDto extends AbstractFs2ListDto { // 実装なし }FS2Listを生成するControllerクラスを作成します。FS2ListのControllerクラスを実装する場合、jp.co.slcs.kaiden.v2.base.foundation.fs2.AbstractFs2ListController を継承します。
プログラミング例(Controller)package jp.co.slcs.kaiden.v2.base.feature.action.kaiden; import java.util.HashMap; import java.util.Map; import org.springframework.beans.factory.config.ConfigurableBeanFactory; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import jp.co.slcs.kaiden.v2.base.feature.dto.kaiden.Fs2ListDto; import jp.co.slcs.kaiden.v2.base.feature.form.kaiden.Fs2ListForm; import jp.co.slcs.kaiden.v2.base.foundation.exception.KaidenSystemException; import jp.co.slcs.kaiden.v2.base.foundation.fs2.AbstractFs2ListController; import jp.co.slcs.kaiden.v2.base.foundation.fs2.AbstractFs2ListDto; import jp.co.slcs.kaiden.v2.base.foundation.fs2.AbstractFs2ListForm; /** * FS2ListのControllerクラスです。 */ @Controller @Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE) @RequestMapping("kaiden/v2/labor/dailyApprove") public class Fs2ListController extends AbstractFs2ListController { /** Form. **/ public Fs2ListForm fs2ListForm; /** Dto. **/ public Fs2ListDto fs2ListDto; /** * 一覧検索結果ページの返却. * * @return 一覧検索結果ページ * @throws KaidenSystemException システムエラー */ @RequestMapping(value = "search") public String search(HttpServletRequest request, HttpServletResponse response, Fs2ListForm form, Model model) throws KaidenSystemException { setForm(form); super.index(request, response, fs2ListForm, model); } /** * 検索結果をサブクラスから返却. * * @return 検索結果 * @throws KaidenSystemException システムエラー */ @Override protected Map<String, Object> getSearchResultData() throws KaidenSystemException { Map<String, Object> criteria = new HashMap<String, Object>(); criteria.put("key01", "value01"); criteria.put("key02", "value02"); return criteria; } /** * Formのインスタンスを返却. * * @return 対象検索用Form */ @Override protected AbstractFs2ListForm getForm() { return fs2ListForm; } /** * DTOのインスタンスを返却. * * @return 対象検索用DTO */ @Override protected AbstractFs2ListDto getDto() { return fs2ListDto; } /** * Formを設定. * * @param form Form */ protected void setForm(Fs2ListForm form) { fs2ListForm = form; } }
3.2.8.3. FS2Listの関連API¶
本項では、FS2Listの操作やデータの設定・取得の方法を紹介します。各APIの詳細は『intra-mart Accel Kaiden! JsDoc』を参照してください。
3.2.8.3.1. FS2Listのデータ取得¶
FS2Listのデータを取得する場合には、次のAPIを使用してください。
getRowData(rowNumber)特定のタプルのデータをjavascriptオブジェクトの形式で返却 countAll()検索した結果の全件数を返却 pageCount()検索した結果のページ数を返却 numberOfPage()検索した結果の表示中のページ番号を返却 countDisplay()検索した結果の表示中の件数を返却
3.2.8.3.2. FS2Listのイベント処理¶
FS2Listのイベント処理は次の様に実装してください。
1行追加直後// FS2Listの取り出し var fs2List = KAIDEN.Fs2List("fs2ListId"); // 1行追加直後イベント fs2List.postRowEachEvent(function(event, rowNumber, fs2ListAccessor, rowData) { //引数:event :イベントオブジェクト //引数:rowNumber :挿入起点となる行番号 //引数:fs2ListAccessor:当該FS2ListへのAccessor //引数:rowdata :行番号に設定された値 }); 全一覧データ表示直後// FS2Listの取り出し var fs2List = KAIDEN.Fs2List("fs2ListId"); // 全一覧データ表示直後イベント fs2List.displayFs2ListSuccessEvent(function(event, fs2ListAccessor) { //引数:event :イベントオブジェクト //引数:fs2ListAccessor:当該FS2ListへのAccessor });