分组筛选流程明细表数据
title: 分组筛选流程明细表数据 created: 2026-04-19 updated: 2026-04-19 type: reference tags: [imported, pptx] source: "Weaver Doc Import"
Slide 1
分组筛选流程明细表数据 泛微网络 培训服务中心
Slide 2
需求背景及实现效果
Slide 3
在大型企业客户日常报销流程里，【费用明细表】往往动辄 30～50 行，且类别五花八门。如有交通费、住宿费、餐费、其他费等等。“超长明细” 人工筛耗时耗力，还可能出现漏选。因此，利用JS代码实现针对流程明细表数据进行分类或者分组筛选，确认操作的准确性。
Slide 4
分组字段选择“补卡类型”时，可根据补卡类型的选项进行筛选数据； 分组字段选择“人员”时，可根据明细表中人员字段上的人员进行筛选数据； 分组字段选择“考勤日期”时，可根据明细表中考勤日期字段的日期进行筛选数据； 实现效果
Slide 5
实现思路
Slide 6
插入“分组驾驶舱” 用模板字符串快速拼出两块 DOM： ① 字段下拉
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 张)
