dataforms.jar API解説――HtmlTableクラス

PageScrollHtmlTableクラスの解説

　dataforms.jarでは、検索結果一覧の表示をするためのテーブルとして、HtmlTableクラスから派生したPageScrollHtmlTableクラスを用意しています。このクラスもHtmlTableと使い方は同じで、複数のフィールドを配置したインスタンスをフォームに配置して使用します。OSSフレームワーク「dataforms.jar」でサンプルプログラムを構築する（1）～（3）で作成した検索結果を表示するフォームクラス（ArticleQueryResultForm.java）は以下の通りになっています。

ArticleQueryResultForm.java

  ・・・　前略　・・・
  /**
   * コンストラクタ。
   */
  public ArticleQueryResultForm() {
    ArticleTable table = new ArticleTable();
    this.addPkFieldList(table.getPkFieldList());
    PageScrollHtmlTable htmltable = new PageScrollHtmlTable(Page.ID_QUERY_RESULT, ArticleDao.getQueryResultFieldList());
    
    htmltable.getFieldList().get(ArticleTableQuery.ID_THREAD_NAME).setSortable(true);
    htmltable.getFieldList().get(ArticleTable.Entity.ID_TITLE).setSortable(true);
    htmltable.getFieldList().get(ArticleTable.Entity.ID_AUTHER).setSortable(true);
//    htmltable.getFieldList().get(ArticleTable.Entity.ID_CONTENTS).setSortable(true);
    htmltable.getFieldList().get(ArticleDao.FileCountQuery.ID_FILE_COUNT).setSortable(true);
    TimestampField ct = (TimestampField) htmltable.getFieldList().get(ArticleTable.Entity.ID_CREATE_TIMESTAMP);
    ct.setDateFormat("format.timestampfield");
    ct.setSortable(true, SortOrder.DESC);
      
    this.addHtmlTable(htmltable);
  }
  ・・・　後略　・・・
  

　このフォームに対応するHTMLは以下の通りで、HtmlTableと同じような<table></table>タグになっています。

ArticleQueryResultForm.html

    ・・・　前略　・・・
    <form id="queryResultForm">
      <div class="formHeader">検索結果</div>
      <input type="hidden" id="articleId" />
      <table class="responsive">
        <tbody>
        </tbody>
      </table>
      <div class="hScrollDiv">
        <table id="queryResult">
          <thead>
            <tr>
              <th>
                No.
              </th>
              <th>
                スレッド
              </th>
              <th>
                記事タイトル
              </th>
              <th>
                著者
              </th>
              <th>
                ファイル数
              </th>
              <th>
                登録日時
              </th>
              <th>
                操作
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <span id="queryResult[0].rowNo"></span>
                <input type="hidden" id="queryResult[0].articleId" />
                <input type="hidden" id="queryResult[0].threadId" />
                <input type="hidden" id="queryResult[0].createUserId" />
                <!--  
                <input type="hidden" id="queryResult[0].createTimestamp" />
                -->
                <input type="hidden" id="queryResult[0].updateUserId" />
                <input type="hidden" id="queryResult[0].updateTimestamp" />
              </td>
              <td>
                <span id="queryResult[0].threadName"></span>
              </td>
              <td>
                <a id="queryResult[0].updateButton" href="javascript:void(0);"><span id="queryResult[0].title"></span></a>
              </td>
              <td>
                <span id="queryResult[0].auther"></span>
              </td>
              <td>
                <span id="queryResult[0].fileCount"></span>
              </td>
              <td>
                <span id="queryResult[0].createTimestamp"></span>
              </td>
              <td>
                <input type="button" id="queryResult[0].viewButton" value="表示">
                <!--  
                <input type="button" id="queryResult[0].referButton" value="参照登録">
                -->
                <input type="button" id="queryResult[0].deleteButton" value="削除">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </form>
    ・・・　後略　・・・

　このフォームに検索結果を表示すると、HTMLにはない［該当件数］［表示行数］ページスクロールボタンが表示され、それぞれのイベントハンドラーが自動的に設定された状態になります。

記事一覧

　こうしたページスクロールの制御用のタグはdataforms.jar中のPageController_ja.htmlに定義されており、PageScrollHtmlTable.jsの初期化処理で、この内容を対応するテーブルの前に展開するようになっています。

PageController_ja.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
  </head>
  <body>
    <div>
      該当件数:<span id="hitCount"></span> 
      表示行数:
      <select id="linesPerPage">
        <option value="10" selected>10</option>
        <option value="30">30</option>
        <option value="50">50</option>
      </select><br/>
      <input type="button" id="topPageButton" value="<<"/>
      <input type="button" id="prevPageButton" value="<"/>
      ページNo:<select id="pageNo"></select> 
      <input type="button" id="nextPageButton" value=">"/>
      <input type="button" id="bottomPageButton" value=">>"/>
    </div>
  </body>
</html>

　このデザインを変更したい場合、Webリソースエクスポートを利用してPageController.htmlをプロジェクトにエクスポートしてください。

PageController.htmlのエクスポート