javascript
java jsf table_JSF数据表(h:dataTable)排序数据
JSF中有一個叫作DataTable的控件,可用來渲染和格式化html表格。使用DataTable,我們可以迭代收集或數組數組來顯示數據。下面我們來學習如何向DataTable排序數據。
要使用DataTable,我們需要添加以下HTML頭。
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
以下JSF標簽 -
styleClass="employeeTable"
headerClass="employeeTableHeader"
rowClasses="employeeTableOddRow,employeeTableEvenRow">
Name
#{employee.name}
Department
#{employee.department}
Age
#{employee.age}
Salary
#{employee.salary}
被渲染成以下HTML標簽。
NameDepartmentAgeSalary
TomMarketing102000.0RobertMarketing151000.0JSF數據表更新行數據實例
打開 NetBeans IDE 創建一個Web工程:DataTableSort,其目錄結構如下所示 -
創建以下文件代碼,文件:index.xhtml 的代碼內容如下所示 -
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
>
JSF 2 dataTable sorting example
styleClass="book-table"
headerClass="book-table-header"
rowClasses="book-table-odd-row,book-table-even-row"
>
Book No
#{o.bookNo}
Product Name
#{o.productName}
Price
#{o.price}
Quantity
#{o.qty}
文件:User.java 的代碼內容如下所示 -
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package com.yiibai;
/**
*
* @author Maxsu
*/
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "book")
@SessionScoped
public class User implements Serializable {
private static final long serialVersionUID = 1L;
private List bookArrayList;
private boolean sortAscending = true;
private static final Book[] bookList = {
new Book("1234", "Java", new BigDecimal("2303.0"), 3),
new Book("3211", "Web", new BigDecimal("4232.00"), 6),
new Book("2344", "SQL", new BigDecimal("5230.00"), 10),
new Book("5643", "CSS", new BigDecimal("11320.00"), 9),
new Book("4565", "HTML", new BigDecimal("232.00"), 20)
};
public User() {
bookArrayList = new ArrayList(Arrays.asList(bookList));
}
public List getBookList() {
return bookArrayList;
}
//sort by book no
public String sortByBookNo() {
if (sortAscending) {
//ascending book
Collections.sort(bookArrayList, new Comparator() {
@Override
public int compare(Book o1, Book o2) {
return o1.getBookNo().compareTo(o2.getBookNo());
}
});
sortAscending = false;
} else {
//descending book
Collections.sort(bookArrayList, new Comparator() {
@Override
public int compare(Book o1, Book o2) {
return o2.getBookNo().compareTo(o1.getBookNo());
}
});
sortAscending = true;
}
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;
}
右鍵運行工程:DataTableSort,如果沒有任何錯誤,打開瀏覽器訪問:
http://localhost:8084/DataTableSort/
應該會看到以下結果 -
在上圖中,您可以點擊”Book No“,就可以看到排序情況了。
¥ 我要打賞
糾錯/補充
收藏
加QQ群啦,易百教程官方技術學習群
注意:建議每個人選自己的技術方向加群,同一個QQ最多限加 3 個群。
總結
以上是生活随笔為你收集整理的java jsf table_JSF数据表(h:dataTable)排序数据的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: iview地区加载_LoadingBar
- 下一篇: extjs 表单设置html5,ExtJ