JSF DataTable更新示例

2018-02-22 11:13 更新

JSF教程 - JSF DataTable更新示例


以下代碼顯示如何更新DataTable。

例子

下面的代碼來自UserBean.java。

package cn.w3cschool.common;
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="book")
@SessionScoped
public class UserBean implements Serializable{
  private static final long serialVersionUID = 1L;
  private static final ArrayList<Book> bookList = 
    new ArrayList<Book>(Arrays.asList(
    new Book("1", "CSS", new BigDecimal("722.22"), 1),
    new Book("2", "HTML", new BigDecimal("533.33"), 2),
    new Book("3", "Java", new BigDecimal("11444.44"), 8),
    new Book("4", "Javascript", new BigDecimal("5255.55"), 3),
    new Book("5", "SQL",new BigDecimal("166.66"), 10)
  ));
  public ArrayList<Book> getBookList() {
    return bookList;
  }
  public String saveAction() {
    //get all existing value but set "editable" to false 
    for (Book book : bookList){
      book.setEditable(false);
    }
    //return to current page
    return null;
  }
  public String editAction(Book book) {
    book.setEditable(true);
    return null;
  }
 
  public static class Book{
    
    String bookNo;
    String productName;
    BigDecimal price;
    int qty;
    boolean editable;

    public Book(String bookNo, String productName, BigDecimal price, int qty) {
      this.bookNo = bookNo;
      this.productName = productName;
      this.price = price;
      this.qty = qty;
    }
    
    public boolean isEditable() {
      return editable;
    }
    public void setEditable(boolean editable) {
      this.editable = editable;
    }
    public String getBookNo() {
      return bookNo;
    }
    public void setBookNo(String bookNo) {
      this.bookNo = bookNo;
    }
    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;
    }
  }
}

以下代碼來自demo.xhtml。

<?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>
      
      <h1>JSF 2 dataTable example</h1>
      <h:form>
        <h:dataTable value="#{book.bookList}" var="o"
          styleClass="book-table"
          headerClass="book-table-header"
          rowClasses="book-table-odd-row,book-table-even-row"
        >

          <h:column>
          
            <f:facet name="header">Book No</f:facet>
            
            <h:inputText value="#{o.bookNo}" size="10" rendered="#{o.editable}" />
            
            <h:outputText value="#{o.bookNo}" 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="#{book.editAction(o)}" rendered="#{not o.editable}" />
            
          </h:column>

        </h:dataTable>
        
        <h:commandButton value="Save Changes" action="#{book.saveAction}" />
        
      </h:form>
    </h:body>
    
</html>

以下代碼來自table-style.css。

.book-table-header{
  bbook-bottom:1px solid #BBB;
  padding:16px;
}

.book-table-odd-row{
  bbook-top:1px solid #BBB;
}

.book-table-even-row{
  bbook-top:1px solid #BBB;
}
下載 DataTable_Update.zip

運行

將生成的WAR文件從目標文件夾復制到Tomcat部署文件夾,并運行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成啟動后,在瀏覽器地址欄中鍵入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號