2011-03-27 78 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>