3.5.2.1.9. 复选框组

在线示例

这是一个允许用户使用复选框从选项列表中选择多个值的组件。

gui CheckBoxGroup

该组件对应的 XML 名称: checkBoxGroup

可以使用 setOptions()setOptionsList()setOptionsMap()setOptionsEnum() 方法,或使用 optionsDatasourceoptionsContainer 属性指定组件选项列表。

  • 使用 CheckBoxGroup 的最简单的情况是为实体属性选择枚举值。例如,Role 实体具有 RoleType 类型的 type 属性,它是一个枚举。然后可以通过 optionsEnum 属性来使用 CheckBoxGroup 显示这个属性,如下所示:
  1. <checkBoxGroup optionsEnum="com.haulmont.cuba.security.entity.RoleType"
  2. property="type"/>

setOptionsEnum() 将一个枚举类作为参数。选项列表将包含枚举值的本地化名称,组件的值将是一个枚举值。

  1. @Inject
  2. private CheckBoxGroup<RoleType> checkBoxGroup;
  3. @Subscribe
  4. protected void onInit(InitEvent event) {
  5. checkBoxGroup.setOptionsEnum(RoleType.class);
  6. }

使用 setOptions() 方法可以得到相同的结果,该方法可以使用所有类型的选项:

  1. @Inject
  2. private CheckBoxGroup<RoleType> checkBoxGroup;
  3. @Subscribe
  4. protected void onInit(InitEvent event) {
  5. checkBoxGroup.setOptions(new EnumOptions<>(RoleType.class));
  6. }
  • setOptionsList() 能够以编程方式指定组件选项列表。为此请在 XML 描述中声明一个组件:
  1. <checkBoxGroup id="checkBoxGroup"/>

然后将组件注入控制器并为其指定选项列表:

  1. @Inject
  2. private CheckBoxGroup<Integer> checkBoxGroup;
  3. @Subscribe
  4. protected void onInit(InitEvent event) {
  5. List<Integer> list = new ArrayList<>();
  6. list.add(2);
  7. list.add(4);
  8. list.add(5);
  9. list.add(7);
  10. checkBoxGroup.setOptionsList(list);
  11. }

该组件将如下所示:

gui CheckBoxGroup 2

根据所选的选项,组件的 getValue() 方法将返回 Integer 类型的值:2、4、5、7。

  • setOptionsMap() 能够分别指定字符串名称和选项值。例如,我们可以为控制器中注入的 checkBoxGroup 组件设置以下选项字典:
  1. @Inject
  2. private CheckBoxGroup<Integer> checkBoxGroup;
  3. @Subscribe
  4. protected void onInit(InitEvent event) {
  5. Map<String, Integer> map = new LinkedHashMap<>();
  6. map.put("two", 2);
  7. map.put("four", 4);
  8. map.put("five", 5);
  9. map.put("seven", 7);
  10. checkBoxGroup.setOptionsMap(map);
  11. }

该组件将如下所示:

gui CheckBoxGroup 3

根据所选的选项,组件的 getValue() 方法将返回 Integer 类型的值:2、4、5、7,而不是界面上显示的字符串。

  • 该组件可以从数据容器中获取选项列表。要做到这点,需要使用 optionsContainer 属性。例如:
  1. <data>
  2. <collection id="employeesCt" class="com.company.demo.entity.Employee" view="_minimal">
  3. <loader>
  4. <query><![CDATA[select e from demo_Employee e]]></query>
  5. </loader>
  6. </collection>
  7. </data>
  8. <layout>
  9. <checkBoxGroup optionsContainer="employeesCt"/>
  10. </layout>

在这种情况下,checkBoxGroup 组件将显示位于 employeesCt 数据容器中的 Employee 实体的实例名,其 getValue() 方法将返回所选实体实例。

gui CheckBoxGroup 4

使用captionProperty属性,可以指定一个实体属性作为选项的显示名称,而不是使用实例名称作为选项的显示名称。

可以使用 CheckBoxGroup 接口的 setOptions() 方法以编程方式定义选项容器:

  1. @Inject
  2. private CheckBoxGroup<Employee> checkBoxGroup;
  3. @Inject
  4. private CollectionContainer<Employee> employeesCt;
  5. @Subscribe
  6. protected void onInit(InitEvent event) {
  7. checkBoxGroup.setOptions(new ContainerOptions<>(employeesCt));
  8. }

orientation 属性定义了组元素的方向。默认情况下,元素垂直排列。设置为 horizontal 将水平排列。


CheckBoxGroup 的属性

align - box.expandRatio - caption - captionAsHtml - captionProperty - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datasource - description - descriptionAsHtml - editable - enable - height - icon - id - optionsContainer - optionsDatasource - optionsEnum - orientation - property - required - requiredMessage - responsive - rowspan - stylename - tabIndex - visible - width
API

addValueChangeListener - setContextHelpIconClickHandler - setOptions - setOptionsEnum - setOptionsList - setOptionsMap