p:panelGrid 多列不起作用

Question

我想用 <p:panelGrid> 创建一个网格布局来显示一个复杂的表格，4 列，第三和第四列将合并显示一个 table。第一列将显示两个表单字段。但它不起作用。

谢谢

<p:panelGrid columns="4"  rendered="#{productController.selected != null}">
    <p:row>
        <p:column colspan="1">
            <p:panelGrid columns="2">
                <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId" />
                <p:inputText id="productId" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>
            </p:panelGrid>

            <p:panelGrid columns="2">
                <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId11" />
                <p:inputText id="productId11" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>
            </p:panelGrid>
        </p:column>

        <!-- second column -->
        <p:column colspan="1">
            <p:panelGrid columns="2">
                <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId1" />
                <p:inputText id="productId1" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>

            </p:panelGrid>
        </p:column>

        <!-- third, fourth column -->
        <p:column colspan="2">
            <p:dataTable var="car" value="#{dtBasicView.cars}">
                <p:column headerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>

                <p:column headerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>

                <p:column headerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>
            </p:dataTable>
        </p:column>
    </p:row>
</p:panelGrid>

Answer 1

删除最外层 <p:panelGrid> 中的 columns="4" 属性并设置 p:datatable 的宽度将修复问题。

以下是工作代码：

<p:panelGrid rendered="#{productController.selected != null}">
  <p:row>
    <p:column colspan="1">
        <p:panelGrid columns="2">
            <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId" />
            <p:inputText id="productId" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>
        </p:panelGrid>

        <p:panelGrid columns="2">
            <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId11" />
            <p:inputText id="productId11" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>
        </p:panelGrid>
    </p:column>

    <!-- second column -->
    <p:column colspan="1">
        <p:panelGrid columns="2">
            <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId1" />
            <p:inputText id="productId1" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>

        </p:panelGrid>
    </p:column>

    <!-- third, fourth column -->
    <p:column colspan="2">
        <p:dataTable var="car" value="#{dtBasicView.cars}" style="width:300px;">
            <p:column headerText="Id">
                <h:outputText value="#{car.id}" />
            </p:column>

            <p:column headerText="Year">
                <h:outputText value="#{car.year}" />
            </p:column>

            <p:column headerText="Brand">
                <h:outputText value="#{car.brand}" />
            </p:column>
        </p:dataTable>
    </p:column>
  </p:row>
</p:panelGrid>

p:panelGrid 多列不起作用

p:panelGrid multiple columns don't work

jsf

primefaces

p:panelGrid 多列不起​​作用

p:panelGrid multiple columns don't work

jsf

primefaces

p:panelGrid 多列不起作用