EasyUI DataGrid 相同连续列合并

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                       

$.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;                            }                        }                    }                });            });        });    }});
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
    
    
10
    
    
11
    
    
12
    
    
13
    
    
14
    
    
15
    
    
16
    
    
17
    
    
18
    
    
19
    
    
20
    
    
21
    
    
22
    
    
23
    
    
24
    
    
25
    
    
26
    
    
27
    
    
28
    
    
29
    
    
30
    
    
31
    
    
32
    
    
33
    
    
34
    
    
35
    
    
36
    
    
37
    
    
38
    
    
39
    
    
40
    
    
41
    
    
42
    
    
43
    
    
44
    
    
45
    
    
46
    
    
47
    
    
48
    
    
49
    
    
50
    
    
51
    
    
52
    
    
53
    
    
54
    
    
55
    
    
56
    
    
57
    
    
58
    
    
59
    
    
60
    
    
61
    
    
62
   
   

使用方法

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

$('#dg').datagrid({    url: 'datagrid_data.json',    onLoadSuccess: function(data) {        //所有列进行合并操作        //$(this).datagrid("autoMergeCells");        //指定列进行合并操作        $(this).datagrid("autoMergeCells", ['groupId', 'commId']);    }});
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
   
   

效果展示

参考资料:

• jQuery Easyui Datagrid相同连续列合并扩展

           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow