EasyUI-datagrid-自动合并单元格

1.目标

1.1表格初始化完成后，已经自动合并好需要合并的行；

1.2当点击字段排序后，重新进行合并；

2.实现

2.1 引入插件

Js代码


/**

* 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代码

Html代码


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

2.3js代码

Js代码


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效果