使用 Ajax 从 DataTable 中删除单行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8769964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing a single row from DataTable using Ajax
提问by Murat Derya ?zen
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 Cartand update the view in-place. I would like the request and the view change to be as minimal as possible.
我有一个 JSF 视图，它在 Primefaces 中列出集合中的项目DataTable。最右边的列包含删除按钮。当单击删除按钮时，它应该进行 Ajax 调用，从会话变量中删除相应的项目Cart并就地更新视图。我希望请求和视图更改尽可能小。
Here is what I have for this purpose:
这是我为此目的所拥有的：
<!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>
Accordingly, I have the following method in Cart.java
因此，我有以下方法 Cart.java
public void removeItem() {
System.out.println("REMOVE REQUEST ARRIVED");
}
However, the removeItemmethod isn't even executing when I click a remove button.
So my questions are:
但是，removeItem当我单击删除按钮时，该方法甚至没有执行。所以我的问题是：
1)What is wrong with my Ajax call? What changes should I make to my XHTML?
1)我的 Ajax 调用有什么问题？我应该对 XHTML 进行哪些更改？
2)How do I handle the request in the removeItemmethod and return a response?
2）如何处理removeItem方法中的请求并返回响应？
3)How do I update the footer, which displays the totalAmount?
3)如何更新footer显示 totalAmount 的 ？
回答by Mr.J4mes
You can pass #{item}as a parameter of your method call in the actionListener.
您可以#{item}在actionListener.
Your .xhtml page should look like this:
您的 .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>
And this is the method removeItemof your ManagedBean:
这是removeItem你的方法ManagedBean：
@ManagedBean
@ViewScoped
public class Cart {
private List<Item> itemList;
public void removeItem(Item item) {
itemList.remove(item);
}
}
回答by Daniel
1) <p:commandButton uses ajax by default , so instead placing the p:ajax use the action or actionListener of the <p:commandButton
1) <p:commandButton uses ajax by default , so instead placing the p:ajax use the action or actionListener of the <p:commandButton
2) I would use the action of the button and return null
2）我会使用按钮的动作并返回null
3) update="@form" should update the entire form and this will update the entire table
3) update="@form" 应该更新整个表单，这将更新整个表
here an example of a working button (link) from my page , i used the f:setPropertyActionListener to "pass" some data to the delete method
这是我页面上的工作按钮（链接）示例，我使用 f:setPropertyActionListener 将一些数据“传递”给删除方法
<p:commandButton action="#{cart.removeItem}" icon="ui-icon-close" title="remove from cart" update="@form" process="@this" >
<f:setPropertyActionListener
target="#{cart.selectedItem}"
value="#{item}" />
</p:commandButton>
in your class add this
在你的课堂上添加这个
private Item selectedItem;
public Item getSelectedItem() {
return selectedItem;
}
public void setSelectedItem(Item selectedItem) {
this.selectedItem = selectedItem;
}
