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;
}
}
}
});
});
});
}
});
调用方法：
//加载成功后调用此方法
function onLoadSuccess(data) {
$(this).datagrid("autoMergeCells", ['No', 'NativePlace','填写字段名称']); }
HTML代码:
<table class="easyui-datagrid" title="Merge Cells for DataGrid" style="width:700px;height:450px"
data-options="
rownumbers: true,
singleSelect: true,
iconCls: 'icon-save',
url: '/Home/GetEmployee',
method: 'get',
rownumbers:true,
pagination:true,
onLoadSuccess:onLoadSuccess
">
<thead>
<tr>
<th data-options="field:'EmployeeID',width:300">员工编号</th>
<th data-options="field:'No',width:100">登录名</th>
<th data-options="field:'RealName',width:100,align:'right'">真实名字</th>
<th data-options="field:'NativePlace',width:80,align:'right'">地区</th>
<th data-options="field:'status',width:60,align:'center'">操作</th>
</tr>
</thead>
</table>
效果图：
