JSF DataTable添加删除示例
2018-09-27 15:38 更新
JSF教程 - JSF DataTable添加删除示例
JSF有一个丰富的控件，命名为DataTable来渲染和格式化html表。
使用DataTable，我们可以遍历集合或值数组以显示数据。
DataTable具有以简单的方式修改其数据的属性。
为了使用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 | 级联样式表(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 | 小区之间线路规范; 有效值:组，行，列，全部 |
| summary | 表格摘要“用于非视觉反馈的目的和结构 |
| var | 由表示当前项的数据表创建的变量名 |
| title | 用于辅助功能的标题。 浏览器通常为标题的值创建工具提示 |
| type | 链接类型; 例如样式表 |
| width | 元素的宽度 |
| onblur | 失去焦点的事件处理程序 |
| onchange | 值更改的事件处理程序 |
| onclick | 鼠标按钮的事件处理程序点击该元素 |
| ondblclick | 双击鼠标按钮的事件处理程序 |
| onfocus | 元素接收焦点的事件处理程序 |
| onkeydown | 按键的事件处理程序 |
| onkeypress | 键按下并释放的事件处理程序 |
| onkeyup | Key的事件处理程序发布 |
| 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
以上内容是否对您有帮助：
更多建议：