Question

我有一个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的footer？

Answer 1

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

您的.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>

这是removeItem的方法ManagedBean：

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

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

Answer 2

1）<p:commandButton uses ajax by default , so instead placing the p:ajax use the action or actionListener of the <p:commandButton

2）我会使用按钮的动作并返回null

3）update =“@ form”应该更新整个表格，这将更新整个表格

这里是我的页面中的工作按钮（链接）的示例，我使用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>

你班上的

添加这个

private Item selectedItem;

public Item getSelectedItem() {
    return selectedItem;
}


public void setSelectedItem(Item selectedItem) {
    this.selectedItem = selectedItem;
}

使用Ajax从DataTable中删除单行

2 个答案: