2012-03-29 88 views
0

我正在使用這個用於顯示數據的JSF表。如何將清除按鈕添加到JSF表中?

enter image description here

當我點擊編輯按鈕行中到JSF頁面可以編輯。

enter image description here

這是代碼:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<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:ui="http://java.sun.com/jsf/facelets" 
     > 
    <h:head> 
     <h:outputStylesheet library="css" name="table-style.css" /> 
    </h:head> 
    <h:body> 

     <h:form> 
      <h:dataTable value="#{order.orderList}" var="o" 
       styleClass="order-table" 
       headerClass="order-table-header" 
       rowClasses="order-table-odd-row,order-table-even-row" 
      > 
         <h:column> 

        <f:facet name="header">Select</f:facet> 

        <h:selectBooleanCheckbox value="#{order.selectedIds[dataItem.id]}" /> 

       </h:column> 
       <h:column> 

        <f:facet name="header">Order No</f:facet> 

        <h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" /> 

        <h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" /> 

       </h:column> 

       <h:column> 

        <f:facet name="header">Product Name</f:facet> 

        <h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}" /> 

        <h:outputText value="#{o.productName}" rendered="#{not o.editable}" /> 

       </h:column> 

       <h:column> 

        <f:facet name="header">Price</f:facet> 

        <h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" /> 

        <h:outputText value="#{o.price}" rendered="#{not o.editable}" /> 

       </h:column> 

       <h:column> 

        <f:facet name="header">Quantity</f:facet> 

        <h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}" /> 

        <h:outputText value="#{o.qty}" rendered="#{not o.editable}" /> 

       </h:column> 

       <h:column> 

        <f:facet name="header">Action</f:facet> 

        <h:commandLink value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}" /> 

       </h:column> 

      </h:dataTable> 

      <h:commandButton value="Save Changes" action="#{order.saveAction}" /> 
       <h:commandButton value="Delete" action="#{order.getSelectedItems}" /> 

     </h:form> 
    </h:body> 

</html> 


import java.io.Serializable; 
import java.math.BigDecimal; 
import java.util.Arrays; 

import java.util.HashMap; 
import java.util.Map; 
import java.util.ArrayList; 
import java.util.Iterator; 
import java.util.List; 
import javax.faces.bean.ManagedBean; 
import javax.faces.bean.SessionScoped; 

@ManagedBean(name="order") 
@SessionScoped 
public class OrderBean implements Serializable{ 

     private Map<Long, Boolean> selectedIds = new HashMap<Long, Boolean>(); 
     private List<OrderBean> selectedDataList; 
     Iterable<OrderBean> dataList = null; 

     public String getSelectedItems() { 

      // Get selected items. 
      selectedDataList = new ArrayList<OrderBean>(); 

      for (OrderBean dataItem : dataList) { 
       if (selectedIds.get(dataItem.getId()).booleanValue()) { 
        selectedDataList.add(dataItem); 
        selectedIds.remove(dataItem.getId()); // Reset. 
        /* Insert into DB SQL stetement which deletes rows by using 
         dataItem as key */ 
       } 
      } 

      return "selected"; // Navigation case. 
     } 

     public Map<Long, Boolean> getSelectedIds() { 
      return selectedIds; 
     } 

     public List<OrderBean> getSelectedDataList() { 
      return selectedDataList; 
     } 


     /* Create list with data */ 


    private static final long serialVersionUID = 1L; 

    private static final ArrayList<Order> orderList = 
     new ArrayList<Order>(Arrays.asList(

     new Order("A0001", "Intel CPU", 
       new BigDecimal("700.00"), 1), 
     new Order("A0002", "Harddisk 10TB", 
       new BigDecimal("500.00"), 2), 
     new Order("A0003", "Dell Laptop", 
       new BigDecimal("11600.00"), 8), 
     new Order("A0004", "Samsung LCD", 
       new BigDecimal("5200.00"), 3), 
     new Order("A0005", "A4Tech Mouse", 
       new BigDecimal("100.00"), 10) 
    )); 

    public ArrayList<Order> getOrderList() { 

     return orderList; 

    } 

    public String saveAction() { 

     //get all existing value but set "editable" to false 
     for (Order order : orderList){ 
      order.setEditable(false); 
     } 

     //return to current page 
     return null; 

    } 

    public String editAction(Order order) { 

     order.setEditable(true); 
     return null; 
    } 

    private Object getId() { 
     throw new UnsupportedOperationException("Not yet implemented"); 
    } 

    public static class Order{ 

     String orderNo; 
     String productName; 
     BigDecimal price; 
     int qty; 
     boolean editable; 

     public Order(String orderNo, String productName, BigDecimal price, int qty) { 
      this.orderNo = orderNo; 
      this.productName = productName; 
      this.price = price; 
      this.qty = qty; 
     } 

     public boolean isEditable() { 
      return editable; 
     } 
     public void setEditable(boolean editable) { 
      this.editable = editable; 
     } 
     public String getOrderNo() { 
      return orderNo; 
     } 
     public void setOrderNo(String orderNo) { 
      this.orderNo = orderNo; 
     } 
     public String getProductName() { 
      return productName; 
     } 
     public void setProductName(String productName) { 
      this.productName = productName; 
     } 
     public BigDecimal getPrice() { 
      return price; 
     } 
     public void setPrice(BigDecimal price) { 
      this.price = price; 
     } 
     public int getQty() { 
      return qty; 
     } 
     public void setQty(int qty) { 
      this.qty = qty; 
     } 
    } 
} 

我要添加取消其被推入的編輯按鈕後顯示的按鈕。現在如果我想取消編輯表格,我必須重新加載頁面。 我如何添加此按鈕?

回答

1

只需使用按鈕進行頁面刷新。確保它是一個觸發GET請求的按鈕,例如h:button。如果o.editable爲真,讓按鈕呈現。

或者如果您不想全面更新,請使用ajaxified h:commandButton並重新編輯可編輯的行。

<h:commandButton value="Cancel" action="#{bean.cancelAction(o)}"> 
    <f:ajax execute="@this" render="ids of your row components"> 
<h:commandButton> 

在給定的代碼中,您沒有用於outputText和inputText組件的id屬性。您將需要添加它們才能使用ajax。

+0

你能告訴我如何可以用AJAX做什麼? – 2012-03-29 16:19:19

+0

@彼得編輯我的答案。 – 2012-03-29 18:37:01

+0

我這樣編輯了代碼:http://pastebin.com/mX2g5ii3我在JSF按鈕中添加了表的id。它是否正確? – 2012-03-29 20:18:08

1

如果你想取消編輯模式,你只需再次刷新頁面。我認爲沒有必要添加另一個動作方法。

  <f:facet name="header">Action</f:facet> 

      <h:commandLink value="Edit" process="@form" update="@form" rendered="rendering option" /> 

     </h:column>