流程 明细表数据

---

title: doc_472412af9710_分组筛选流程明细表数据 created: 2026-04-19 updated: 2026-04-19 type: reference tags: [best-practices, ppt] source: "Weaver Official"

---

Slide 1

分组筛选流程明细表数据 泛微网络 培训服务中心

Slide 2

需求背景及实现效果

Slide 3

在大型企业客户日常报销流程里，【费用明细表】往往动辄 30～50 行，且类别五花八门。如有交通费、住宿费、餐费、其他费等等。“超长明细” 人工筛耗时耗力，还可能出现漏选。因此，利用JS代码实现针对流程明细表数据进行分类或者分组筛选，确认操作的准确性。

Slide 4

分组字段选择“补卡类型”时，可根据补卡类型的选项进行筛选数据； 分组字段选择“人员”时，可根据明细表中人员字段上的人员进行筛选数据； 分组字段选择“考勤日期”时，可根据明细表中考勤日期字段的日期进行筛选数据； 实现效果

Slide 5

实现思路

Slide 6

插入“分组驾驶舱” 用模板字符串快速拼出两块 DOM： ① 字段下拉 （补卡类型 / 人员 / 考勤日期）； ② 选项卡容器 .group-tabs-header（默认只有“全部”）； 把生成的 $filterControls 直接 insertBefore 到表格前面，零侵入原有代码。 实现思路 动态收集“分组值” 监听下拉 change → 执行 updateTabs()； 遍历所有 tr.detail_data_row，对应当前字段名 data-fieldname 取值：– 优先拿 .ant-select-selection-selected-value（Select 单选）– 再拿 .ant-select-selection__choice__content（Select 多选）– 兜底 .text 或 input[type=“text”]（纯展示 / 输入框）； 用 Set 去重，瞬间拿到不重复的分组值数组。 渲染选项卡 + 过滤行 清空旧选项卡 → 追加“全部”+ 各个分组值； 给每个 .group-tab 绑定点击事件： —点“全部”→ 所有行 show() —点具体值→ 再次遍历行，拿行内字段值与选项卡值比对，不符合 hide()，符合 show()； 切换时加 .active 高亮。

Slide 7

JS代码块应用样例

Slide 8

配置实现步骤 实现方式： 后台打开html模板； 打开插入代码块； 插入修改好的代码块； 流程表单 时加 .active 高亮。

Slide 7

JS代码块应用样例

Slide 8

配置实现步骤 实现方式： 后台打开html模板； 打开插入代码块； 插入修改好的代码块； 流程表单## Slide 9

代码示例——JS代码

择器事件 $groupFieldSelect.on('change', updateTabs); // 初始化 bindTabEvents(); updateTabs(); }); ## Slide 13

代码示例——CSS样式代码

Slide 15

志达宇泛 见著于微 感谢您的信任与支持！ 我们始终努力提供好用的移动办公平台

---

🖼️ 提取的插图 (共 10 张)