使用easyUI datagrid 合并相同连续列

不念不忘少年蓝@ 2022-06-07 04:05 467阅读 0赞

**“似此星辰非昨夜,为谁风露立中宵”**  
在使用表格的日常中,经常要用到合并单元格.这里来看看使用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", []);
        }
    });

效果:  
![这里写图片描述][SouthEast]

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

[SouthEast]: /images/20220607/f55c0b7d05044df497c7f6e1cad88a24.png
[EasyUI DataGrid]: http://blog.csdn.net/itmyhome1990/article/details/50847605