官方文档 - EasyUI 合并单元格
为了合并数据网格(datagrid)单元格,只需简单地调用 ‘mergeCells’ 方法,并传入合并信息参数,告诉数据网格(datagrid)如何合并单元格。在所有合并的单元格中,除了第一个单元格,其它单元格在合并后被隐藏。
示例代码:
$('#tt').datagrid({
onLoadSuccess:function(){
var merges = [{
index:2,
rowspan:2
},{
index:5,
rowspan:2
},{
index:7,
rowspan:2
}];
for(var i=0; i<merges.length; i++)
$('#tt').datagrid('mergeCells',{
index:merges[i].index,
field:'productid',
rowspan:merges[i].rowspan
});
}
});
使用实例(ajax后台排序后,传给前端,合并单元格,按照相同的某列属性值合并):
当数据加载之后,我们合并数据网格(datagrid)中的一些单元格,所以放置下面的代码在 onLoadSuccess
回调函数中。
$.ajax({
url: url,
type: "post",
processData: false,
contentType: false,
success: function (spot_table_data) {
spot_table_json = JSON.parse(spot_table_data);
console.log(spot_table_json);
console.log('spot_table_json length = ' + spot_table_json.length);
$('#dg').datagrid({
frozenColumns: [[
{field: 'chn_name', title: '品种', align: 'center'}
]],
filterBtnIconCls: 'icon-filter',
data: json_to_array(spot_table_json),
striped: true, //隔行变色
onLoadSuccess: function () {// 合并单元格
var rows = $('#dg').datagrid("getRows");//获取行的数据
for (var i = 0; i < rows.length; i++) {
var rowspan = 0;
for (var j = i; j < rows.length; j++) {
{#console.log(rows[i]);#}
if (rows[i].p_code == rows[j].p_code) {//计算合并多少行
rowspan++;
}
}
if (rowspan > 1) {
//mergeCells合并单元格,index第几行开始,field合并的字段,rowspan合并行数,colspan合并列
$('#dg').datagrid('mergeCells', {
index: i,
field: 'chn_name',
rowspan: rowspan
});
i = i + rowspan - 1;
console.log('rowspan=' + rowspan);
}
}
}
});
},
error: function (e) {
alert("ajax排序失败");
}
})