Dorado 5 : 2.4.07.RadioBox(单选框组合编辑器) (RF2)

功能

多选一,如图:

图表 110

使用

JSP中直接通过RadioGroup标签实现

JSP中的代码:

<d:RadioGroup id="editorSex" />

组件内部的选项通过ListDropDown或DatasetDropDown初始化。开发时我们可以通过ListDropDown或DatasetDropDown初始化RadioGroup中的选项,并设定RadioGroup的dropdown属性,将它们关联上,这样RadioGroup就会利用绑定的dropdown中的数据产生内部选项。Dropdown对象的使用参考本文中的DropDown开发使用详解
如新建了ListDropDown,定义如下:

<Control id="dropdownSex" type="ListDropDown" mapValue="true">
<DropDownItem value="true" label="男" />
<DropDownItem value="false" label="女" />
</Control>

RadioGroup的xml定义如下:

<Control id="editorSex" type="RadioGroup" dataset="datasetEmployee" field="sex" dropDown="dropdownSex" />

效果如图:

在线范例:
http://www.bstek.com/dorado5/control/input-assist.jsp
其中的选择部门的RadioGroup的选项就是来自与一个DatasetDropDown

DataTable,AutoFrom实现RadioGroup

在dorado开发时,部分情况下我们也可以不用直接的创建RadioGroup,而是利用DataTable与AutoForm这种复合程度高的组件配置实现。DataTable与AutoForm支持配置方式创建RadioGroup对象,使用方法如下:

DataTable的Column中实现

第一设定column的editorType为radiogroup,这样系统就会自动的创建RadioGroup组件;
第二将一个用于初始化RadioGroup选项的dropdown对象绑定到这个column上;
xml配置范例:

<Control id="tableEmployee" type="DataTable" dataset="datasetEmployee" width="100%">
...
<Column name="sex" field="sex" dropDown="dropdownSex" rendererType="radiogroup" />
...
</Control>

AutoFrom实现

第一在AutoForm中定义RadioGroup我们可以通过在FormGroup中添加RadioGroup Element并绑定到相关字段上;
第二设定RadioGroup Element的子元素RadioGroup的dropdown属性;
xml配置范例:

<Control id="formEmployee" type="AutoForm" dataset="datasetEmployee">
<FormGroup>
...
<Element name="sex" type="RadioGroup" field="sex">
<FieldLabel />
<RadioGroup dropDown="dropdownSex" />
</Element>
...
</FormGroup>
</Control>

主要属性说明

属性

说明

Dataset

绑定的dataset对象

Dropdown

绑定的下拉框对象

Field

绑定的field对象

Layout

子选项的布局方式,可选项:
flow/horizontal/vertical

Name

CheckBox的名称

readOnly

是否可以编辑

toolTip

系统提示信息

系统css文件为

.RadioGroup {
table-layout: fixed;
font-family: VERDANA;
font-size: 9pt;
border-width: 0;
border-color: #CCCCCC;
border-style: solid;
}

.ActiveRadioGroup {
background-color: white;
table-layout: fixed;
font-family: VERDANA;
font-size: 9pt;
border-width: 0;
border-color: #74E540;
border-style: solid;
}

.ReadOnlyRadioGroup {
table-layout: fixed;
font-family: VERDANA;
font-size: 9pt;
border-width: 0;
border-color: #CCCCCC;
border-style: solid;
}

css说明:

Class名称

说明

RadioGroup

当RadioGroup处于可编辑状态下的风格设定

ActiveRadioGroup

当RadioGroup激活时的风格设定

ReadOnlyRadioGroup

当RadioGroup处于只读状态时的风格设定