在 jQuery EasyUI 的 DataGrid 中，你可以通过自定义视图和底部区域来实现页脚摘要（Footer Summary）的功能。以下是一个简单的例子，演示如何在 DataGrid 中创建页脚摘要：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI 页脚摘要示例</title>
    <!-- 引入 jQuery 库 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 EasyUI 样式和脚本文件 -->
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <!-- 创建 EasyUI Datagrid -->
    <table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px"
           url="your_data_url"
           pagination="true"
           rownumbers="true"
           fitColumns="true"
           view="#summaryview">

        <thead>
            <tr>
                <!-- 列定义 -->
                <th field="name" width="100">名称</th>
                <th field="price" width="100" align="right">价格</th>
                <th field="quantity" width="100" align="right">数量</th>
            </tr>
        </thead>
    </table>

    <!-- JavaScript 部分 -->
    <script type="text/javascript">
        // JavaScript 代码

        // 自定义视图
        $.extend($.fn.datagrid.defaults.view, {
            renderFooter: function(target, container, frozen){
                // 在这里实现页脚摘要的底部区域渲染逻辑
                var opts = $.data(target, 'datagrid').options;
                var rows = $.data(target, 'datagrid').data.rows;

                var summaryData = {};
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    for (var field in row) {
                        if (field in summaryData) {
                            summaryData[field] += parseFloat(row[field]) || 0;
                        } else {
                            summaryData[field] = parseFloat(row[field]) || 0;
                        }
                    }
                }

                var table = [];
                table.push('<table cellspacing="0" cellpadding="0" border="0"><tbody>');
                table.push('<tr class="datagrid-row datagrid-footer-row">');
                for (var j = 0; j < opts.columns[0].length; j++) {
                    var col = opts.columns[0][j];
                    var value = summaryData[col.field];
                    table.push('<td>');
                    table.push('<div class="datagrid-cell datagrid-cell-master" style="width:' + col.width + 'px;">');
                    table.push(col.formatter ? col.formatter(value, summaryData) : value);
                    table.push('</div>');
                    table.push('</td>');
                }
                table.push('</tr>');
                table.push('</tbody></table>');
                $(container).html(table.join(''));
            }
        });
    </script>

</body>
</html>

在上述代码中，通过在创建 DataGrid 时设置 view 为 #summaryview，并通过 $.extend 方法扩展 $.fn.datagrid.defaults.view，实现了一个名为 renderFooter 的函数。这个函数用于在自定义视图中渲染底部区域，计算每列的摘要数据。

请确保替换 "your_data_url" 为实际数据源的 URL，并根据你的数据模型修改列的名称和数量。在这个例子中，我简单地对每列的数值求和，你可以根据实际需求修改为其他摘要计算方式。


转载请注明出处：http://www.pingtaimeng.com/article/detail/13121/jQuery EasyUI