サポート > Wagby Developer Network > 見栄えのカスタマイズ > ボディ部のカスタマイズ（一覧表示）

変更してはいけない部分

一覧表示画面を実現する JSP ファイル内には、ところどころに「DO NOT REMOVE THIS CODE」と表記された部分があります。 ここで囲まれたコードは削除できません。

...

<!-- DO NOT REMOVE THIS CODE : BEGIN -->

  <c:forEach var="item" varStatus="__position"

         items="${staff_lp.item}">

    <!-- DO NOT REMOVE THIS CODE : END -->

      <!-- DO NOT REMOVE THIS CODE : BEGIN -->

      <c:if test="${__position.first}">

        <!-- DO NOT REMOVE THIS CODE : END -->

        <tr>

          <th class="table_title" colspan="7">

            <fmt:message key="__jfc_common.link.navigation.ShowList"/>

          </th>

        </tr>

        ...

カスタマイズの例

ここでは、テンプレートHTML である showListStaffLp_template.html を変更した例を示します。 いくつかの td 要素に対して「width="300"」を指定してみました。

...

<table class="display_table" cellspacing="1">

  <!-- 一覧表示の項目名を表示する部分です -->

  <!-- 以下は自動生成されたコードをそのまま使います -->

  <!-- DO NOT REMOVE THIS CODE : BEGIN -->

  <c:forEach var="item" varStatus="__position" items="${staff_lp.item}">

    <!-- DO NOT REMOVE THIS CODE : END -->

      <!-- DO NOT REMOVE THIS CODE : BEGIN -->

      <c:if test="${__position.first}">

        <!-- DO NOT REMOVE THIS CODE : END -->

        <tr>

          <th class="table_title" colspan="7">

            <fmt:message key="__jfc_common.link.navigation.ShowList"/>

          </th>

        </tr>

       <!-- ここまで -->

        <tr>

          <th class="display_label">

        </th>

        <th class="display_label">

          ${staff_lp.userid.label} <-- 置換されます -->

        </th>

        <th class="display_label">

          ${staff_lp_name.label} <-- 置換されます -->

        </th>

        <th class="display_label">

          ${staff_lp.photo.label} <-- 置換されます -->

        </th>

        <th class="display_label">

          ${staff_lp.deptid.label} <-- 置換されます -->

        </th>

        <th class="display_label">

          ${staff_lp.titleid.label} <-- 置換されます -->

        </th>

        <th class="display_label">

          ${staff_lp.enterdate.label} <-- 置換されます -->

        </th>

      </tr>

      <!-- 一覧表示の項目名表示終了 -->

      <!-- 行毎の色の変更。__class 変数に値をセットします -->

      <!-- 以下は自動生成されたコードをそのまま使います -->

      <!-- DO NOT REMOVE THIS CODE : BEGIN -->

    </c:if>

    <!-- DO NOT REMOVE THIS CODE : END -->

    <c:choose>

      <c:when test="${__position.index % 2 == 0}">

        <c:set var="__class" value="display_field"/>

      </c:when>

      <c:otherwise>

        <c:set var="__class" value="display_field2"/>

      </c:otherwise>

    </c:choose>

    <!-- ここまで -->

    ...

    <!-- モデルの表示処理 -->

    <!-- 以下は自動生成されたコードをそのまま使います -->

    <c:choose>

      <c:when test="${__position.index % 2 == 0}">

        <c:set var="_onMouseOut"

          value="this.className='display_field'"/>

      </c:when>

      <c:otherwise>

        <c:set var="_onMouseOut"

          value="this.className='display_field2'"/>

      </c:otherwise>

    </c:choose>

    <tr class="${__class}" onMouseOut="${_onMouseOut}"

      onMouseOver="this.className='display_field_selected'"

      onClick="var tag=null; if (navigator.userAgent.indexOf(

        'MSIE') != -1) { tag=window.event.srcElement.tagName; }

        else { tag=event.target.tagName; } if (tag == 'INPUT' ||

        tag == 'A' || tag == 'IMG') { return true;}

        var f=document.forms['showListstaff_lp'];

        f.SENDACTION_name='action_Show:userid:<jfc:encodePrimaryKey

        key='${item.userid[0].content}'/>';f.submit();">

      <!-- ここまで -->

      <td align="left">

        ${staff_lp.showStaff.link} <-- 置換されます -->

      </td>

      <td align="left">

        ${staff_lp.userid} <-- 置換されます -->

      </td>

      <td align="left">

        ${staff_lp_name} <-- 置換されます -->

      </td>

      <td align="left">

        ${staff_lp.photo} <-- 置換されます -->

      </td>

      <td align="left" width="300">

        ${staff_lp.deptid} <-- 置換されます -->

      </td>

      <td align="left" width="300">

        ${staff_lp.titleid} <-- 置換されます -->

      </td>

      <td align="left" width="300">

        ${staff_lp.enterdate} <-- 置換されます -->

      </td>

    </tr>

    <!-- 以下は自動生成されたコードをそのまま使います -->

    <!-- DO NOT REMOVE THIS CODE : BEGIN -->

  </c:forEach>

  <!-- DO NOT REMOVE THIS CODE : END -->

</table>

<!-- ここまで -->

一つのデータを表示する場合、Wagby における標準の自動生成ではこれを（テーブルの）一行として扱いますが カスタマイズによって複雑な表示を行わせることもできるようになります。