SlickGrid 插件开发(4) ：页脚合计功能实现_slick.grid合计行-优快云博客

本文链接：https://blog.youkuaiyun.com/besley/article/details/9952215

本文介绍了如何在SlickGrid中实现页脚合计功能，通过插件技术进行数据求和统计，详细阐述了初始化方法、求和逻辑、页脚界面创建、调用示例和页面效果，提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在数据处理的Grid控件中，对某一列的数值需要求和统计；业务人员或者财务人员对数据求和比较看重，在SlickGrid的功能实现中，页脚统计作为插件技术来实现。特意对实现过程做以总结说明：

1. 初始化方法

        function init() {
            grid.onScroll.subscribe(function (e, args) {
                if (null !== $footerScroller) {
                    $footerScroller.scrollLeft(args.scrollLeft);
                }
            });
            grid.onColumnsResized.subscribe(function (e, args) {
                var column = args.column;
                var width = args.width-9;
                var footerId = grid.getGridId() + columns[column].id + "_summary";

                $("#" + footerId).css("width",width);
            });
            dataview.onPagingInfoChanged.subscribe(handleDataChanged);
            dataview.onRowsChanged.subscribe(function (e, args) {
                grid.invalidateRows(args.rows);
                grid.render();
                handleDataChanged(e, args);
            });
            columns = grid.getColumns();
        }

主要实现了，1) grid水平滚动条和页脚统计框的同步；2) 拖动标题列宽度后的同步变化；3) DataView 事件订阅。

2. 数据求和

 function constructSummaries() {
            columnSummaries = {};

            for (var i = 0, len = items.length; i < len; i++) {
                var row = items[i];

                for (var k = 0, lenK = columns.length; k < lenK; k++) {
                    var m = columns[k];
                    var value = row[m.field];

                    if (m.footerSummary && m.footerSummary == true) {
                        if (!isNaN(value)) {
                            if (!columnSummaries[m.id]) {
                                columnSummaries[m.id] = 0;
                            }
                            columnSummaries[m.id] += value;
                        }
                    }
                }
            }
        }

对列数组元素进行合计求值。

3. 页脚界面元素