使用Ajax从DataTable中删除单行

发布时间：2020-12-16 02:46:20 所属栏目：百科来源：网络整理

导读：我有一个JSF视图,列出了Primefaces DataTable中集合中的项目.最右边的列包含删除按钮.单击删除按钮时,应该进行Ajax调用,从会话变量Cart中删除相应的项目并就地更新视图.我希望请求和视图更改尽可能小. 以下是我为此目的所做的事情： !DOCTYPE htmlhtml xmlns

我有一个JSF视图,列出了Primefaces DataTable中集合中的项目.最右边的列包含删除按钮.单击删除按钮时,应该进行Ajax调用,从会话变量Cart中删除相应的项目并就地更新视图.我希望请求和视图更改尽可能小.

以下是我为此目的所做的事情：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Register user</title>
</h:head>

<h:body>
    <f:view>

        <h:form id="itemsForm">

            <p:outputPanel id="items">
                <p:dataTable value="#{cart.itemList}" var="item">

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="name" />
                        </f:facet>
                        <h:outputText value="#{item.product.description}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="quantity" />
                        </f:facet>
                        <h:outputText value="#{item.quantity}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="" />
                        </f:facet>
                        <p:commandButton icon="ui-icon-close" title="remove from cart">
                            <p:ajax listener="#{cart.removeItem}"
                                update="form:itemsForm"
                                process="@this" />
                        </p:commandButton>
                    </p:column>

                    <f:facet name="footer">  
                        Total amount: ${cart.totalAmount}
                    </f:facet>
                </p:dataTable>

            </p:outputPanel>
        </h:form>

    </f:view>
</h:body>
</html>

因此,我在Cart.java中有以下方法

public void removeItem() {
        System.out.println("REMOVE REQUEST ARRIVED");
}

但是,当我单击删除按钮时,removeItem方法甚至不执行.
所以我的问题是：

1)我的Ajax调用有什么问题？我应该对XHTML做出哪些更改？

2)如何在removeItem方法中处理请求并返回响应？

3)如何更新显示totalAmount的页脚？

解决方法

您可以在actionListener中将#{item}作为方法调用的参数传递.

您的.xhtml页面应如下所示：

<p:dataTable id="cartTable" value="#{cart.itemList}" var="item">
   <p:column>
      <f:facet name="header">
         <h:outputText value="" />
      </f:facet>
      <p:commandButton icon="ui-icon-close" title="remove from cart"
                       actionListener="#{cart.removeItem(item)}" update="cartTable" />
   </p:column>
</p:dataTable>

这是ManagedBean的方法removeItem：

@ManagedBean
@ViewScoped
public class Cart {
   private List<Item> itemList;

   public void removeItem(Item item) {
      itemList.remove(item);
   }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!