java - tutorial - JSF Tree en un menú desplegable

selectonemenu jsf tutorial

Question

Quiero mostrar una estructura tipo árbol en mi menú desplegable en JSF. Básicamente, los elementos seleccionados están en una jerarquía y me gustaría que sea evidente en el menú desplegable.

Es posible ?

Answer 1

Entonces, ¿básicamente quieres un HTML <optgroup> ? Use SelectItemGroup .

Bean JSF (supongo 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);
}

Vista JSF:

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

Ejemplo HTML generado:

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

Cómo se ve en el navegador:

Answer 2

No estoy seguro de entender lo que estás preguntando. ¿Asumiendo que quiere que las subcategorías en el menú tengan una sangría leve? Si ese es el caso, ¿qué tal si enviamos desde el servidor / manejador la matriz de elementos ya analizados con un "& nbsp" (espacio) o con un "-".
En otras palabras, no puede usar javascript para analizar y comprender la jerarquía de categorías. Tiene 2 opciones: ejecutar la recursión vía JSF (suena complicado y feo para la persona de UI que necesita diseñar la página), o hacer la clasificación por el lado del servidor, proporcionando al JSF entradas bastante sangradas.

Espero que esto ayude,

Yishai

Answer 3

Pero los grupos anidados no se visualizan correctamente. Aparecen como un elemento no como un grupo.