JSF dataTable示例

时间:2020-02-23 14:33:43  来源:igfitidea点击:

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获取列表,并使用 &lt;h:column>标签显示每一列。

我们使用CSS属性(例如border,cellspacing,cellpadding等)来根据需要显示表格。
<c:facet>标签用于显示列标题。

标签<h:column>代表每一列的数据,并进行迭代,直到找到特定行的标签<h:column>为止。

完成上述bean类和JSF页面后,运行应用程序.