Question

我有一个像这样的JSF数据表：

    <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

在这个问题解决之后，我很好奇，如果我的类别中有12个以上的产品，我能为像JSF的产品分页吗？或者有更好的东西吗？我听说过曲面可以帮助我。

Answer 1

Primefaces确实可以帮到你。它具有DataGrid组件，可以完成此操作。

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

Answer 2

是的，您可以使用Primefaces。你必须在库路径中添加jar的primefaces 如果要使用MAVEN，可以在pom.xml文件中为primefaces添加依赖项。此外，如果您使用的是XHTML页面，则必须包含xmlns：p =＆＃34; 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>

JSF Datatable有两列

2 个答案: