起因
业务部门每周六例会,业务部门请假的,如果包含星期六,需要老板审批。
我思路是当开始日期或结束日期被修改时,判断请假日期中是否包括周六,根据是束包含周六,去设置某个控件的值,后续步骤根据这个控件的值去确定流程的走向。
这篇文章记录这个需求中,我解决的第一个问题的过程,怎么知道表单里的时间控件被修改过。
经过
起初,认为这个问题很简单。写个JQUERY不就好了嘛,就像下面这么写。
// 日期控件的修改事件 $("#field9442").change(function(){ alert("开始日期修改事件"); }); |
发起流程,填写表单,修改日期时并不弹这个提示框,说明change事件并没有触发。在网上逛了一圈,按网上的说法,又做了一下测试,接下来按我的理解来说一下为什么change事件没有被触发。
change事件会在<input type="text">的控件失去焦点时value的值和获得焦点时value的值相比,如果发生变化了,会触发change事件。
说白了,触发change方法是在失去焦点时触发,并且要满足两个先决条件,一个获得焦点,一个是值发生改变。这就不难理解了,由于E8中用到的日期控件,展示给用户看的是个<span>标签,实际存值的<input>标签是隐藏的,虽然其值发生了变化,但并没有获得焦点和失去焦点的过程,所以并不会触发change事件。
还有小伙伴说,泛微有自己的API,可以按以下的方法写。
WfForm.bindFieldChangeEvent("#field9442", function () { alert("开始日期修改事件2"); }) |
有同样想法的小伙伴们请注意,这个方法只适用于E9,至于适不适用E9以上的版本,不确定。但它真的不适用E8,提示"WfForm is not defined"。
最后,我的解决方法是从对应的<span>上想办法。日期控件的DOM结构是这样式儿的。每个控件的组成,有一个<button>按钮,点击之后弹出日期选择框;有一个<span>标签,负责展示信息给用户看;有一个<input>标签,不可见,负责储存、提交数据用。
可以看出来,与控件对应的<span>标签的ID的命名规则是控件名加“span”。
网上找到了这么段代码,给<span>标签的DOMNodeInserted事件绑定方法。
$("#field9442span").bind('DOMNodeInserted',function(e){ alert("444"); }); |
结果
以上方法能够实现了临听E8工作流的日期控件的方法了,继续去实现后续的功能了。
儿童快乐!