2012-03-29 9 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がtrueの場合、ボタンをレンダリングします。

完全リフレッシュを希望しない場合は、を編集して編集可能な行を再レンダリングしてください。

<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で行うことができますどのように私を見ることができますか? –

+0

@Peter私の答えを編集しました。 –

+0

私はこの方法でコードを編集しました:http://pastebin.com/mX2g5ii3 JSFボタンにテーブルのIDを追加しました。これは正しいです? –

1

編集モードをキャンセルしたい場合は、もう一度ページを更新するだけです。他のアクションメソッドを追加する必要はありません。

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

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

     </h:column> 
関連する問題