流程 明细表添加自定义显示列
title: doc_413191fe167a_流程明细表添加自定义显示列 created: 2026-04-19 updated: 2026-04-19 type: reference tags: [best-practices, ppt] source: "Weaver Official"
Slide 1
流程明细表添加自定义显示列 泛微网络 培训服务中心
Slide 2
需求背景及实现效果
Slide 3
在补卡流程明细表里，存在多列。如果开启横向滚动，对于前置数据的查询不方便，此时如果可以自定义选择显示哪些重点信息，可以自由定制显示列，那在数据的展示上，就会方便很多；对于审核表单的人员来说，审核界面更加简洁。本视频通过JS代码的方式可实现在流程明细表添加自定义显示列，实现明细表内容的自由显示。
Slide 4
点开自定义列显示，可通过勾选和取消勾选的方式，自定义显示明细表的列； 记忆个人偏好，同一用户、同一节点、同一流程，下次打开自动恢复上次勾选的列 实现效果
Slide 5
实现思路
Slide 6
2、准备代码 实现思路 1、改配置 代码里configs数组支持n个流程； 在configs数组里添加你的流程； true = 首次打开就显示，false = 首次隐藏 把「完整代码」全选复制。进入 OA 后台 → 流程设置 → 对应表单 → 打开HTML模板，插入代码块，保存。
Slide 7
JS代码块应用样例
Slide 8
配置实现步骤 实现方式： 后台打开html模板； 打开插入代码块； 插入修改好的代码块； 流程表单
Slide 9
代码示例——JS代码 / 1. 定义工作流列显示配置数组 const configs = [ { workflowid: 332, detail: "detail_1", fields: [ "ry：'人员'：true", // 格式：字段值:显示名称:默认是否选中 "kqrq：'考勤日期'：true", "bklx：'补卡类型'：true", "bqcs：'补签次数'：false", "bksj：'补卡时间'：true", "kq7trq：'考勤7天日期'：false" ] } // 您可以在此继续添加其他工作流的配置，例如： // { workflowid: 333, detail: "detail_1", fields: [...] }, ]; 期'：false" ] } // 您可以在此继续添加其他工作流的配置，例如： // { workflowid: 333, detail: "detail_1", fields: [...] }, ];## Slide 10
代码示例 // 2. 主功能代码 (function() { const baseInfo = WfForm.getBaseInfo(); const currentWorkflowId = baseInfo.workflowid; const userId = baseInfo.f_weaver_belongto_userid; const nodeId = baseInfo.nodeid; console.log('当前workflowid:', currentWorkflowId); console.log('所有配置:', configs); // 查找当前工作流的配置 const config = configs.find(c => c.workflowid == currentWorkflowId); if (!config) { console.error('未找到对应workflowid的配置:', currentWorkflowId); return; } console.log('当前配置:', config);
Slide 11
代码示例
// 存储用户列显示偏好的键
const STORAGE_KEY = column_prefs_${userId}_${nodeId}_${currentWorkflowId};
// 从本地存储获取用户偏好
function getUserColumnPrefs() {
const prefs = localStorage.getItem(STORAGE_KEY);
return prefs ? JSON.parse(prefs) : null;
}
// 保存用户偏好到本地存储
function saveUserColumnPrefs(prefs) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
}
存储
function saveUserColumnPrefs(prefs) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
}## Slide 12
代码示例 // 创建列控制容器 const userPrefs = getUserColumnPrefs(); const $columnControls = $(`
`); // 在表格前插入列控制 $('.excelDetailContent').before($columnControls);
重置
