JSF DataTable添加刪除示例

2018-09-27 15:38 更新

JSF教程 - JSF DataTable添加刪除示例


JSF有一個(gè)豐富的控件，命名為DataTable來(lái)渲染和格式化html表。

使用DataTable，我們可以遍歷集合或值數(shù)組以顯示數(shù)據(jù)。

DataTable具有以簡(jiǎn)單的方式修改其數(shù)據(jù)的屬性。

為了使用DataTable，我們需要以下HTML頭部。

<html 
   xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html">
</html>

以下JSF標(biāo)記

<h:dataTable value="#{userData.employees}" var="employee"
   styleClass="employeeTable"
   headerClass="employeeTableHeader"
   rowClasses="employeeTableOddRow,employeeTableEvenRow">
   <h:column>            
      <f:facet name="header">Name</f:facet>            
      #{employee.name}
   </h:column>
   <h:column>
      <f:facet name="header">Department</f:facet>
      #{employee.department}
   </h:column>
   <h:column>
      <f:facet name="header">Age</f:facet>
      #{employee.age}
   </h:column>
   <h:column>
      <f:facet name="header">Salary</f:facet>
      #{employee.salary}
   </h:column>
</h:dataTable>

將渲染為以下HTML標(biāo)記。

<table class="employeeTable">
<thead><tr>
   <th class="employeeTableHeader" scope="col">Name</th>
   <th class="employeeTableHeader" scope="col">Department</th>
   <th class="employeeTableHeader" scope="col">Age</th>
   <th class="employeeTableHeader" scope="col">Salary</th>
</tr></thead>
<tbody>
<tr class="employeeTableOddRow">
   <td>Tom</td>
   <td>Marketing</td>
   <td>10</td>
   <td>2000.0</td>
</tr>
<tr class="employeeTableEvenRow">
   <td>Robert</td>
   <td>Marketing</td>
   <td>15</td>
   <td>1000.0</td>
</tr>
</table>

標(biāo)簽屬性

屬性描述
id標(biāo)簽的標(biāo)識(shí)
dir文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。
styleClass級(jí)聯(lián)樣式表(CSS)類名稱
value組件的值，通常是值綁定
bgcolor表的背景顏色
border表的邊框?qū)挾?/td>
cellpadding表格單元周圍的填充
cellspacing表格單元格之間的間距
columnClasses列的CSS類的逗號(hào)分隔列表
first表中第一行的索引
footerClass表的頁(yè)腳的CSS類
frame應(yīng)繪制圍繞桌子的框架;有效值:none，above，below，hsides，vsides，lhs，rhs，box，border
headerClass表頭的CSS類
rowClasses用于行的CSS類的逗號(hào)分隔列表
rules小區(qū)之間線路規(guī)范; 有效值:組，行，列，全部
summary表格摘要“用于非視覺(jué)反饋的目的和結(jié)構(gòu)
var由表示當(dāng)前項(xiàng)的數(shù)據(jù)表創(chuàng)建的變量名
title用于輔助功能的標(biāo)題。 瀏覽器通常為標(biāo)題的值創(chuàng)建工具提示
type鏈接類型; 例如樣式表
width元素的寬度
onblur失去焦點(diǎn)的事件處理程序
onchange值更改的事件處理程序
onclick鼠標(biāo)按鈕的事件處理程序點(diǎn)擊該元素
ondblclick雙擊鼠標(biāo)按鈕的事件處理程序
onfocus元素接收焦點(diǎn)的事件處理程序
onkeydown按鍵的事件處理程序
onkeypress鍵按下并釋放的事件處理程序
onkeyupKey的事件處理程序發(fā)布
onmousedown鼠標(biāo)按鈕的事件處理程序
onmousemove鼠標(biāo)移動(dòng)的事件處理程序
onmouseout鼠標(biāo)左的事件處理程序
onmouseover鼠標(biāo)移動(dòng)到的事件處理程序
onmouseup釋放鼠標(biāo)按鈕的事件處理程序

例子

以下代碼來(lái)自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>
      <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>#{o.bookNo}
          </h:column>
          <h:column>
            <f:facet name="header">Product Name</f:facet>#{o.productName}
          </h:column>
          <h:column>
            <f:facet name="header">Price</f:facet>#{o.price}
          </h:column>
          <h:column>
            <f:facet name="header">Quantity</f:facet>#{o.qty}
          </h:column>
          <h:column>
            <f:facet name="header">Action</f:facet>
            <h:commandLink value="Delete" action="#{book.deleteAction(o)}" />
          </h:column>
        </h:dataTable>
        <h3>Enter Book</h3>
        <table>
        <tr>
          <td>Book No :</td>
          <td><h:inputText size="20" value="#{book.bookNo}" /></td>
        </tr>
        <tr>
          <td>Product Name :</td>
          <td><h:inputText size="20" value="#{book.productName}" /></td>
        </tr>
        <tr>
          <td>Quantity :</td>
          <td><h:inputText size="20" value="#{book.price}" /></td>
        </tr>
        <tr>
          <td>Price :</td>
          <td><h:inputText size="20" value="#{book.qty}" /></td>
        </tr>
        </table>
        <h:commandButton value="Add" action="#{book.addAction}" />
      </h:form>
    </h:body>
</html>

下面的代碼來(lái)自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;
  String bookNo;
  String productName;
  BigDecimal price;
  int qty;
  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;
  }

  private static final ArrayList<Book> bookList = 
    new ArrayList<Book>(Arrays.asList(
    
    new Book("1", "CSS", new BigDecimal("123.12"), 1),
    new Book("2", "HTML", new BigDecimal("321.12"), 2),
    new Book("3", "SQL", new BigDecimal("12333.33"), 8),
    new Book("4", "Javascript", new BigDecimal("1233.33"), 3),
    new Book("5", "Web", new BigDecimal("123.22"), 10)
  ));
   
  public ArrayList<Book> getBookList() {
    return bookList;
  }
  public String addAction() {
    Book book = new Book(this.bookNo, this.productName, 
      this.price, this.qty);
    bookList.add(book);
    return null;
  }
  public String deleteAction(Book book) {
      
    bookList.remove(book);
    return null;
  }

    public static class Book{
      
      String bookNo;
      String productName;
      BigDecimal price;
      int qty;
    
      public Book(String bookNo, String productName, 
          BigDecimal price, int qty) {
        this.bookNo = bookNo;
        this.productName = productName;
        this.price = price;
        this.qty = qty;
      }
      
      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;
      }
    }

}

以下代碼來(lái)自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_Add_Delete.zip

運(yùn)行

將生成的WAR文件從目標(biāo)文件夾復(fù)制到Tomcat部署文件夾，并運(yùn)行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成啟動(dòng)后，在瀏覽器地址欄中鍵入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)