srcmini本文概述
它用于在网格中排列数据。我们可以从数据模型动态更新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="#{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>托管豆
// 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();
}
}输出
评论前必须登录！
注册