RichFaces rich（dataGrid用法示例） rich组件|RichFaces

本文概述

样式类和皮肤参数
例子

它用于在网格中排列数据。我们可以从数据模型动态更新datagrid的数据。它还支持页眉, 页脚和标题构面。
该组件的功能与JavaServer Faces < h：panelGrid> 相似。
样式类和皮肤参数下表包含DataGrid的样式类(选择器)和相应的外观参数。

Class	Function	皮肤参数	映射的CSS属性
.rf-dg	它用于定义网格的样式。	tableBackgroundColor tableBorderWidth	背景颜色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	边框底色, 边框右色
.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	背景颜色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="http://www.srcmini.com/#{studentRecord.records}" var="record" columns="2" elements="4" first="1"> < f:facet name="header"> < h:outputText value="http://www.srcmini.com/Students Record"> < /h:outputText> < /f:facet> < rich:panel> < f:facet name="header"> < h:outputText value="http://www.srcmini.com/#{record.id}"> < /h:outputText> < /f:facet> < h:panelGrid columns="2"> < h:outputText value="http://www.srcmini.com/Name:" styleClass="label"> < /h:outputText> < h:outputText value="http://www.srcmini.com/#{record.name}"/> < h:outputText value="http://www.srcmini.com/Email:" styleClass="label"> < /h:outputText> < h:outputText value="http://www.srcmini.com/#{record.email}"/> < h:outputText value="http://www.srcmini.com/Contact:" styleClass="label"> < /h:outputText> < h:outputText value="http://www.srcmini.com/#{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>

托管豆
【RichFaces rich（dataGrid用法示例）】// StudentRecord.java

import java.util.ArrayList; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean@RequestScopedpublic 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(); }}

输出