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

件数の表示

ここでは、「件数の表示」を行っている箇所について説明します。

...

<table width="100%">

  <tr align="center">

    <td class="display_resultcount">

      <c:choose>

        <c:when test="${__jfc_result.size > 0}">

          <fmt:message key="__jfc_common.search.status">

			<fmt:param value="${__jfc_result.size}"/>

			<fmt:param value="${__jfc_result.current}"/>

			<fmt:param value="${__jfc_result.next}"/>

		  </fmt:message>

        </c:when>

        <c:when test="${__jfc_result.size == 0}">

          <fmt:message key="__jfc_common.search.notfound"/>

        </c:when>

        <c:otherwise>

          <fmt:message key="__jfc_common.search.action"/>

        </c:otherwise>

      </c:choose>

    </td>

  </tr>

</table>

...

CSS クラス display_resultcount により表示部の見た目を規定しています。

${__jfc_result.size} 式は、検索結果の数を表現します。 <c:choose> タグおよび <c:when> タグにより、結果数に応じてメッセージを切り替えて表示しています。

また、<fmt:message> タグに指定されているメッセージは標準で次のようになっています。

__jfc_common.search.notfound=一件も見つかりません。

__jfc_common.search.action=検索条件を入力してください。

__jfc_common.search.again=検索条件の再編集

__jfc_common.search.count=検索条件に合致したデータは{0}件見つかりました。

__jfc_common.search.status={0}件中、{1}件目から{2}件目を表示しています。

__jfc_common.search.run=検索の実行

__jfc_common.search.clearcondition=検索条件のクリア

これは $(DEVHOME)￥env￥template￥jfcapp_ja.properties.Shift_JIS に含まれています。 このメッセージを修正する場合は、画面に表示されるメッセージの変更をお読みください。

検索条件

次に、検索条件項目の表示を行っている箇所を説明します。

...

<form name="conditionStaffCp"

  action="showListStaff.do" method="post"

    onSubmit="return doSubmit(this);">

  <input type="hidden" name="SENDACTION"/>

  <input type="hidden" name="sessionId"

    value="<jfc:MD5Hash/>"/>

  <c:import url="conditionStaffCp.jsp"/>

</form>

...

ここでは <form> タグを用意しています。 実際の検索項目表示は、conditionStaffCp.jsp に委譲しています。

表示データの切り替え

「次へ」「前へ」といった画面移動を行うボタンを表示する箇所を説明します。

...

<form name="showListstaff_lp"

  action="showListStaff.do" method="post"

    onSubmit="buttonOff(); return true;">

  <input type="hidden" name="SENDACTION"/>

  <input type="hidden" name="sessionId"

    value="<jfc:MD5Hash/>"/>

  <c:if test="${__jfc_result.size > 0}">

  <table cellspacing="0" cellpadding="0" border="0">

    <tr align="center">

      <td>

        <c:if test="${__jfc_result.prevPage == true}">

          <input type="submit" name="btnFirst"

            value="<fmt:message

            key="__jfc_common.link.navigation.first"/>"

            onClick="SENDACTION_name='action_First'"/>

          <input type="submit" name="btnPrev"

            value="<fmt:message

            key="__jfc_common.displaycalendar.prev"/>"

            onClick="SENDACTION_name='action_Prev'"/>

        </c:if>

      </td>

      <td></td>

      <td>

        <c:if test="${__jfc_result.nextPage == true}">

          <input type="submit" name="btnNext"

            value="<fmt:message

            key="__jfc_common.displaycalendar.next"/>"

            onClick="SENDACTION_name='action_Next'"/>

          <input type="submit" name="btnLast"

            value="<fmt:message

            key="__jfc_common.link.navigation.last"/>"

            onClick="SENDACTION_name='action_Last'"/>

        </c:if>

      </td>

    </tr>

  </table>

  </c:if>

</form>

...

${__jfc_result.prevPage} や ${__jfc_result.nextPage} の値が true の場合、 移動のためのボタンを表示する仕組みとなっています。

データの表示

実際のデータ表示は、showListStaffLp.jsp というファイルに処理を委譲しています。 なお、一覧表示処理では、「モデル名 + "lp"」という表記が用いられます。

...

<c:import url="showListStaffLp.jsp"/>

...

一覧表示数の変更

showListStaff_body.jsp の最後は、一覧表示数の変更を指定するユーザインタフェース部を実現しています。

...

<div class="display_pagesize" align="center">

  <form name="changesize"

    action="showListStaff.do" method="post"

    onSubmit="buttonOff(); return true;">

    <input type="hidden" name="SENDACTION"/>

    <input type="hidden" name="sessionId"

      value="<jfc:MD5Hash/>"/>

    <label for="__jfc_size_per_page">

      <fmt:message key="__jfc_common.displaypagesize.defaultlabel"/>

      </label>

      <c:set var="cond" value="20,50,100"/>

      <c:set var="size" scope="request">

        <c:out value="${__jfc_size_per_page}" default="20"/>

      </c:set>

      <select name="__jfc_size_per_page"

        onChange="SENDACTION_name='action_SizePerPage';

        this.form.submit();">

      <c:forEach var="c" items="${cond}">

        <c:choose>

          <c:when test="${c == size}">

            <c:set var="selected" value="selected"/>

          </c:when>

          <c:otherwise>

            <c:set var="selected" value=""/>

          </c:otherwise>

        </c:choose>

        <option value="${c}" ${selected}>${c}</option>

      </c:forEach>

      </select>

      <input type="submit" name="btnSizePerPage"

        value="<fmt:message key="

          __jfc_common.displaypagesize.changebuttonlabel"/>"

        onClick="SENDACTION_name='action_SizePerPage'"/>

    </form>

  </div>

...

CSS クラス display_pagesize により表示部の見た目を規定しています。

${__jfc_size_per_page} には画面に表示する最大数が設定されています。