Группировка столбцов под одним заголовком в JSF

Эй, ребята, есть ли способ использовать JSF для группировки двух или более столбцов под одним родительским столбцом в JSF? У меня есть dataTableEx со столбцами hx:columnEx внутри него. Я хочу что-то вроде этого:

 [MAIN HEADER FOR COL1+2   ][Header for Col 3+4]

 [ COL1 Header][COL2 Header][COL3    ][COL 4   ] 

 Data          Data             Data     Data

 Data          Data             Data     Data

 Data          Data             Data     Data

 Data          Data             Data     Data

Данные данные данные

Спасибо

Источник

3 ответа

Решение

Вы можете достичь желаемого с помощью заголовка таблицы, панели Grid и небольшого количества CSS.

<style type="text/css">
.colstyle {
    width: 25%
}
</style>
</head>
<body>

<f:view>
    <h:dataTable border="1" value="#{columnsBean.rows}" var="row"
        columnClasses="colstyle">
        <f:facet name="header">
            <h:panelGrid columns="2" border="1" style="width: 100%">
                <h:outputLabel style="width: 100%" value="MAIN HEADER FOR COL1+2" />
                <h:outputLabel style="width: 100%" value="MAIN HEADER FOR COL3+4" />
            </h:panelGrid>
        </f:facet>
        <h:column>
            <f:facet name="header">
                <h:outputText value="COL1 Header" />
            </f:facet>
            <h:outputLabel value="#{row.col1}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="COL2 Header" />
            </f:facet>
            <h:outputLabel value="#{row.col2}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="COL3 Header" />
            </f:facet>
            <h:outputLabel value="#{row.col3}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="COL4 Header" />
            </f:facet>
            <h:outputLabel value="#{row.col4}" />
        </h:column>
    </h:dataTable>
</f:view>
Источник

Лучше всего использовать вложенные таблицы для первого заголовка (первый заголовок во внешней таблице, а второй заголовок и данные внутри вложенной таблицы), чтобы он выглядел как два заголовка.

Источник

Может быть, вы можете взглянуть на расширенные библиотеки компонентов, такие как RichFaces, которые предлагают более сложные структуры для таблиц данных, как в этом примере.

Источник
Другие вопросы по тегам