如何将 Side 标头添加到 primefaces 数据网格？

Question

我正在尝试使用 primefaces 创建以下数据网格

请任何人建议哪个数据组件可以工作以获得上表。

Answer 1

您可以使用具有自己样式的 panelGrid：

        <p:panelGrid>
            <f:facet name="header">
                <p:row>
                    <p:column>HEADING1</p:column>
                    <p:column>HEADING2</p:column>
                    <p:column>HEADING3</p:column>
                    <p:column>HEADING4</p:column>
                    <p:column>HEADING5</p:column>
                    <p:column>HEADING6</p:column>
                    <p:column>HEADING7</p:column>
                    <p:column>HEADING8</p:column>
                </p:row>
            </f:facet>
            <p:row>
                <p:column styleClass="firstcolumn">TITLE1</p:column>
                <p:column/> <p:column/><p:column/><p:column/><p:column/><p:column/><p:column/>
            </p:row>
            <p:row>
                <p:column styleClass="firstcolumn">TITLE2</p:column>
                <p:column/><p:column/><p:column/><p:column/><p:column/><p:column/><p:column/>
            </p:row>
            <p:row>
                <p:column styleClass="firstcolumn">TITLE3</p:column>
                <p:column/><p:column/><p:column/><p:column/><p:column/><p:column/><p:column/>
            </p:row>
        </p:panelGrid>

 

        <style>
        .ui-panelgrid-even, .ui-panelgrid-odd{
            border: 1px solid #ffffff;
            background:#88B147; 
        }
        .ui-panelgrid-header .ui-widget-header{
            background: #0C52CB;
            font-weight: normal;
            border: 1px solid #ffffff;
        }
        .ui-panelgrid .firstcolumn{
            background: #8BC1FF;
            color: #000000;
        }
        </style>

如果您要显示 bean 列表中的数据，那么使用 dataTable 可能更合适。但是你也可以设置样式，使用 firebug 或类似工具来找到你需要覆盖的样式。