下拉列表中的 JSF 树

Question

我想在 JSF 的下拉列表中显示树状结构。基本上，选择的项目位于层次结构中，我希望这一点在下拉列表中显而易见。

是否可以 ？

Answer 1

那么，您基本上想要一个 HTML 吗？使用 SelectItemGroup。

JSF bean（我假设 JSF 1.x）：

private String option; // +getter +setter
private List<SelectItem> options; // +getter

public Bean() {
    options = new ArrayList<SelectItem>();

    SelectItemGroup group1 = new SelectItemGroup("Group 1");
    group1.setSelectItems(new SelectItem[] {
        new SelectItem("Group 1 Value 1", "Group 1 Label 1"),
        new SelectItem("Group 1 Value 2", "Group 1 Label 2"),
        new SelectItem("Group 1 Value 3", "Group 1 Label 3")
    });
    options.add(group1);

    SelectItemGroup group2 = new SelectItemGroup("Group 2");
    group2.setSelectItems(new SelectItem[] {
        new SelectItem("Group 2 Value 1", "Group 2 Label 1"),
        new SelectItem("Group 2 Value 2", "Group 2 Label 2"),
        new SelectItem("Group 2 Value 3", "Group 2 Label 3")
    });
    options.add(group2);
}

JSF 视图：

<h:selectOneMenu value="#{bean.option}">
    <f:selectItems value="#{bean.options}" />
</h:selectOneMenu>

生成的 HTML 示例：

<select name="j_idt6:j_idt7" size="1">
    <optgroup label="Group 1">
        <option value="Group 1 Value 1">Group 1 Label 1</option>
        <option value="Group 1 Value 2">Group 1 Label 2</option>
        <option value="Group 1 Value 3">Group 1 Label 3</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="Group 2 Value 1">Group 2 Label 1</option>
        <option value="Group 2 Value 2">Group 2 Label 2</option>
        <option value="Group 2 Value 3">Group 2 Label 3</option>
    </optgroup>
</select>

它在浏览器中的样子：

Answer 2

我不确定我是否明白你在问什么。假设您希望菜单中的子类别稍微缩进？
如果是这种情况，如何从服务器端/处理程序发送已经用“ ”（空格）或“-”解析的项目数组。
换句话说，你无法使用javascript来解析和理解类别层次结构。您有 2 个选择 - 要么通过 JSF 运行递归（对于需要设计页面的 UI 人员来说听起来很复杂且丑陋），要么在服务器端进行排序，为 JSF 提供已经缩进的条目。

希望这有帮助，

伊莎伊

Answer 3

但嵌套组的可视化不正确。它们显示为项目而不是组。