使用Ajax从DataTable中删除一行 [英] Removing a single row from DataTable using Ajax
问题描述
我有一个JSF视图，该视图在Primefaces DataTable中列出了集合中的项目.最右边的列包含删除按钮.单击删除按钮后，它应该进行Ajax调用，从会话变量Cart中删除相应的项，并就地更新视图.我希望请求和视图更改尽可能小.
I have a JSF view that lists items in a collection in a Primefaces DataTable. The rightmost columns contain remove buttons. When a remove button is clicked, it is supposed to make an Ajax call, remove the corresponding item from the session variable Cart and update the view in-place. I would like the request and the view change to be as minimal as possible.
这是我为此准备的:
<!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方法.
所以我的问题是:
However, the removeItem method isn't even executing when I click a remove button.
So my questions are:
1)我的Ajax调用出了什么问题?我应该对XHTML进行哪些更改?
1) What is wrong with my Ajax call? What changes should I make to my XHTML?
2)如何使用removeItem方法处理请求并返回响应?
2) How do I handle the request in the removeItem method and return a response?
3):如何更新显示totalAmount的footer?
3) How do I update the footer, which displays the totalAmount?
推荐答案
您可以在actionListener中将#{item}作为方法调用的参数传递.
You can pass #{item} as a parameter of your method call in the actionListener.
您的.xhtml页面应如下所示:
Your .xhtml page should look like this:
<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);
}
}
这篇关于使用Ajax从DataTable中删除一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
