ViewCreator と imuiListTable を使った一覧画面の作り方

{
  "columns": [
    {
      "code": "ccd00001",
      "name": "year",
      "caption": "年度",
      "type": "NUMBER"
    },
    {
      "code": "ccd00002",
      "name": "name",
      "caption": "地域名",
      "type": "STRING"
    },
    {
      "code": "ccd00003",
      "name": "name",
      "caption": "都道府県名",
      "type": "STRING"
    },
    {
      "code": "ccd00004",
      "name": "age",
      "caption": "年齢",
      "type": "STRING"
    },
    {
      "code": "ccd00005",
      "name": "area",
      "caption": "面積",
      "type": "NUMBER"
    },
    {
      "code": "ccd00006",
      "name": "population",
      "caption": "人口",
      "type": "NUMBER"
    }
  ],
  "conditions": [
    {
      "key": "prefecture_name",
      "type": "STRING"
    }
  ]
}

function init(req) {

}

<div class="imui-form-container">
  <!-- 検索条件 -->
  <div class="imui-box-operation cf">
    都道府県名：<imart type="imuiTextbox" id="search-prefecture-name" oninput="inputChange()"></imart>
  </div>
  <!-- リストテーブル本体 -->
  <imart id="cookbook_240482" type="imuiListTable" process="csjs" target="csjs_cookbook_240482_Sample" width="100%" height="200" viewRecords="true">
    <pager rowNum="50" />
    <cols>
      <!-- name にはルーティング定義に紐づけられたクエリ定義に追加されているカラムの「カラム名」か「カラムコード」を指定します。 -->
      <col name="year" caption="Year" />
      <col name="name" caption="Region" />
      <col name="ccd00003" caption="Prefecture" />
      <col name="age" caption="Age" />
      <col name="area" caption="Area" />
      <col name="population" caption="Population" />
    </cols>
  </imart>
</div>
<script type="text/javascript">
  /**
   * 検索条件が入力された時に呼ぶfunction
   */
  function inputChange() {
    debounce(300, () => {
      // jqGrid を再描画します
      $("#cookbook_240482").trigger("reloadGrid",[{page:1}]);
    });
  }

  let intervalID;
  function debounce(timer, func) {
    clearTimeout(intervalID)
    intervalID = setTimeout(() => {
      func.apply();
    }, timer);
  }

  /**
   * データ取得用のfunction（imuiListTable の target属性に指定します）
   */
  function csjs_cookbook_240482_Sample(request, response) {

    // クエリのルーティング定義で設定した「ルーティングURL」を指定します。
    const baseUrl = document.querySelector('base').href;
    const queryRoute = baseUrl + 'cookbook_240482/japan_data';
    const queryParams = new URLSearchParams(
      {
        // レコード取得開始位置
        offset : (request.page - 1) * request.rowNum + 1,
        // 最大取得レコード数（一覧に表示するレコード数）
        limit : request.rowNum,
        // ソートキー
        sort : request.sortIndex,
        // ソート方向(desc/asc)
        order : request.sortOrder,

        // 検索条件(prefecture_name)
        // クエリ定義の抽出条件で <%REQUEST_PARAMETER(prefecture_name)%> を部分一致で設定しておきます
        prefecture_name : document.getElementById('search-prefecture-name').value
      }
    );

    // REST APIを呼び出して結果を response に渡します
    (async () => {
      const data = await fetch(queryRoute + '?' + queryParams);
      const json = await data.json();
      response({
        // ページ番号
        page: request.page,
        // レコード総数
        total: json.totalCount,
        // レコードデータ配列
        data: json.data
      });
    })();
  }
</script>

  <!-- 検索条件 -->
  <div class="imui-box-operation cf">
    都道府県名：<imart type="imuiTextbox" id="search-prefecture-name" oninput="inputChange()"></imart>
  </div>

  function inputChange() {
    debounce(300, () => {
      // jqGrid を再描画します
      $("#cookbook_240482").trigger("reloadGrid",[{page:1}]);
    });
  }

  <!-- リストテーブル本体 -->
  <imart id="cookbook_240482" type="imuiListTable" process="csjs" target="csjs_cookbook_240482_Sample" width="100%" height="200" viewRecords="true">
    <pager rowNum="50" />
    <cols>
      <!-- name にはルーティング定義に紐づけられたクエリ定義に追加されているカラムの「カラム名」か「カラムコード」を指定します。 -->
      <col name="year" caption="Year" />
      <col name="name" caption="Region" />
      <col name="ccd00003" caption="Prefecture" />
      <col name="age" caption="Age" />
      <col name="area" caption="Area" />
      <col name="population" caption="Population" />
    </cols>
  </imart>

  /**
   * データ取得用のfunction（imuiListTable の target属性に指定します）
   */
  function csjs_cookbook_240482_Sample(request, response) {

    // クエリのルーティング定義で設定した「ルーティングURL」を指定します。
    const baseUrl = document.querySelector('base').href;
    const queryRoute = baseUrl + 'cookbook_240482/japan_data';
    const queryParams = new URLSearchParams(
      {
        // レコード取得開始位置
        offset : (request.page - 1) * request.rowNum + 1,
        // 最大取得レコード数（一覧に表示するレコード数）
        limit : request.rowNum,
        // ソートキー
        sort : request.sortIndex,
        // ソート方向(desc/asc)
        order : request.sortOrder,

        // 検索条件(prefecture_name)
        // クエリ定義の抽出条件で <%REQUEST_PARAMETER(prefecture_name)%> を部分一致で設定しておきます
        prefecture_name : document.getElementById('search-prefecture-name').value
      }
    );

    // REST APIを呼び出して結果を response に渡します
    (async () => {
      const data = await fetch(queryRoute + '?' + queryParams);
      const json = await data.json();
      response({
        // ページ番号
        page: request.page,
        // レコード総数
        total: json.totalCount,
        // レコードデータ配列
        data: json.data
      });
    })();
  }

<?xml version="1.0" encoding="UTF-8"?>
<routing-jssp-config xmlns="http://www.intra-mart.jp/router/routing-jssp-config"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsd ">

  <authz-default mapper="welcome-all" />
  <file-mapping path="/cookbook_240482/viewcreator/listtable" page="cookbook_240482/viewcreator/listtable"></file-mapping>

</routing-jssp-config>