本文摘要
介绍泛微 EC9 流程表单中增加自定义按钮的两种做法:主表可用 CSS 配合 jQuery 向指定单元格追加按钮并绑定点击事件,明细表则通过 WfForm 的 API 将按钮代理渲染到单行文本框字段并注册点击事件。前者简单直接,后者更规范灵活;官方不推荐 jQuery 与原生 DOM 操作,建议统一使用 API,以保证移动端兼容性。
📌
该文章由丸子引导AI辅助制作生成,如有改进意见,欢迎评论区留言。
引言
泛微EC9是一款功能强大的企业管理软件,广泛应用于各种流程表单的管理和操作。在实际应用中,常常需要在流程表单中增加按钮,以实现某些自定义功能。本文将介绍两种在泛微EC9流程表单中增加按钮的方法:使用CSS和jQuery,以及使用标准API接口操作。
方法1:使用CSS和jQuery实现
步骤详解
- 使用自定义属性,设置单元格id
- 在主表中通过jQuery向特定元素添加按钮。
- 使用CSS自定义按钮的样式。
- 绑定按钮点击事件,实现相应的逻辑操作。
代码示例(主表增加按钮)
function openAddCustomer() { // 在此处添加您的逻辑代码 console.log("哎呀~我被点击了!"); // 可以在这里执行其他操作或跳转到其他页面等}
jQuery(document).ready(function() { $("#selectbtn").append("<button class='selectbtn' onclick='openAddCustomer()'>按钮名称</button>");});
</script>
<style type="text/css">.selectbtn { display: inline-block; padding: 10px 20px; background-color: #E6F1F7; color: #333333; border: none; text-align: center; text-decoration: none; font-size: 14px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease;}.selectbtn:hover { background-color: #B2DFF3; }</style>方法2:使用标准API接口操作
步骤详解
- 定义明细表的ID和按钮的字段名、显示名称。
- 使用API接口将按钮代理渲染到单行文本框字段中。
- 注册按钮的点击事件,定义点击后的逻辑操作。
代码示例(明细表增加按钮)
jQuery(document).ready(function() { // 定义明细表id var detailid = "1"; // 定义按钮字段名(数据库字段名称, 注意: 单行文本框,文本类型) var fieldname = "csmx3" // 定义按钮显示名称 var buttonname = "我是按钮1111"
/** ------------以下内容无需更改----------- **/ var buttonFieldId = WfForm.convertFieldNameToId(fieldname, "detail_" + detailid); initializeButtonAction(); WfForm.registerAction(WfForm.ACTION_ADDROW + detailid, initializeButtonAction);
function initializeButtonAction() { WfForm.getDetailAllRowIndexStr("detail_" + detailid).split(",").forEach(function(rowIndex) { if (rowIndex) { WfForm.proxyFieldComp(buttonFieldId + "_" + rowIndex, "<Button type='primary' class='ant-btn ant-btn-primary'>" + buttonname + "</Button>", "1,2,3"); } }); } /** ------------以上内容无需更改----------- **/
// 定义触发点击事件 WfForm.bindFieldAction("onclick", buttonFieldId, function(fieldid,rowIndex){ alert("明细的"+rowIndex+"行标记字段"+fieldid+"被点击"); //这里写你想要执行的事件内容 });});小结
这两种方法各有优劣。使用CSS和jQuery的方法更加简单直接,适合快速实现按钮的添加和基本交互操作。而使用标准API接口的方法则更为规范和灵活,适合复杂的业务需求,具有较强兼容性。根据实际情况选择合适的方法,可以更好地提高工作效率和用户体验。
📌
来自官方文档:表单字段相关操作,不推荐使用jQuery,禁止原生JS直接操作DOM结构! 大家开发过程中,推荐都使用API接口操作,由产品统一运维;同时使用API才能完整的兼容移动终端