RichFaces <rich:dataGrid>

2025年3月17日 | 阅读 3 分钟

它用于在网格中排列数据。我们可以从数据模型中动态更新数据网格的数据。它还支持标题、页脚和标题 facets。

此组件在功能上类似于 JavaServer Faces <h:panelGrid>。

样式类和皮肤参数

下表包含 dataGrid 的样式类（选择器）和相应的皮肤参数。

Class	函数	皮肤参数	映射的 CSS 属性
.rf-dg	它用于定义网格的样式。	tableBackgroundColor tableBorderWidth	background-color border-left-width, border-top-width
.rf-dg-cap	它用于定义网格标题的样式。	无皮肤参数。
.rf-dg-r	它用于定义网格行的样式。	无皮肤参数。
.rf-dg-c	它用于定义网格单元格的样式。	tableBorderWidth	border-bottom-width, border-right-width
.rf-dg-nd-c	它用于定义节点单元格的样式。	tableBorderColor	border-bottom-color, border-right-color
.rf-dg-th	它用于定义网格标题部分的样式。	tableBorderColor	border-bottom-color
.rf-dg-h	它用于定义网格标题的样式。	无皮肤参数。
.rf-dg-h-f	它用于定义第一个标题的样式。	无皮肤参数。
.rf-dg-h-r	它用于定义标题行的样式。	无皮肤参数。
.rf-dg-h-c	它用于定义标题单元格的样式。	tableBorderWidth	border-bottom-width, border-right-width
.rf-dg-f	它用于定义网格页脚的样式。	无皮肤参数。
.rf-dg-f-f	它用于定义第一个页脚的样式。	无皮肤参数。
.rf-dg-f-c	它用于定义页脚单元格的样式。	tableFooterBackgroundColor tableBorderWidth	background-color border-bottom-width, border-right-width

示例

在此，在以下示例中，我们正在实现 <rich:dataGrid> 组件。此示例包含以下文件。

JSF 文件

// data-grid.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>Data Grid </title>
</h:head>
<h:body>
<h:form>
<rich:dataGrid value="#{studentRecord.records}" var="record" columns="2" elements="4" first="1">
<f:facet name="header">
<h:outputText value="Students Record"></h:outputText>
</f:facet>
<rich:panel>
<f:facet name="header">
<h:outputText value="#{record.id}"></h:outputText>
</f:facet>
<h:panelGrid columns="2">
<h:outputText value="Name:" styleClass="label"></h:outputText>
<h:outputText value="#{record.name}"/>
<h:outputText value="Email:" styleClass="label"></h:outputText>
<h:outputText value="#{record.email}"/>
<h:outputText value="Contact:" styleClass="label"></h:outputText>
<h:outputText value="#{record.contactNumber}"/>
</h:panelGrid>
</rich:panel>
<f:facet name="footer">
<rich:dataScroller></rich:dataScroller>
</f:facet>
</rich:dataGrid>
</h:form>
</h:body>
</f:view>
</ui:composition>

托管 Bean

// StudentRecord.java

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class StudentRecord {
String id;
String name;
String email;
String contactNumber;
List<StudentRecord> records;
public StudentRecord(){}
public StudentRecord(String id, String name, String email, String contactNumber) {
this.id = id;
this.name = name;
this.email = email;
this.contactNumber = contactNumber;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getContactNumber() {
return contactNumber;
}
public void setContactNumber(String contactNumber) {
this.contactNumber = contactNumber;
}
public List<StudentRecord> getRecords() {
records = new ArrayList<>();
records.add(new StudentRecord("101", "Raju", "raju@abc.com", "52534252"));
records.add(new StudentRecord("102", "Rama", "rama@abc.com", "52235252"));
records.add(new StudentRecord("103", "John", "john@abc.com", "52456252"));
records.add(new StudentRecord("104", "Peter", "peter@abc.com", "55625252"));
return records;
}
public void setRecords(List<StudentRecord> records) {
this.records = records;
}
public int getNumberOfRecords(){
return this.records.size();
}
}

输出

Next TopicRichFaces <rich:list>

← prev next →

RichFaces <rich:dataGrid>

样式类和皮肤参数

示例

JSF 文件

托管 Bean

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

RichFaces 教程

Ajax 组件

皮肤和主题

UI 组件

面试题

RichFaces <rich:dataGrid>

样式类和皮肤参数

示例

JSF 文件

托管 Bean

相关帖子

rich:notifyMessage

rich:tree

rich:toolbar

rich:dataScroller

rich:autocomplete

rich:pickList

rich:list

rich:calendar

rich:message

rich:collapsibleSubTable

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器