2.3 表单组件

表单组件常见的元素主要包括文本输入框、下拉选择框、单选框、复选框、文本域、按钮等，本节会详细介绍这些表单组件。

2.3.1 button组件和buttonGroup组件

button是按钮组件，通过配合的图标与样式，使开发者能快速完成各种按钮的开发，单击button按钮触发事件onClick(object event)。button组件的属性如下。

●icon：[string]图标，支持fontIcon和img两种格式，fontIcon格式为icon-refresh，img格式为img:xxx.png|xxx.png（包含可用、不可用两个显示图片）。

●label：[string]显示名。

●target：[string][target]关联组件，当button单击时自动激活关联组件，配合contents组件实现多页切换效果。

buttonGroup组件可以包含一个button组件或多个button组件，通常与contents组件配合使用。排列方式有两种，一种是“btn-group-justified”，buttonGroup组件中button横向排列并且宽度均分；另一种是“btn-group-vertical”，buttonGroup组件中button纵向排列。

下面是button组件和buttonGroup组件的示例。

【例2-12】button组件和buttonGroup组件。

运行结果如图2-11所示。

图2-11 button组件和buttonGroup组件运行结果

2.3.2 input组件和output组件

input组件是平台封装的一个基础控件，主要用于数据的输入和展示作用。input组件根据类型和属性的不同，能实现数据的展示、检验、控制等操作。input组件的属性如下。

●datatype：指定数据类型，当bind-ref没有定义时有效。

●format：格式化，当绑定数据类型为Date、DateTime、Time时的显示格式。

●min：最小值表达式，当绑定数据类型为Date、DateTime、Time时控制选择时间。

●max：最大值表达式，当绑定数据类型为Date、DateTime、Time时控制选择时间。

●maxlength：字符串类型时限制输入长度，当ref关联列中有长度定义时以ref关联列定义为准。

●placeHolder：提示信息，是HTML5新特性。

●pattern：规定输入字段的值的模式或格式，是HTML5新特性，例如pattern="[0-9]"

表示输入值必须是0到9之间的数字。

output组件是平台封装的一个基础控件，主要用于数据的输出和展示作用。output组件根据类型和属性的不同，能实现数据的展示、样式等操作。例如，在input中输入专业，单击“确定”按钮就会在output中显示出来。下面是input组件和output组件的示例。

【例2-13】input组件和output组件。

运行结果如图2-12所示。

图2-12 input组件和output组件运行结果

2.3.3 select组件

select组件用于下拉选择，提供单选菜单。用法是选择data数据集中的某个字段的值，赋值给另一个data数据集当前行的一个或两个字段，从而实现下拉选择的功能。select组件的属性如下。

●bind-ref：[string][设计时属性]引用，这里绑定的是需要赋值的那个data组件的字段，如果bind-optionsLabel没有设置值，那么select赋值时显示的值就是此属性中对应的data字段；如果bind-optionsLabel有值，那么选择后显示的是bind-optionsLabel中绑定的data字段（根据bind-ref绑定字段在下拉data中自动查询得到），而bind-ref将不做显示，但是实际上绑定的这个data字段的值已经完成赋值操作了。常常使用bind-ref绑定id（不需要显示出来），bind-labelRef绑定name（可选）。

●bind-labelRef：[string][设计时属性]显示名引用，可选，如果bind-optionsLabel绑定了可选择的data字段，那么页面显示字段就是此属性绑定的字段。否则此属性绑定字段和bind-ref绑定的字段值是一样的。

●bind-options：[string][设计时属性]下拉部分options（选项）的bind（集合），这里绑定一个data组件，这个data组件中的数据是供他人选择使用的，如城市的集合。

●bind-optionsLabel：[string][设计时属性]options中的显示列，此属性是从bind-options绑定的data中选择一个字段，用于下拉时页面显示出来的可选值。如果此属性为空，那么显示的值将是bind-optionsValue中绑定的字段，选中时将本字段的值赋值给对应的bind-labelRef绑定的值。

●bind-optionsValue：[string][设计时属性]options中的值列，此属性和bind-optionsLabel属性是类似的。bind-optionsLabel不存在时，select下拉会显示此属性绑定的值，选中后赋值给对应bind-ref和bind-labelRef绑定的字段，如果bind-optionsLabel存在，此属性绑定的值只会赋值给bind-ref绑定的字段。

●optionsAutoLoad：[boolean]自动加载options数据，如果设置为true，当组件初始化完成以后，就会自动去加载bind-options中绑定的data数据；如果是false，那么只有等到select组件已经被单击，需要下拉数据时才会去加载数据。如果页面加载数据量比较大，页面初始化时间比较长时，建议需要时再加载，这样用户体验会比较好。

select组件在下拉选择时，可以将下拉数据中一列的值赋值给主数据的一列，也可以将下拉数据中两列的值分别赋值给主数据的两列。设置方法如下：

1）将下拉数据中一列的值赋值给主数据的一列——设置bind-optionsValue和bind-ref属性。

2）将下拉数据中两列的值分别赋值给主数据的两列——设置bind-optionsValue、bind-optionsLable、bind-ref、bind-lableRef属性，选择后，将bind-optionsValue 关联列的值赋值给nd-optionsValue关联列的值赋值给bind-ref关联的列，将bind-optionsLable关联列的值赋值给bind-lableRef关联的列。select显示bind-lableRef关联的列里面的值。

3）下拉数据有两列，存储一列，显示另一列—设置bind-optionsValue、bind-optionsLable、bind-ref属性，设置bind-options关联的data组件的autoLoad属性为true。

