Удаление одной строки из DataTable с помощью Ajax - PullRequest
Новая
       12

Удаление одной строки из DataTable с помощью Ajax

3 голосов
/ 07 января 2012

У меня есть представление 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) Как обновить footer, в котором отображается общая сумма?

Ответы [ 2 ]

17 голосов
/ 07 января 2012

Вы можете передать #{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);
   }
}
2 голосов
/ 07 января 2012

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

2) Я бы использовал действие кнопки и вернул ноль

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;
}
...