1. 程式人生 > >EasyUI DataGrid 相同連續列合併

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

效果展示

這裡寫圖片描述

參考資料:

           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述