流程多节点调用同一张业务表单的锚点问题

本文介绍了一种在工作流软件中实现表单复用的方法,特别是在业务流程中多个节点使用同一张表单的情况下,如何通过隐藏和显示字段来简化表单制作过程。此外,还讨论了如何利用锚点定位来提高用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在工作流的实施中,经常会有客户提出,一个业务流程中,同一张业务表单用于多个节点上,即流程的多个节点上挂的都是同一张业务表单,这样对业务表单的制作就会轻松很多。

在工作流软件产品中,业务表单挂接到流程的节点上,流程启动后,打开节点上的业务表单,做业务环节的处理,提交表单后,流转到下一个业务节点。各个业务节点上都需要挂业务表单,各个节点上可以是同一张业务表单,也可以是不同的表单,简单的节点,也可以不挂表单。

一般审批的节点,大部分是要将上一节点填写完的信息显示出来,供审批时候参照。如果填写的信息量比较大,那审批节点的表单就需要重新画一次那些相同的信息。因此可以在填写申请的节点和审批的节点调用同一张表单。 在填写节点的时候,将审批的信息隐藏起来,审批节点才显示出来,并且可以编辑那些审批意见,结果等信息。填写节点填写的信息,审批的时候通常是只能显示,不能修改的。

有这些要求之后,就可以将填写申请单和审批申请单 共用一张表单;填写申请单的时候,隐藏审批信息;审批的时候,全部显示,并且填写的基本信息只读。

当申请单的信息量很大,审批意见,审批结果等编辑框需要滚动才能到达。为了方便用户操作,需要在表单打开后,将焦点直接定位到审批意见。

可以通过设置锚点的方式来定位,在审批信息处设置锚点,当表单打开后,跳转到锚点,达到快速定位到审批信息。

window.location.href="#check";等这种方式来定位

也可以通过一些定位输入框的焦点的方式来达到。

用eform表单的方式,可以在表单打开之后事件中做定位锚点的方式来达到。

在JavaScript中,`event.preventDefault()` 和 `event.stopPropagation()` 是用于控制事件默认行为及传播方式的重要方法,虽然它们都是用来管理用户交互产生的副作用,但是各自的作用完全不同。下面详细介绍两者的差异: ### `event.preventDefault()` - **功能说明**: 当你想要阻止某些基于特定条件下的预设行动发生时就可以调用此API来达到目的; - **应用场景**: 比如表单提交、链接跳转或是键盘快捷键触发的动作等都可以通过它停止其预期的操作结果。 - 表单验证:如果你需要对用户的输入数据进行校验,在确定不符合要求的情况下取消发送请求给服务器。 - 自定义行为:对于页面内的导航菜单或者其他形式的超文本引用链接而言,则可通过此函数让浏览器不再加载新的网址而是执行自定义的任务。 - **示例代码**: ```html <form onsubmit="handleSubmit(event)"> <!-- 输入框和其他控件 --> </form> <script> function handleSubmit(e) { e.preventDefault(); // 取消表单提交 if (/* some validation logic */) { alert('Form is invalid! Please correct the errors.'); } else { // 提交表单数据... } } </script> ``` 在这个例子中,当按下提交按钮时,默认情况下整个网页将会尝试把表单项内容传送到指定位置;但如果此时我们发现有错误存在就需要阻止这一过程并给予提示信息让用户修正问题后再试一次。 ### `event.stopPropagation()` - **功能说明**: 它的功能在于限制事件冒泡或捕获阶段继续沿DOM树上下文传递下去,也就是说无论是在当前元素还是它的任何父辈节都不会再接收到这条消息的通知了。 - **应用场景**: 希望局部处理某个具体的UI组件内部发生的活动而不影响周围环境的情形非常适合采用这种方法。 - **示例代码**: ```html <div onclick="handleDivClick()"> 击这里会触发外部盒子击事件<br/> <span onclick="handleSpanClick(event)">我是一个特殊的段落文字,我的击不会冒泡上去。</span> </div> <script> function handleDivClick(){ console.log("External div was clicked"); } function handleSpanClick(e){ e.stopPropagation(); console.log("Special span text only reacted within itself."); } </script> ``` 在这里面的例子中,“特殊”的<span>标签绑定了一个额外的时间处理器,并在其内部加入了对`e.stopPropagation()` 的调用以便确保自身的击手势只会影响到自己而与其他外围区域无关。 总结来说, - 如果你想改变某一事件的标准运作流程就应当考虑使用 `preventDefault`. - 而当你想限定某类互动仅仅局限在一个很小的空间之内而不波及其他关联结构的时候则应该选择运用 `stopPropagation`.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值