jsf中的PanelGrid问题

我面临一个从数据中显示数据的小问题。我正在使用ui:repeat标记，它是数据迭代器。在ui:repeat中，我使用嵌套的h:panelGrid标记来显示我的数据。比如说

<ui:repeat data iterator>
<index wise data />
</ui:repeat>

我想要以下输出

<index 1 data><index 2 data>
<index 3 data><index 4 data>
<index 5 data><index 6 data>

<index 1 data>
<index 2 data>
<index 3 data>
<index 4 data>

等等

它生成以下输出

<index 1 data><index 2 data>
<index 3 data><index 4 data>
<index 5 data><index 6 data>

<index 1 data>
<index 2 data>
<index 3 data>
<index 4 data>

这是我的密码。请看一看

<h:form id="catalog-form">
        <p:poll interval="10" update="catalog-form" /> 
            <ui:repeat  var="product" value="#{productController.bean.products}">
                <h:panelGrid  columns="2"  style="border:1px solid black;">
                    <p:graphicImage width="80" height="80" value="#{productController.content}" styleClass="rounded-corners">
                        <f:param name="id" value="#{product.productId}" />
                    </p:graphicImage>
                    <h:panelGrid columns="2"  style="border:1px solid black;">
                        <p:outputLabel value="Product Name : " />
                        <p:outputLabel  value="#{product.productName}"  />
                        <h:panelGrid columns="3"  style="border:1px solid black;">
                            <p:commandButton styleClass="btns" id="addCommentBtn" icon="a-icon" onclick="productdlg.show()"  update=":selectedProduct,:comment-form:productIdOut,:show-color-form,:show-camera-form">
                                <f:actionListener binding="#{productController.setTempProduct(product)}"/>
                                <f:actionListener binding="#{productCommentController.bean.setProductId(product.productId)}"/>
                            </p:commandButton>
                            <p:commandButton styleClass="btns" id="commentDlg" icon="comments-icon" onclick="productcmtdlg.show()"  update=":commentProduct,:show-comment-form">
                                <f:actionListener binding="#{productController.setTempProduct(product)}"/>
                            </p:commandButton>
                            <p:commandButton styleClass="btns" id="featureDlg" icon="feature-icon" onclick="productfeaturedlg.show()"  update=":featureProduct,:show-feature-form">
                                <f:actionListener binding="#{productController.setTempProduct(product)}"/>
                            </p:commandButton>
                        </h:panelGrid>
                    </h:panelGrid>
                </h:panelGrid>
            </ui:repeat>
        </h:form>

---

我认为您应该考虑更简单的HTML/CSS。有时尝试使用大量JSF标记会让一切变得复杂，但却一无所获。。。您可以轻松地将代码更改为使用浮点

div

，如下所示：

<h:form id="catalog-form" style="width: 500px;">
    <p:poll interval="10" update="catalog-form" /> 

    <ui:repeat  var="product" value="#{productController.bean.products}">
        <div style="width: 50%;float: left;border:1px solid black;">
            <p:graphicImage width="80" height="80" value="#{productController.content}" styleClass="rounded-corners">
                <f:param name="id" value="#{product.productId}" />
            </p:graphicImage>
            <h:panelGrid columns="2"  style="border:1px solid black;">
                <p:outputLabel value="Product Name : " />
                <p:outputLabel  value="#{product.productName}"  />
                <h:panelGrid columns="3"  style="border:1px solid black;">
                    <p:commandButton styleClass="btns" id="addCommentBtn" icon="a-icon" onclick="productdlg.show()"  update=":selectedProduct,:comment-form:productIdOut,:show-color-form,:show-camera-form">
                        <f:actionListener binding="#{productController.setTempProduct(product)}"/>
                        <f:actionListener binding="#{productCommentController.bean.setProductId(product.productId)}"/>
                    </p:commandButton>
                    <p:commandButton styleClass="btns" id="commentDlg" icon="comments-icon" onclick="productcmtdlg.show()"  update=":commentProduct,:show-comment-form">
                        <f:actionListener binding="#{productController.setTempProduct(product)}"/>
                    </p:commandButton>
                    <p:commandButton styleClass="btns" id="featureDlg" icon="feature-icon" onclick="productfeaturedlg.show()"  update=":featureProduct,:show-feature-form">
                        <f:actionListener binding="#{productController.setTempProduct(product)}"/>
                    </p:commandButton>
                </h:panelGrid>
            </h:panelGrid>
        </div>
    </ui:repeat>
    <div style="clear: both"></div>
</h:form>

---

注：我将

h:panelGrid

替换为一个简单的

div

，

div

s为总宽度的50%（目前由

h:form

设置，但我当然建议您将其更改为适当的元素。我还在末尾添加了一个简单的

div

，只是为了在

h:form

之后保持元素对齐，替换ui:repeat as p:dataGrid。 在p:dataGrid中，cloumn属性可用。 使用它，您可以显示您想要的内容

   <ui:repeat  var="product" value="#{productController.bean.products}">

把上面这行改成这样,

  <p:dataGrid var="product" value="#{productController.bean.products}" columns="2">  

---

参考资料：

您是否尝试过将整个内容放在另一个包含x列的panelGrid中？我还有一些其他内容，h:form用h:panelGrid包装，然后ui:repeat用h:panelGrid包装。但是所有内容都很有意思。：（非常感谢。您让我度过了美好的一天。：）