jQuery EasyUI DataGrid -Crear resumen de pie de página

En este tutorial, le mostraremos cómo mostrar una fila de información de resumen en el pie de página de la cuadrícula de datos (datagrid).

Para mostrar la fila de pie de página, debe establecer la propiedad showFooter en true y luego preparar las filas de pie de página definidas en los datos de la cuadrícula de datos (datagrid). A continuación se muestran los datos de ejemplo:

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

Crear la cuadrícula de datos (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>

Las filas de pie de página son iguales que las filas de datos mostradas, por lo que puede mostrar más de un resumen en el pie de página.

Descargar el ejemplo de jQuery EasyUI

jeasyui-datagrid-datagrid17.zip