jqGrid 5.5.4分组汇总行未包含在rowdata对象中如何解决

问题背景 #

基于jqGrid 5.5.4做移动端适配时，通过rowdata生成可折叠jQuery UI Accordion组件与自定义分页器，已开启数据分组（grouping）、汇总行（summary rows）能力，但默认生成的汇总行存在三个缺陷：

• 无id属性
• 未携带jqGrid默认行类名
• 未被纳入rowdata对象
  需要将汇总行按照页面实际展示位置插入rowdata，支撑移动端组件正确渲染。

实现步骤 #

1. 绑定正确的回调触发时机 #

汇总行是分组渲染流程最后阶段动态插入DOM的，不要在grid初始化完成事件中处理逻辑，直接绑定jqGridGroupingComplete事件，该事件触发时所有分组汇总行已经完成DOM渲染，不会出现数据遗漏。
基础绑定写法：

$("#gridTable").on("jqGridGroupingComplete", function () {
  // 所有汇总行处理逻辑在此执行
});

2. 从DOM反向提取汇总行并补全属性 #

在回调函数内遍历表格内所有汇总行DOM：jqGrid默认汇总行自带ui-jqgrid-footrow类名，部分定制场景下会渲染为带jqgrid-sum-row类的行，可通过组合选择器#gridTable tbody tr[role="row"]:has(td.jqgrid-rownum-summary)统一抓取，逐行做三个处理：

• 按规则生成唯一id，格式参考summary-{分组字段}-{分组值}，直接写入DOM的id属性
• 补全普通数据行的默认类名：给当前行DOM添加jqgrow、ui-row-ltr类，和普通数据行类名规则保持一致
• 逐列读取单元格内容，组装为和普通数据行结构完全一致的行对象，添加自定义标记isSummary: true做后续区分

3. 按展示顺序插入rowdata #

不要直接把汇总行追加到rowdata末尾，需对齐实际渲染顺序插入：

• 先读取grid当前分组配置，获取分组字段名，将原生rowdata按分组字段分块
• 每个分组数据块的末尾，插入对应分组的汇总行对象
• 若开启多级分组，递归按层级插入即可：父分组汇总行插入到所属所有子分组内容的末尾，和DOM展示顺序完全对齐
• 插入完成后覆写grid本地数据缓存：$("#gridTable").jqGrid("setGridParam", {data: updatedRowdata})，避免后续取数还是旧数据

4. 触发移动端组件重渲染 #

rowdata更新完成后，直接调用自定义的Accordion、分页器渲染方法即可，无需重新请求或加载grid数据。

避坑说明 #

• 排序、分页、筛选操作都会触发grid重绘分组和汇总行，上述逻辑不能仅在页面初始化时执行一次，每次jqGridGroupingComplete触发时要先清除之前插入的汇总行标记，再重新执行提取、插入流程，避免出现重复数据。
• 若配置了隐藏列的汇总规则，提取单元格数据时要同步读取隐藏列的汇总值，不要仅抓取可见列内容，避免移动端组件用到隐藏字段时取值为空。
• 本地分页场景下，汇总行仅属于当前分页的分组，提取DOM时仅抓取当前grid容器内的行即可，不会跨页拉取数据。
• 若需要和标注的红色目标汇总行样式、桌面端展示效果完全对齐，提取DOM时可同步读取行样式、自定义属性，一并写入组装的汇总行对象，移动端渲染时直接复用即可。

内容的提问来源于stack exchange，提问作者AV Guy