2012-03-29 2 views
0

데이터를 표시하는 데 사용되는 JSF 테이블에서 작업하고 있습니다. JSF 테이블에 클리어 버튼을 추가하는 방법은 무엇입니까?

enter image description here

것은 내가 편집 할 수있는 JSF 페이지에있는 편집 버튼 행을 클릭합니다.

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

내가 밀어에서 편집 버튼 후에 표시되는 취소 버튼을 추가 할 :

enter image description here

는 코드입니다. 이제 테이블을 편집하기 위해 취소하려면 페이지를 새로 고침해야합니다. 어떻게이 버튼을 추가 할 수 있습니까?

답변

1

버튼으로 페이지를 새로 고침하기 만하면됩니다. GET 요청을 발생시키는 버튼인지 확인하십시오 (예 : h:button). o.editable이 true이면 단추를 렌더링합니다.

완전 새로 고침을 원하지 않으면 수정 된 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 특성이 없습니다. 당신은 아약스를 사용하기 위해서 그것들을 추가해야 할 것입니다.

+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> 
관련 문제