在 jQuery EasyUI 数据网格中展示层级或分类数据时，合并单元格能显著提升可读性。本文基于官方示例，讲解如何通过 mergeCells 方法在数据加载完成后合并指定行与列，并说明关键参数、回调时机及分页场景下的处理逻辑，便于开发者直接落地应用。
mergeCells 方法原理与参数说明
数据网格（DataGrid）合并单元格的核心是调用 mergeCells 方法。该方法会保留指定区域的第一个单元格内容，其余单元格在合并后被隐藏，从而实现视觉上的跨行或跨列效果。
调用时需传入合并配置对象，主要参数如下：
index：起始行索引（从 0 开始），决定合并从哪一行开始。field：目标列的字段名，指定需要合并的列。rowspan：纵向合并的行数，表示从起始行向下合并多少行。colspan：横向合并的列数（可选），用于跨列合并场景。
合并操作应在数据渲染完成后执行，否则可能因 DOM 未就绪导致合并失败或样式错位。
创建支持合并的数据网格结构
首先通过 HTML 定义 DataGrid 基础结构，配置数据源、列字段及分页等属性。以下为完整示例：
Product ID
Item ID
Price
Attribute
Stauts
List Price
Unit Cost
该结构包含冻结列、跨列标题（colspan）与跨行标题（rowspan），为后续动态合并提供基础布局。
在 onLoadSuccess 中执行合并逻辑
为确保合并操作在数据加载完成后执行，需将 mergeCells 调用放置在 onLoadSuccess 回调函数中。示例代码如下：
$('#tt').datagrid({
onLoadSuccess:function(){
var merges = [{
index:2,
rowspan:2
},{
index:5,
rowspan:2
},{
index:7,
rowspan:2
}];
for(var i=0; i该逻辑定义了三个合并区域：从第 2、5、7 行开始，分别向下合并 2 行，作用于 productid 字段。循环遍历配置数组并逐次调用 mergeCells，即可实现多区域合并。
分页与动态合并的注意事项
当 DataGrid 启用分页（pagination="true"）时，onLoadSuccess 会在每次翻页加载新数据后触发。此时合并逻辑仅对当前页数据生效，不会跨页合并。若需按业务字段（如分类、状态）动态计算合并行，可在回调中遍历当前页数据，比较相邻行字段值，自动生成 index 与 rowspan 配置。
常见问题排查建议：
- 合并后样式错位：检查
index是否超出当前页数据范围，或rowspan是否导致越界。 - 合并未生效：确认
field名称与列定义完全一致，且onLoadSuccess在数据渲染后执行。 - 动态合并性能：数据量较大时，建议先对数据排序，再按字段分组计算合并区间，避免重复遍历。
通过合理配置 mergeCells 参数并结合数据加载时机，可灵活实现各类表格合并需求，提升数据展示的结构化程度。
