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页面后,运行应用程序.