Question

我面临一个从数据中显示数据的小问题。我正在使用ui：repeat标签，它是数据迭代器。在ui中：重复我使用嵌套的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>

这是我的代码。请看一看。

<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>

Answer 1

我认为你应该考虑更简单的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之后保留元素的对齐。

Answer 2

将ui：repeat替换为p：dataGrid。在p：dataGrid中，cloumn属性可用。使用它你可以显示你想要的东西。

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

像这样更改上面的行，

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

参考：http://www.primefaces.org/showcase/ui/dndGrid.jsf

在jsf中的PanelGrid问题

2 个答案: