TagPicker 标签选择

在线示例

TagPicker - 标签选择器 支持将选中的值作为标签展示。该组件由 ComboBox 和 ValuesPicker 组成，因此可以有下拉列表，并支持操作。另外还可以用 TagField 处理标签。

tag picker

组件的 XML 名称：tagPicker。

数据感知的 TagPicker

如需创建关联至数据的 TagPicker，可以用 XML 的 dataContainer、property 和 optionsContainer 属性。下面例子中，我们从所有职员中选出某个特定部门的职员作为展示列表：

@JmixEntity
@Table(name = "UIEX1_DEPARTMENT")
@Entity(name = "uiex1_Department")
public class Department {
    @InstanceName
    @Column(name = "NAME")
    private String name;

    @JoinColumn(name = "PARENT_DEPT_ID")
    @ManyToOne(fetch = FetchType.LAZY)
    private Department parentDept;

    @JoinColumn(name = "MANAGER_ID")
    @ManyToOne(fetch = FetchType.LAZY)
    private Employee manager;

    @OneToMany(mappedBy = "department")
    private List<Employee> employees;
}
@JmixEntity
@Table(name = "UIEX1_EMPLOYEE")
@Entity(name = "uiex1_Employee")
public class Employee {
    @InstanceName
    @Column(name = "NAME")
    private String name;

    @OneToMany(mappedBy = "employee")
    private List<EquipmentLine> equipment;

    @JoinColumn(name = "DEPARTMENT_ID")
    @ManyToOne(fetch = FetchType.LAZY)
    private Department department;
}
<data>
    <instance id="departmentDc"
              class="ui.ex1.entity.Department">
        <fetchPlan extends="_base">
            <property name="employees" fetchPlan="_base"/>
        </fetchPlan>
        <loader/>
    </instance>
    <collection id="employeesDc"
                class="ui.ex1.entity.Employee">
        <fetchPlan extends="_base"/>
        <loader id="employeesDl">
            <query>
                <![CDATA[select e from uiex1_Employee e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <tagPicker id="employeesTagPicker"
               property="employees"
               dataContainer="departmentDc"
               optionsContainer="employeesDc">
        <actions>
            <action id="lookup" type="tag_lookup"/>
            <action id="clear" type="value_clear"/>
        </actions>
    </tagPicker>
</layout>

上面的例子中，界面为具有 employee 属性的 Department 实体定义了 departmentDc 数据容器。dataContainer 属性指向数据容器。employeesDc 中的 Employee 实体集合设置为 optionsContainer 属性，其值展示在下拉列表中。

除了 dataContainer 和 property 属性外，还可以使用 metaClass 属性，支持直接用实体类型字段无需数据容器：

<data>
    <collection id="employeesDc"
                class="ui.ex1.entity.Employee">
        <fetchPlan extends="_base"/>
        <loader id="employeesDl">
            <query>
                <![CDATA[select e from uiex1_Employee e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <tagPicker id="employeesPicker"
               metaClass="uiex1_Employee"
               optionsContainer="employeesDc">
        <actions>
            <action id="lookup" type="tag_lookup"/>
            <action id="clear" type="value_clear"/>
        </actions>
    </tagPicker>
</layout>

编程式设置选项

如果组件未与任何实体属性关联，可以在界面控制器中编程式设置下拉列表选项值：

<layout>
    <tagPicker id="dataTypeTagPicker"
               inlineTags="true"/>
</layout>
@Autowired
private TagPicker<String> dataTypeTagPicker;

@Subscribe
public void onInit(InitEvent event) {
    dataTypeTagPicker.setOptionsList(Arrays.asList(
            "Headphones", "Keyboard", "Mouse")
    );
}
tag picker 1

属性

tagPosition

设置标签相对于控件本身的位置，支持下列值：

  • BOTTOM - 默认值

    tag picker bottom

  • TOP

    tag picker top

  • LEFT

    tag picker left

  • RIGHT

    tag picker right

inlineTags

定义是否在一行显示多个标签（inlineTags=true）：

tag picker inline

纵向排列（inlineTags=false，默认值）。

tag picker bottom

hideSelectedOptions

如果用户已经选择了某个选项，此时若 hideSelectedOptions=false，则该选项可继续用于选取。默认，hideSelectedOptions=true。

操作

由于 TagPicker 是 ValuesPicker 的子类，因此可以使用其父类的所有 操作。

注意，如果没有定义任何操作，则默认会加载 ValueClearAction。

TagPickerAction

该操作仅在 TagPicker 具有数据容器或 metaClass 属性时有效。该操作与 LookupAction 类似，但使用的是 append 值，而非 set 值。

该操作的另一个功能是 multiSelect，支持多选，默认 multiSelect=true。

事件和处理器

如需使用 Jmix Studio 生成处理器的桩代码，需要在界面 XML 描述或者 Jmix UI 层级结构面板选中该组件，然后用 Jmix UI 组件面板的 Handlers 标签页生成。

或者可以使用界面控制器顶部面板的 Generate Handler 按钮。

TagPicker 有下列事件和处理器，参阅 TagField：

TagCaptionProvider

参阅 TagCaptionProvider。

TagClickListener

参阅 TagClickListener。

TagComparator

参阅 TagComparator。

TagStyleProvider

参阅 TagStyleProvider。

Validator

参阅 Validator。

TagPicker XML 属性

可以使用 Studio 界面设计器的 Jmix UI 组件面板查看和编辑组件的属性。

align - box.expandRatio - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - description - descriptionAsHtml - editable - enable - filterMode - height - hideSelectedOptions - htmlSanitizerEnabled - icon - id - inlineTags - inputPrompt - metaClass - optionsContainer - property - required - requiredMessage - responsive - rowspan - stylename - tabIndex - tagPosition - visible - width

TagPicker XML 元素

actions - formatter - validators