jEasyUI ツリー グリッドにページングが追加される

jEasyUI ツリーグリッドでのページネーション機能の実装方法

この記事では、jEasyUI のツリーグリッド (TreeGrid) にページネーション機能を追加する方法について詳しく解説します。大量のデータを効率的に処理し、表示することができます。

jEasyUI TreeGrid ページネーション実装手順

  1. 必要なファイルの読み込み:

    • プロジェクトに jQuery と jEasyUI の関連 CSS および JavaScript ファイルが正しく読み込まれていることを確認してください。

  2. TreeGrid の作成:

    • <table class="easyui-treegrid"></table> 要素を使用して、基本的な TreeGrid 構造を作成します。
    • url 属性を設定し、データを取得するサーバーサイドインターフェースを指定します。
    • treeField 属性を設定し、ツリー構造のフィールドとして使用する列を指定します。
    • pagination 属性を追加し、true に設定します: 
      
<table id="tt" class="easyui-treegrid" title="ページネーション付きTreeGrid"
        data-options="
            url: 'data/treegrid_data4.json',
            method: 'get',
            idField: 'id',
            treeField: 'name',
            pagination: true
        ">
</table>

  3. サーバーサイドデータの形式:

    • サーバーサイド API が jEasyUI TreeGrid 形式のデータを返すようにしてください。データには以下のフィールドを含める必要があります:
      • total: データの総数。
      • rows: 現在のページのデータリスト。

  4. ページネーションコントロールのスタイル調整 (オプション):

    • 必要に応じて、CSS を使用してページネーションコントロールのスタイルをカスタマイズできます。たとえば、位置や色を調整できます。

コード例:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI TreeGrid ページネーション</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
    <table id="tt" class="easyui-treegrid" title="ページネーション付きTreeGrid"
            data-options="
                url: 'data/treegrid_data4.json',
                method: 'get',
                idField: 'id',
                treeField: 'name',
                pagination: true
            ">
        <thead>
            <tr>
                <th data-options="field:'name',width:180">名前</th>
                <th data-options="field:'size',width:100,align:'right'">ファイルサイズ</th>
                <th data-options="field:'date',width:120">最終更新日</th>
            </tr>
        </thead>
    </table>
</body>
</html>

まとめ

上記の手順に従うことで、jEasyUI TreeGrid にページネーション機能を簡単に追加できます。ユーザーエクスペリエンスを向上させ、大量のデータを効率的に管理および表示できます。

関連文献

Q&A

質問 回答
ページネーションコントロールの位置を変更するにはどうすればよいですか？ CSS を使用して、ページネーションコントロールを含む要素のスタイルを変更できます。たとえば、.datagrid-pager クラスの要素をターゲットにできます。
ページごとに表示される行数を変更するにはどうすればよいですか？ pageSize オプションを使用して、ページごとに表示される行数を設定できます。たとえば、pageSize: 50 のように設定します。
ページネーションコントロールの見た目をカスタマイズするにはどうすればよいですか？ CSS を使用して、ページネーションコントロールのスタイルをカスタマイズできます。たとえば、背景色、フォントの色、境界線などを変更できます。