jsf服务_JSF dataTable示例

jsf服务

JSF dataTable tag is used to display data on JSF view pages. The data bound table components are responsible for displaying the relational data in a tabular format. The <h:dataTable> tag is used for displaying the data components. The <h:column> tag iterates over each record in the data source displayed in rows.

JSF dataTable标记用于在JSF视图页面上显示数据。 数据绑定表组件负责以表格格式显示关系数据。 <h:dataTable>标记用于显示数据组件。 <h：column>标记遍历行中显示的数据源中的每个记录。

JSF数据表 (JSF dataTable)

Some of the attributes of JSF dataTable tag are;

JSF dataTable标记的一些属性是；

1. id: unique identifier used to identify a component.
   id ：用于标识组件的唯一标识符。
2. value: The current value of the component.
   value ：组件的当前值。
3. bgcolor: background color for the table that is displayed.
   bgcolor ：显示的表格的背景色。
4. border: width in pixel to be drawn around the table.
   border ：要在表格周围绘制的宽度（以像素为单位）。
5. cellpadding: Space between border of each cell and its contents.
   cellpadding ：每个单元格的边框与其内容之间的空间。
6. cellspacing: Space between left side of the table and leftmost column and also amount of space between the cells.
   cellspacing ：表格左侧和最左列之间的空间，以及单元格之间的空间量。
7. columnClasses: List of css styles separated by comma to be applied to the columns of this table.
   columnClasses ：将以逗号分隔CSS样式列表，以应用于此表的列。
8. bodyrows: List of row indices separated by comma to be applied for the “tbody” element should be started.
   bodyrows ：应该开始使用逗号分隔的行索引列表，以用于“ tbody”元素。
9. first: zero or relative row number of the first row to be displayed.
   first ：要显示的第一行的零或相对行号。
10. frame: code that specifies the frame to be visible around the table
    frame ：指定在表格周围可见的框架的代码
11. rows: Number of rows to be displayed identified by first property.
    rows ：第一个属性标识的要显示的行数。
12. headerClass: CSS class for the table header
    headerClass ：表头CSS类

JSF dataTable示例 (JSF dataTable Example)

Now let’s look at the JSF dataTable example.

现在，让我们看一下JSF dataTable示例。

The example is to display the mobile company name, price and quantity needed by the user.

该示例将显示用户所需的移动公司名称，价格和数量。

Create a managed bean named Mobile.java to contain a list of mobiles along with their details.

创建一个名为Mobile.java的托管bean，以包含移动设备列表及其详细信息。

package com.journaldev.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;
	}

}

Here we have declared a list called mobiles which contains mobile details like color, company name, price etc. and the getter setter methods for various fields used. Also, the constructors are written to set values for the fields and insert them into the list called “mobiles”.

在这里，我们声明了一个名为mobiles的列表，其中包含诸如颜色，公司名称，价格等移动详细信息，以及所使用的各个字段的getter setter方法。 同样，构造函数被编写为这些字段设置值，并将它们插入称为“ mobiles”的列表中。

Now create the JSF page mobiles.xhtml as;

现在，将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>

Here we use the jsf dataTable tag to fetch the list from the Mobile bean and display each column using <h:column> tag.

在这里，我们使用jsf dataTable标记从Mobile bean获取列表，并使用<h:column>标记显示每一列。

We use css properties like border, cellspacing, cellpadding etc. to display the table as we want. The <c:facet> tag is used to display the column headers.

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

The <h:column> tag represents the data for each column and iterates until it finds the <h:column> tag for a particular row.

<h:column>标记表示每一列的数据，并进行迭代，直到找到特定行的<h：column>标记。

Once done with the above said bean class and JSF page, run the application and it should display the following output.

完成上述bean类和JSF页面后，运行应用程序，它应显示以下输出。

Below image shows the final JSF dataTable example project structure in Eclipse.

下图显示了Eclipse中最终的JSF dataTable示例项目结构。

You can download the final JSF dataTable project from below link to learn more.

您可以从下面的链接下载最终的JSF dataTable项目，以了解更多信息。

Download JSF dataTable Example Project 下载JSF dataTable示例项目

翻译自: https://www.journaldev.com/6985/jsf-datatable-example

jsf服务