使用easyUI datagrid 合并相同连续列

“似此星辰非昨夜,为谁风露立中宵”
在使用表格的日常中,经常要用到合并单元格.这里来看看使用easyUI 的datagrid时怎么合并单元格.

//合并单元格
$.extend($.fn.datagrid.methods, {
    autoMergeCells: function(jq, fields) {
        return jq.each(function() {
            var target = $(this);
            if (!fields) {
                fields = target.datagrid("getColumnFields");
            }
            var rows = target.datagrid("getRows");
            var i = 0,
            j = 0,
            temp = {};
            for (i; i < rows.length; i++) {
                var row = rows[i];
                j = 0;
                for (j; j < fields.length; j++) {
                    var field = fields[j];
                    var tf = temp[field];
                    if (!tf) {
                        tf = temp[field] = {};
                        tf[row[field]] = [i];
                    } else {
                        var tfv = tf[row[field]];
                        if (tfv) {
                            tfv.push(i);
                        } else {
                            tfv = tf[row[field]] = [i];
                        }
                    }
                }
            }
            $.each(temp,
            function(field, colunm) {
                $.each(colunm,
                function() {
                    var group = this;

                    if (group.length > 1) {
                        var before, after, megerIndex = group[0];
                        for (var i = 0; i < group.length; i++) {
                            before = group[i];
                            after = group[i + 1];
                            if (after && (after - before) == 1) {
                                continue;
                            }
                            var rowspan = before - megerIndex + 1;
                            if (rowspan > 1) {
                                target.datagrid('mergeCells', {
                                    index: megerIndex,
                                    field: field,
                                    rowspan: rowspan
                                });
                            }
                            if (after && (after - before) != 1) {
                                megerIndex = after;
                            }
                        }
                    }
                });
            });
        });
    }
});

使用方法

在datagrid的onLoadSuccess事件里面进行调用，可以实现数据加载完成后，自动合并.

$('#dg').datagrid({
     url: 'XXX.json',
    onLoadSuccess: function(data) {
        //所有列进行合并操作
        //$(this).datagrid("autoMergeCells");
        //指定列进行合并操作(数组中写要合并的列名(field属性值))
        $(this).datagrid("autoMergeCells", []);
    }
});

效果:

参考资料
EasyUI DataGrid 相同连续列合并