表单中根据流程状态隐藏和显示内容 【JS】

说明：以下内容都在后台--表单--格式中添加
1、增加一个计算脚本，获取流程状态值并拼接到html隐藏控件值中返回。代码如下：

1. var rtn = "";
   
2. var stateLabel = getStateLabel();
   
3. if(stateLabel!=null){
   
4. rtn = "<input type='hidden' id='stateLabelVal' value='" + stateLabel + "' />";
   
5. }
   
6. rtn;

复制代码

2、给需要显示和隐藏的内容元素增加name属性，name属性值对应js中的获取条件字符。



说明：js语句查询条件中，p指<p abp="14585" name="text2Name">中的标签名称p，若使用的是div或者table等标签时，对应修改即可。
3、通过javascript获取隐藏控件中的流程状态值，根据值判断显示和隐藏内容。代码如下：

1. jQuery(function(){
   
2.         var stateLabelVal = jQuery("#stateLabelVal").val();
   
3.         if(stateLabelVal=="节点一"){
   
4.                 jQuery("p[name=text2Name]").css("display","none");
   
5.         }else if (stateLabelVal=="节点二") {
   
6.                 jQuery("p[name=text1Name]").css("display","none");
   
7.         }
   
8. });

复制代码

附：本示例参考图片和源代码：
a)流程图




b)节点一效果图



c)节点二效果图



d)扩展说明：多个内容可以使用相同的name属性值，实现同时隐藏。例如：在节点一时不止隐藏“文本框二”，还想隐藏“计算脚本”，可以在“计算脚本”外的p标签中增加name=”text2Name”属性。
e)后台表单格式中的源代码如下：

1. <p abp="14583" name="text1Name">文本框一：<input id="11e3-9ac4-b2875d56-8671-130792ba6571" class="cn.myapps.core.dynaform.form.ejb.InputField" value="" name="文本框一" abp="14584" fieldType="VALUE_TYPE_VARCHAR" textType="text" fieldkeyevent="Tabkey" numberPattern="" borderType="false" refreshOnChanged="false" calculateOnRefresh="false" mobile="true" discript="" editMode="01" processDescription="[];[]" valueScript="" filtercondition="" validateLibs="" validateRule="" hiddenScript="" hiddenValue="" hiddenPrintScript="" printHiddenValue="" readonlyScript="" classname="cn.myapps.core.dynaform.form.ejb.InputField" text="text" /></p>
   
2. <p abp="14585" name="text2Name">文本框二：<input id="11e3-9ac4-b9caf415-8671-130792ba6571" class="cn.myapps.core.dynaform.form.ejb.InputField" value="" name="文本框二" abp="14586" fieldType="VALUE_TYPE_VARCHAR" textType="text" fieldkeyevent="Tabkey" numberPattern="" borderType="false" refreshOnChanged="false" calculateOnRefresh="false" mobile="true" discript="" editMode="01" processDescription="[];[]" valueScript="" filtercondition="" validateLibs="" validateRule="" hiddenScript="" hiddenValue="" hiddenPrintScript="" printHiddenValue="" readonlyScript="" classname="cn.myapps.core.dynaform.form.ejb.InputField" text="text" /></p>
   
3. <p abp="14587">计算脚本：<img id="11e3-a5c2-07cc3a08-9ef5-5b48bcd32cd8" class="cn.myapps.core.dynaform.form.ejb.CalctextField" src="plugins/calctextfield/calctextfield.gif" abp="14588" calculateOnRefresh="false" valueScript="var@nbsp;rtn@nbsp;=@nbsp;@quot;@quot;;@amp;#10;@amp;#13;var@nbsp;stateLabel@nbsp;=@nbsp;getStateLabel();@amp;#10;@amp;#13;if(stateLabel!=null){@amp;#10;@amp;#13;        rtn@nbsp;=@nbsp;@quot;@lt;input@nbsp;type=@#146;hidden@#146;@nbsp;id=@#146;stateLabelVal@#146;@nbsp;value=@#146;@quot;+stateLabel+@quot;@#146;@nbsp;/@gt;@quot;;@amp;#10;@amp;#13;}@amp;#10;@amp;#13;rtn;" classname="cn.myapps.core.dynaform.form.ejb.CalctextField" /></p>
   
4. <script>
   
5. jQuery(function(){
   
6.         var stateLabelVal = jQuery("#stateLabelVal").val();
   
7.         if(stateLabelVal=="节点一"){
   
8.                 jQuery("p[name=text2Name]").css("display","none");
   
9.         }else if (stateLabelVal=="节点二") {
   
10.                 jQuery("p[name=text1Name]").css("display","none");
    
11.         }
    
12. });
    
13. </script>

复制代码