免費 AI IDE
JSF DataTable添加刪除示例
2018-09-27 15:38 更新
JSF教程 - JSF DataTable添加刪除示例
JSF有一個豐富的控件，命名為DataTable來渲染和格式化html表。
使用DataTable，我們可以遍歷集合或值數(shù)組以顯示數(shù)據。
DataTable具有以簡單的方式修改其數(shù)據的屬性。
為了使用DataTable，我們需要以下HTML頭部。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> </html>
以下JSF標記
<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標記。
<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>
標簽屬性
| 屬性 | 描述 |
|---|---|
| id | 標簽的標識 |
| dir | 文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。 |
| styleClass | 級聯(lián)樣式表(CSS)類名稱 |
| value | 組件的值，通常是值綁定 |
| bgcolor | 表的背景顏色 |
| border | 表的邊框寬度 |
| cellpadding | 表格單元周圍的填充 |
| cellspacing | 表格單元格之間的間距 |
| columnClasses | 列的CSS類的逗號分隔列表 |
| first | 表中第一行的索引 |
| footerClass | 表的頁腳的CSS類 |
| frame | 應繪制圍繞桌子的框架;有效值:none，above，below，hsides，vsides，lhs，rhs，box，border |
| headerClass | 表頭的CSS類 |
| rowClasses | 用于行的CSS類的逗號分隔列表 |
| rules | 小區(qū)之間線路規(guī)范; 有效值:組，行，列，全部 |
| summary | 表格摘要“用于非視覺反饋的目的和結構 |
| var | 由表示當前項的數(shù)據表創(chuàng)建的變量名 |
| title | 用于輔助功能的標題。 瀏覽器通常為標題的值創(chuàng)建工具提示 |
| type | 鏈接類型; 例如樣式表 |
| width | 元素的寬度 |
| onblur | 失去焦點的事件處理程序 |
| onchange | 值更改的事件處理程序 |
| onclick | 鼠標按鈕的事件處理程序點擊該元素 |
| ondblclick | 雙擊鼠標按鈕的事件處理程序 |
| onfocus | 元素接收焦點的事件處理程序 |
| onkeydown | 按鍵的事件處理程序 |
| onkeypress | 鍵按下并釋放的事件處理程序 |
| onkeyup | Key的事件處理程序發(fā)布 |
| onmousedown | 鼠標按鈕的事件處理程序 |
| onmousemove | 鼠標移動的事件處理程序 |
| onmouseout | 鼠標左的事件處理程序 |
| onmouseover | 鼠標移動到的事件處理程序 |
| onmouseup | 釋放鼠標按鈕的事件處理程序 |
例子
以下代碼來自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>
下面的代碼來自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;
}
}
}
以下代碼來自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運行
將生成的WAR文件從目標文件夾復制到Tomcat部署文件夾，并運行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成啟動后，在瀏覽器地址欄中鍵入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml
以上內容是否對您有幫助：
更多建議：