Beispiel für eine JSF 2-Datentabelle
In JSF wird das Tag "h:dataTable" verwendet, um Daten in einem HTML-Tabellenformat anzuzeigen. Das folgende JSF 2.0-Beispiel zeigt Ihnen, wie Sie mit dem Tag "h:dataTable" ein Array von "order" -Objekten durchlaufen und es in einem HTML-Tabellenformat anzeigen.
1. Projektordner
Projektordnerstruktur dieses Beispiels.
2. Managed Bean
Eine verwaltete Bean mit dem Namen "order" initialisierte das Array-Objekt für die spätere Verwendung.
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
Erstellen Sie eine CSS-Datei, um das Tabellenlayout zu gestalten.
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. h: dataTable
Eine JSF 2.0-xhtml-Seite, auf der die Verwendung des Tags "h:dataTable" zum Durchlaufen des Arrays des Objekts "order" angezeigt wird. Dieses Beispiel sollte selbsterklärend sein.
default.xhtml
JSF 2 dataTable example
Order No
#{o.orderNo}
Product Name
#{o.productName}
Price
#{o.price}
Quantity
#{o.qty}
Generieren Sie diese HTML-Ausgabe
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 |