下面是select组件的示例。

【例2-14】select组件。

新建一个data组件，data组件的数据有东区、南区、西区、北区，select组件的属性“bind-options”绑定data组件，属性“bind-optionsValue”关联data组件的“area”列。运行结果如图2-13所示。

图2-13 select组件运行结果

2.3.4 gridSelect组件

gridSelect组件是下拉选择，提供单选或多选菜单。gridSelect组件是使用grid进行扩展实现的select组件，其下拉部分基本具有grid的特性，gridSelect值表示包括三个部分：value、label、ext。gridSelect组件在下拉选择时，这三个部分配合使用，可以将下拉数据中一列的值赋值给主数据的一列，可以将下拉数据中两列的值分别赋值给主数据的两列，也可以将下拉数据中三列的值分别赋值给主数据的三列。设置方法如下：

1）将下拉数据中一列的值赋值给主数据的一列——设置value和bind-ref属性。

2）将下拉数据中两列的值分别赋值给主数据的两列——设置value、label、bind-ref、bind-lableRef属性，选择后，将value关联列的值赋值给bind-ref关联的列，将lable关联列的值赋值给bind-lableRef关联的列。select显示bind-lableRef关联的列里面的值。

3）下拉数据有两列，存储一列，显示另一列——设置value、lable、bind-ref属性，设置option关联的data或bizData组件的autoLoad属性为true。

4）将下拉数据中三列的值分别赋值给主数据的三列——设置value、label、ext、bind_- ref、bind-lableRef、bind-extRef属性，选择后，将value关联列的值赋值给bind-ref关联的列，将lable关联列的值赋值给bind-lableRef关联的列，将ext关联列的值赋值给bind-extRef关联的列。select显示bind-lableRef关联的列里面的值。

下面是gridSelect组件的示例。

【例2-15】gridSelect组件。

运行结果如图2-14所示。

图2-14 gridSelect组件运行结果

2.3.5 radio组件和radioGroup组件

radio组件是常用的按钮组件，主要用于radio按钮的展示。radio组件的属性如下。

●label：显示名。

●name：组件名，等价于HTML中的name属性，相同名的Radio为一组，选中是互斥的。

●checked：是否选中。

●bind-ref：数据感知的绑定表达式。

●checkedValue：如果设置了，选中后是这个值，否则是null或undefined；如果没有设置，选中后是true，没有选中是false。

radioGroup组件是表单单选组件，用于表单中的单选，需要绑定数据组件才可以使用，radioGroup组件的属性如下。

●bind-ref：[string]数据感知的绑定表达式。

●bind-itemset：[string]显示项的数据绑定，通常指向Data组件。

●bind-itemsetValue：[string]itemset中表示数据的列。

●bind-itemsetLabel：[string]itemset中显示的列。

●itemStyle：[string]项上增加的样式。

●itemClass：[string]项上增加的类。

下面是radio组件和radioGroup组件的示例。

【例2-16】radio组件和radioGroup组件。

插入两个radio组件，将两个radio组件的label属性分别标记为男、女，对性别进行区分；插入radioGroup组件，用于显示大学生年级，绑定数据组件data，数据组件中有4条数据，分别是大一、大二、大三、大四，将属性“bind-itemsetValue”关联数据组件属性area，在页面显示出下拉数据。运行结果如图2-15所示。

图2-15 radio组件和radioGroup组件运行结果

2.3.6 checkbox组件和checkboxGroup组件

checkbox组件是表单多选组件，用于表单中的多选。checkbox组件的属性如下。

●name：[string]组件名，等价于HTML中的name属性，相同名的checkbox为一组。

●label：[string]显示名。

●value：[string]在该属性值和checkedValue相同时，默认选中。

●checkedValue：[string]选中后的值，当bind-ref的值为checkedValue时checked=true。

●checked：[boolean]是否选中。

●bind-ref：[string]数据感知的绑定表达式。

checkboxGroup组件是表单多选组件。checkboxGroup组件的属性如下。

●bind-ref：[string]数据感知的绑定表达式。

●bind-itemset：[string]显示项的数据绑定，通常指向Data组件。

●bind-itemsetValue：[string]itemset中表示数据的列。

●bind-itemsetLabel：[boolean]itemset中显示的列。

下面是checkbox组件和checkboxGroup组件的示例。

【例2-17】checkbox组件和checkboxGroup组件。

运行结果如图2-16所示。

图2-16 checkbox组件和checkboxGroup组件运行结果

2.3.7 toggle组件

toggle组件是平台封装的一个常用的按钮控件，可以切换按钮的开关状态。toggle组件的属性如下。

●name：组件名，跟HTML中的name属性相同，相同名的toggle为一组，选中是互斥的。

●label：组件显示名称，包括两个部分，on表示选中名称，off表示未选中名称。

●checked：是否选中。

●type：组件类型，取值范围为checkbox/radio。

●checkedValue：选中后的值。checkedValue如果设置了，选中后是这个值，否则是null或undefined；如果没有设置，选中后是true，没有选中是false。

●bind-ref：数据感知的绑定表达式。

下面是toggle组件的示例。

【例2-18】toggle组件。

在w文件中添加toggle组件，并设置组件的checkedValue属性的值，在toggle组件数据改变时触发事件onChange，当checkValue的值为1时，output组件显示为“男生”，当checkValue的值不为1时，output组件不显示任何文字。下面是toggle组件的实例。展现运行结果如图2-17所示，隐藏运行结果如图2-18所示。

图2-17 toggle展现运行结果

图2-18 toggle隐藏运行结果