EasyUI-datagrid-自動合併儲存格(轉)

標籤：

1.目標

  1.1表格初始化完成後，已經自動合并好需要合并的行；

  1.2當點擊欄位排序後，重新進行合并； 

2.實現

  2.1 引入外掛程式

/** * author ____′夏悸 * create date 2012-11-5 * **/$.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;                            }                        }                    }                });            });        });    }});

2.2html代碼

<table id="simpleDgId" style="height: 300px" />

2.3js代碼

var sortFlag = false;    $(‘#simpleDgId‘).datagrid({        url:"testController.do?datagrid",        fitColumns:true,        singleSelect:true,        remoteSort: false,        columns:[[                  {field:"age",title:"年齡",width:25,align:‘center‘,sortable:true},                  {field:"userName",title:"名稱",width:25,align:‘center‘,sortable:true},                  {field:"mobilePhone",title:"手機",width:25,align:‘center‘,sortable:true}        ]],        onSortColumn:function(sort, order){            sortFlag = true;            if("userName"==sort){                $(this).datagrid("autoMergeCells",[sort]);            }else{                $(this).datagrid("autoMergeCells");            }        },        onLoadSuccess: function(data){            if(!sortFlag) $(this).datagrid("autoMergeCells");        }    });

2.4後台

     url:"testController.do?datagrid"

     後台資料就是普通的表格式資料，這裡就不贅述了  

  2.5效果

 

EasyUI-datagrid-自動合併儲存格(轉)