jQuery EasyUI データグリッド -フッターサマリーの作成

このチュートリアルでは、データグリッド（datagrid）のフッターにサマリー情報行を表示する方法を説明します。

フッター行を表示するには、showFooter プロパティを true に設定し、データグリッド（datagrid）データにフッター行を定義する必要があります。以下はサンプルデータです：

    {"total":1,"rows":[{"id":1,"name":"Chai","price":18.00}],"footer":[{"name":"Total","price":18.00}]}

データグリッド（DataGrid）の作成

    <table id="tt" title="DataGrid" class="easyui-datagrid" style="width:400px;height:250px"
            url="data/datagrid17_data.json"
            fitColumns="true" rownumbers="true" showFooter="true">
        <thead>
            <tr>
                <th field="name" width="80">Product Name</th>
                <th field="price" width="40" align="right">Unit Price</th>
            </tr>
        </thead>
    </table>

フッター行はデータ行の表示と同じ方法なので、フッターに複数のサマリー情報を表示できます。

jQuery EasyUI サンプルのダウンロード

jeasyui-datagrid-datagrid17.zip