JSF dataTable示例
JSF dataTable标记用于在JSF视图页面上显示数据。
数据绑定表组件负责以表格格式显示关系数据。
<h:dataTable>标签用于显示数据组件。
<h:column>标记遍历行中显示的数据源中的每个记录。
JSF数据表
JSF dataTable标记的一些属性是;
id:用于标识组件的唯一标识符。
value:组件的当前值。
bgcolor:显示的表格的背景色。
border:要在表格周围绘制的宽度(以像素为单位)。
cellpadding:每个单元格的边框与其内容之间的空间。
cellspacing:表格左侧和最左列之间的空间,以及单元格之间的空间量。
columnClasses:CSS样式列表,以逗号分隔,以应用于此表的列。
bodyrows:应开始以逗号分隔的行索引列表,以用于" tbody"元素。
first:要显示的第一行的零或者相对行号。
frame:指定在表格周围可见的框架的代码
rows:第一个属性标识的要显示的行数。
headerClass:表标题CSS类
JSF dataTable示例
现在,让我们看一下JSF dataTable示例。
该示例将显示用户所需的移动名称,价格和数量。
创建一个名为" Mobile.java"的托管bean,以包含移动设备列表及其详细信息。
package com.theitroad.jsf.beans;
import java.util.ArrayList;
import java.util.Arrays;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "mobilerecords", eager = true)
@SessionScoped
public class Mobile {
private String companyname;
private String modelnumber;
private String color;
private int quantity;
private double price;
private static final ArrayList<Mobile> mobiles =
new ArrayList<Mobile>(
Arrays.asList(
new Mobile("Nokia", "N213", "Black", 10, 2500),
new Mobile("Micromax", "A114", "White", 25, 9500),
new Mobile("MotoG", "M345", "Grey", 40, 15300),
new Mobile("Samsung", "S-512", "Blue", 15, 11000)
));
public ArrayList<Mobile> getMobiles() {
return mobiles;
}
public Mobile() {
}
public Mobile(String companyname, String modelnumber, String color,
int quantity, double price) {
this.companyname = companyname;
this.modelnumber = modelnumber;
this.color = color;
this.quantity = quantity;
this.price = price;
}
public String getCompanyname() {
return companyname;
}
public void setCompanyname(String companyname) {
this.companyname = companyname;
}
public String getModelnumber() {
return modelnumber;
}
public void setModelnumber(String modelnumber) {
this.modelnumber = modelnumber;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public int getQuantity() {
return quantity;
}
public void setQuantity(int quantity) {
this.quantity = quantity;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
}
其中我们声明了一个名为mobiles的列表,其中包含诸如颜色,名称,价格等移动详细信息,以及所使用的各个字段的getter setter方法。
同样,构造函数被编写为这些字段设置值,并将它们插入称为" mobiles"的列表中。
现在,将JSF页面" mobiles.xhtml"创建为;
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:c="https://java.sun.com/jsf/core">
<h:head>
<title>DataTable tag Example</title>
</h:head>
<h:body>
<h3>Mobile Details</h3>
<h:form>
<h:dataTable value="#{mobilerecords.mobiles}" var="mobile" border="2"
cellspacing="1" cellpadding="1">
<h:column>
<c:facet name="header">Name</c:facet>
#{mobile.companyname}
</h:column>
<h:column>
<c:facet name="header">Model Number</c:facet>
#{mobile.modelnumber}
</h:column>
<h:column>
<c:facet name="header">Color</c:facet>
#{mobile.color}
</h:column>
<h:column>
<c:facet name="header">Quantity</c:facet>
#{mobile.quantity}
</h:column>
<h:column>
<c:facet name="header">Price</c:facet>
#{mobile.price}
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>
其中我们使用jsf dataTable标签从Mobile bean获取列表,并使用 <h:column>标签显示每一列。
我们使用CSS属性(例如border,cellspacing,cellpadding等)来根据需要显示表格。
<c:facet>标签用于显示列标题。
标签<h:column>代表每一列的数据,并进行迭代,直到找到特定行的标签<h:column>为止。
完成上述bean类和JSF页面后,运行应用程序.

