在 JSF 中将列分组到单个标题下

发布于 2024-07-07 23:24:02 字数 432 浏览 8 评论 0原文

有没有办法使用 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

数据数据数据数据

谢谢

原文

Is there a way using JSF to group two or more columns under a single parent column in JSF? I have a dataTableEx with hx:columnEx columns inside of it. What I want is something like this:

 [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

Data Data Data Data

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执手闯天涯 2024-07-14 23:24:02

您也许可以通过表头、panelGrid 和一些 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>

You can probably achieve what you want with the table header, a panelGrid and a little 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>

回复收藏 0 原文