下拉列表中的JSF树 [英] JSF Tree in a dropdown

问题描述

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

是否可能？

解决方案

所以，你基本上想要一个HTML < OPTGROUP> ？使用 SelectItemGroup 。

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

  private String选项; // + getter + setter 
 private List< SelectItem>选择; // + 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查看：

< pre class =lang-html prettyprint-override> < h：selectOneMenu value =＃{bean.option}>
< f：selectItems value =＃{bean.options}/>
< / h：selectOneMenu>


生成的HTML示例：

 < select name =j_idt6：j_idt7size =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> 
  

在浏览器中的样子：

I want to display a tree like structure in my dropdown in JSF. Basically the select items are in a hierarchy and I would like that to be evident in the dropdown.

Is it possible ?

解决方案

So, you basically want a HTML <optgroup>? Use SelectItemGroup.

JSF bean (I assume 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 view:

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

Generated HTML example:

<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>

How it look like in browser:

这篇关于下拉列表中的JSF树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！