Question

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

由于

<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 =＆＃34; 4＆＃34; 属性，并设置 p：datatable 的宽度将解决问题。< / p>

以下是工作代码：

<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多列不起作用

1 个答案: