PanelGrid问题在jsf

Question

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

更换ui：重复为p：dataGrid。 In p：dataGrid cloumn at贡品可用。 使用它你可以显示你想要的。

<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

Answer 2

我认为你应该考虑更简单的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> 

注意我用一个简单的div取代h:panelGrid，div s为50％总宽度（目前由h:form设置，但我当然是推荐你将其更改为正确的元素。我还添加在最后一个简单的div只保留元素aligment的h:form后。