上海交通大学开发者平台

# 动态脚本

动态脚本和前面所述的四种动态比较起来具有更大的灵活性，对前四种动态功能上是全覆盖的，并且可以实现更为复杂的逻辑以及其它动态所不能实现的功能。

动态脚本涉及的内容很多，本章节将重点介绍通用方法、控件方法、操作脚本几方面，完整的文档请参考此处。

# 通用方法

通用方法是动态脚本中使用的各种控件引用对象所共有的方法，依靠这些方法就可以完全实现前面四种动态功能，完整的控件通用方法列表请参考此处。

# 公式

前面的章节我们已经用动态公式实现了当用户选择了不同的请假类型时显示不同文字的提示信息，现在让我们用动态脚本实现相同的功能，脚本可以设置在fieldTip上，内容如下。

if(!$INIT){
  if($fieldType.value=='01'){
    this.val('在编人员享有一年累计不超5天，连续不超2天的有薪事假');
    return;
  } 
  if($fieldType.value=='02'){
    this.val('请病假须提前申请，申请病假需提供医院开具的病休证明');
    return;
  }
  this.val('');
}
1
2
3
4
5
6
7
8
9
10
11

我们可以看到里面使用到了this对象上的val方法，设置在fieldTip的脚本中的this指的就是fieldTip控件的对象引用，关于对象引用更多的说明请参考此处。val方法可用于取值或者设置值。$INIT是动态内置变量，用于判断是否是表单初始化时，这个变量会在动态脚本中经常使用，因为表单初始化时和用户交互时的逻辑有可能是不同的，比如val方法一般只适合交互时使用，初始化时使用往往是错误的，如果一定要使用可用{force:true}参数，具体参考val方法文档。

和其它动态不同，动态脚本不用设置执行条件，但是需要设置触发字段列表，这里我们需要设置触发列表为$fieldType。

# 样式

前面章节中我们根据所选请假类型设置了提示信息的文字颜色，同样让我们用脚本实现如下，需要设置2个动态脚本，触发字段为$fieldType的脚本如下：

this.css("color",$fieldType.value=='02'?"red":"blue");
1

无触发字段的脚本如下，无触发字段代表着仅表单初始化时候执行。

this.css($MOBILE?"margin-top":"margin-bottom","4px");
1

css和style方法可用于在脚本中设置样式，可实现动态样式功能。

# 动作

提示信息字段可见性动态脚本触发字段为$fieldTip，脚本内容如下

this.visible($fieldTip!='');
1

合并以上几段脚本，配置在$fieldTip上的脚本如图所示，触发字段一样的脚本可以合在一起。

出差行程可见性动态脚本设置在grouTrip上，触发字段为$fieldType，内容如下

this.tableVisible($fieldType.value=='05');
1

# 验证

动态脚本里使用验证要调用控件对象上的registerValidation方法，回调函数中可返回出错提示信息，不返回或者返回空字符串表示验证通过。

如果结束日期早于开始日期就在结束日期上提示，我们将脚本放在$fieldEndDate上，触发字段列表为空(只在表单初始化时候注册一次)，脚本内容如下，注意注册的验证函数中的this就是注册的那个控件对象。

this.registerValidation(function(){
  if(this.val()!='' && $fieldBeginDate!='' && this.val()<$fieldBeginDate){
     return '结束日期早于开始日期';
  }
});
1
2
3
4
5

以上我们例举了通过控件通用方法在动态脚本中实现公式、样式、动作、验证的方法，当然动作有很多没有一一说明，但都可以用动态引用对象中的方法替代，所有替代方法请参考此处。

# 控件方法

控件方法是不同控件所独有的一些供动态脚本中使用的方法，这些方法的功能是前四种动态无法实现的。

请假表单中用户需要输入请假开始日期和结束日期，结束日期不应早于开始日期，如果能在结束日期控件上设置最小可选日期就是开始日期那么会改善用户的交互。日期控件上有控件方法min、max可设置最小、最大可选日期，只需要在动态脚本中调用该方法即可实现以上功能。

在$fieldBeginDate上设置脚本如下，触发字段设置为$fieldEndDate

this.max($fieldEndDate);
1

在$fieldEndDate上设置脚本如下，触发字段设置为$fieldBeginDate

this.min($fieldBeginDate);
1

配置了这两段脚本后表单效果如下

完整的控件方法列表请参考此处。

# 操作脚本

操作按钮上可以注册脚本，当用户点击后执行，可用于提示用户、复杂逻辑验证并控制是否提交等用途。

为了演示这个功能，我们假设请假流程有了一个新的需求，当请假天数超过5天时提示用户请假天数超5天是否提交，当用户选择是的时候提交，选择否则不提交。

为此我们要使用动态根对象上的registerScript方法，该方法第一个参数是步骤节点名称，第二个参数是操作名称，第三个参数是按钮回调函数。调用根对象上的registerScript方法需要在全局初始化脚本中来做，我们要在填写申请单步骤的提交操作上注册脚本，所以在根对象上配置动态如下

this.registerScript('Apply','Submit',function(){
  if($fieldBeginDate!='' && $fieldEndDate!='' && $fieldEndDate-$fieldBeginDate>=5*24*3600){
    confirmBox("请假天数超过5天，确认提交？");
    return;
  }
  return true;
});
1
2
3
4
5
6
7

registerScript中如果显示的返回布尔值表示可提交或者阻止提交，如果不返回值表示要等待confirmBox或者messageBox用户交互时所按按钮来决定是否提交，是否阻止提交的控制在registerScript文档中有详细的说明。

现在用户点提交时如果天数超5天效果如图

# 案例地址

download 流程链接
download 表单下载

← 项目配置 →