如何将Side标头添加到primefaces datagrid？

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或类似方法找到你需要覆盖的样式。