【EasyUI】DataGrid 合并单元格 - 使用实例

官方文档 - 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排序失败");
                }
            })

合并效果示例（官方示例图）