2011-03-27 67 views
2

我有一个JSF数据表像这样的:的JSF DataTable,两列

<h:form id="productsBox"> 
      <h:dataTable var="product" value="#{categoriesBean.category.products}" id="productsTable"> 
       <h:column id="product"> 
         <img id="img" src="C:/upload/Jellyfish_231834557726756606.jpg" /> 
         <h:outputText id="name" value=" #{product.name}" /> 
         <h:outputText id="price" value=" #{product.price}" /> 
         <h:commandButton id="addToCart" value="Add to cart" action="#{shoppingCartBean.addProduct(product)}"> 
         </h:commandButton> 
       </h:column> 
      </h:dataTable> 
      </h:dataTable> 
     </h:form> 

我不知道如何使这个表4行2列,把一个产品上每卖出,像下面的图片: enter image description here

而这个问题解决后,我很好奇,我可以做出像JSF产品分页,如果他们超过我的类别12产品?或者有更好的东西呢?我听说primefaces可以帮助我。

回答

2

Primefaces的确可以帮助你。它有这样做的DataGrid组件。

它可以让您指定一个页面上的总行数以及集合中每个项目所呈现的列数。

+0

@DaJackal:如果你打算使用Primefaces 2.0(3.0还不稳定)提防的'filter'和'的sort'功能' DataGrid组件仅适用于ISO-8859-1字符集 - 目前UTF-8字符集很容易出错。如果您正在查询UTF-8字符集,则可能必须依赖数据库的等效功能。 – ChuongPham 2011-04-14 16:10:53

0

是的,你可以使用Primefaces来做到这一点。 您必须在您的库路径中添加jar的jar或 如果您希望使用MAVEN,则可以在pom.xml文件中添加对primefaces的依赖关系。 另外,如果您使用XHTML页面,则必须包含xmlns:p =“http://primefaces.org/ui”。 因此,您现在已准备好使用primefaces组件以及jsf核心库组件。

这将是那么代码:

    <h:form id="productsBox"> 
         <p:dataTable id="productsTable" var="product" 
          value="#{categoriesBean.category.products}" 
          paginator="true" rows="10" paginatorAlwaysVisible="false" 
          paginatorPosition="bottom"> 
          <p:column> 
           <f:facet name="header"> 
            <h:outputText value="Name" /> 
           </f:facet> 
           <h:outputText id="name" value=" #{product.name}" /> 
          </p:column> 
          <p:column> 
           <f:facet name="header"> 
            <h:outputText value="Price" /> 
           </f:facet> 
           <h:outputText id="price" value=" #{product.price}" /> 
          </p:column> 
          <p:column> 
           <f:facet name="header"> 
            <h:outputText value="Action" /> 
           </f:facet> 
           <h:commandButton id="addToCart" value="Add to cart" 
            action="#{shoppingCartBean.addProduct(product)}" /> 
          </p:column> 

         </p:dataTable> 
        </h:form>