SlickGrid 插件开发(4) ：页脚合计功能实现

前言：在数据处理的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. 页脚界面元素

function constructSummaryFooterUI() {
            $container.empty();

            $footerScroller = $("
").appendTo($container);
            $footers = $("
").appendTo($footerScroller);


            $container.children().wrapAll("
");
            function onMouseEnter() {
                $(this).addClass("ui-state-hover");
            }

            function onMouseLeave() {
                $(this).removeClass("ui-state-hover");
            }

            $footers.find(".slick-footer-column")
                .each(function () {
                    var columnDef = $(this).data("column");
                });
            $footers.empty();

            $footers.find(".slick-footerrow-column")
                .each(function () {
                    var columnDef = $(this).data("column");
                });
            $footers.empty();

            var headerWidth = grid.getHeadersWidth();
            $footers.width(headerWidth);

            for (var i = 0; i < columns.length; i++) {
                var m = columns[i];
                var value = "";
                if (columnSummaries[m.id]) {
                    if (m.footerSummary && m.footerSummary == true) {
                        value = (Math.round(parseFloat(columnSummaries[m.id]) * 100) / 100);
                    }
                }

                var footer = $("
")
                    .html("" + value + "")
                    .width(m.width - grid.getHeaderColumnWidthDiff())
                    .attr("title", m.toolTip || "")
                    .data("column", m)
                    .addClass(m.headerCssClass || "")
                    .appendTo($footers);
            }
        }

构造页面显示的div等元素。

4. 调用示例

var dataViewProduct = new Slick.Data.DataView({ inlineFilters: true });

var gridProduct = new Slick.Grid("#myGridProduct", dataViewProduct, columnsProduct, optionsProduct);


//注册单元格选定范围插件
gridProduct.setSelectionModel(new Slick.Cell.SelectionModel({ "columns": gridProduct.getVisibleColumns(), "data": dsProduct }));

//页脚统计
var summaryfooter = new Slick.Controls.FooterSummary(dataViewProduct, gridProduct, $("#myFooterProduct"));

//行改变
dataViewProduct.onRowsChanged.subscribe(function (e, args) {
    gridProduct.invalidateRows(args.rows);
    gridProduct.render();
});

//// wire up model events to drive the grid
dataViewProduct.onRowCountChanged.subscribe(function (e, args) {
    gridProduct.updateRowCount();
    gridProduct.render();
});

//设置过滤器
var slickfilter = new Slick.Data.SlickFilter();
dataViewProduct.setFilter(slickfilter.filterParser);
dataViewProduct.setFilterArgs({});

dataViewProduct.beginUpdate();
dataViewProduct.setItems(dsProduct, "ID");
dataViewProduct.endUpdate();

目前代码顺序还是需要考虑的，尽量按照上文提供的顺序。

5. 页面效果图示

6. 完整代码

function FooterSummary(dataview, grid, $container) {
        var $status;
        var columnFilters = {};
        var columns, items, columnSummaries = {};

        function handleDataChanged(e, args) {
            var rows = [];
            for (var i = 0; i < dataview.getLength() ; i++) {
                rows.push(dataview.getItem(i));
            }

            items = rows;

            constructSummaries();
            constructSummaryFooterUI();
        }

        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();
        }

        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;
                        }
                    }
                }
            }
        }

        function constructSummaryFooterUI() {
            $container.empty();

            $footerScroller = $("
").appendTo($container);
            $footers = $("
").appendTo($footerScroller);


            $container.children().wrapAll("
");
            function onMouseEnter() {
                $(this).addClass("ui-state-hover");
            }

            function onMouseLeave() {
                $(this).removeClass("ui-state-hover");
            }

            $footers.find(".slick-footer-column")
                .each(function () {
                    var columnDef = $(this).data("column");
                });
            $footers.empty();

            $footers.find(".slick-footerrow-column")
                .each(function () {
                    var columnDef = $(this).data("column");
                });
            $footers.empty();

            var headerWidth = grid.getHeadersWidth();
            $footers.width(headerWidth);

            for (var i = 0; i < columns.length; i++) {
                var m = columns[i];
                var value = "";
                if (columnSummaries[m.id]) {
                    if (m.footerSummary && m.footerSummary == true) {
                        value = (Math.round(parseFloat(columnSummaries[m.id]) * 100) / 100);
                    }
                }

                var footer = $("
")
                    .html("" + value + "")
                    .width(m.width - grid.getHeaderColumnWidthDiff())
                    .attr("title", m.toolTip || "")
                    .data("column", m)
                    .addClass(m.headerCssClass || "")
                    .appendTo($footers);
            }
        }

        init();
    }

总结：

实现页脚统计功能的原始参考文档出处：http://vps.mattgraham.me/slickgrid/examples/example-plugin-summaryfooters.html