Пример таблицы данных JSF 2
В JSF тег «h:dataTable» используется для отображения данных в формате таблицы HTML. В следующем примере JSF 2.0 показано, как использовать тег «h:dataTable» для перебора массива объекта «порядок» и отображения его в формате таблицы HTML.
1. Папка проекта
Структура папок проекта в этом примере.
2. Управляемый боб
Управляемый компонент с именем «order» инициализирует объект массива для последующего использования.
OrderBean.java
package com.example;
import java.io.Serializable;
import java.math.BigDecimal;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{
private static final long serialVersionUID = 1L;
private static final Order[] orderList = new Order[] {
new Order("A0001", "Intel CPU",
new BigDecimal("700.00"), 1),
new Order("A0002", "Harddisk 10TB",
new BigDecimal("500.00"), 2),
new Order("A0003", "Dell Laptop",
new BigDecimal("11600.00"), 8),
new Order("A0004", "Samsung LCD",
new BigDecimal("5200.00"), 3),
new Order("A0005", "A4Tech Mouse",
new BigDecimal("100.00"), 10)
};
public Order[] getOrderList() {
return orderList;
}
public static class Order{
String orderNo;
String productName;
BigDecimal price;
int qty;
public Order(String orderNo, String productName,
BigDecimal price, int qty) {
this.orderNo = orderNo;
this.productName = productName;
this.price = price;
this.qty = qty;
}
//getter and setter methods
}
}
3. CSS
Создайте файл CSS для стилизации макета таблицы.
table-style.css
.order-table{
border-collapse:collapse;
}
.order-table-header{
text-align:center;
background:none repeat scroll 0 0 #E5E5E5;
border-bottom:1px solid #BBBBBB;
padding:16px;
}
.order-table-odd-row{
text-align:center;
background:none repeat scroll 0 0 #FFFFFFF;
border-top:1px solid #BBBBBB;
}
.order-table-even-row{
text-align:center;
background:none repeat scroll 0 0 #F9F9F9;
border-top:1px solid #BBBBBB;
}
4. ч: DataTable
Страница JSF 2.0 xhtml, показывающая использование тега «h:dataTable» для циклического перебора массива объекта «порядок». Этот пример должен быть понятен.
default.xhtml
JSF 2 dataTable example
Order No
#{o.orderNo}
Product Name
#{o.productName}
Price
#{o.price}
Quantity
#{o.qty}
Создать этот вывод HTML
JSF 2 dataTable example
| Order No | Product Name | Price | Quantity |
|---|---|---|---|
| A0001 | Intel CPU | 700.00 | 1 |
| A0002 | Harddisk 10TB | 500.00 | 2 |
| A0003 | Dell Laptop | 11600.00 | 8 |
| A0004 | Samsung LCD | 5200.00 | 3 |
| A0005 | A4Tech Mouse | 100.00 | 10 |
