本文概述
- 样式类
- 例子
该表的详细部分可以折叠或展开。
< rich:collapsibleSubTable> 需要与< rich:dataTable> 组件相同的基本属性。 value属性保存集合, 而var属性指定在迭代集合时使用的变量。
样式类 【RichFaces rich(collapsibleSubTable用法示例)】下表包含collapsibleSubTable的样式类和相应的外观参数。
Class | Function | 皮肤参数 | 映射的CSS属性 |
---|---|---|---|
.rf-cst | 它用于定义表格的样式。 | 没有皮肤参数。 | |
.rf-cst-r | 它用于定义表格行的样式。 | 没有皮肤参数。 | |
.rf-cst-fst-r | 它用于定义表中第一行的样式。 | 没有皮肤参数。 | |
.rf-cst-c | 它用于定义表格单元格的样式。 | tableBackgroundColor | background-color |
.rf-cst-hdr | 它用于定义表头的样式。 | 没有皮肤参数。 | |
.rf-cst-hdr-fst | 它用于定义第一个标题的样式。 | 没有皮肤参数。 | |
.rf-cst-hdr-fst-r | 它用于定义标题中第一行的样式。 | 没有皮肤参数。 | |
.rf-cst-hdr-c | 它用于定义标题单元格的样式。 | tableSubHeaderBackgroundColo | background-color |
.rf-cst-shdr | 它用于定义表子标题的样式。 | 没有皮肤参数。 | |
.rf-cst-shdr-fst | 它用于定义第一个子标题的样式。 | 没有皮肤参数。 | |
.rf-cst-shdr-c | 它用于定义子标题单元格的样式。 | tableSubHeaderBackgroundColor | background-color |
.rf-cst-ftr | 它用于定义表格页脚的样式。 | 没有皮肤参数。 | |
.rf-cst-ftr-fst | 用于定义第一个页脚的样式。 | 没有皮肤参数。 |
JSF文件
// collapsible-data-table.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>
Rich Data Table<
/title>
<
/h:head>
<
h:body>
<
h:form>
<
rich:dataTable value="http://www.srcmini.com/#{studentRecord.records}" var="record">
<
f:facet name="header">
<
rich:columnGroup>
<
rich:column colspan="6">
<
h:outputText value="http://www.srcmini.com/Student Records" />
<
/rich:column>
<
rich:column breakRowBefore="true">
<
h:outputText value="http://www.srcmini.com/Student ID" />
<
/rich:column>
<
rich:column>
<
h:outputText value="http://www.srcmini.com/Student Name" />
<
/rich:column>
<
rich:column>
<
h:outputText value="http://www.srcmini.com/Student Email" />
<
/rich:column>
<
rich:column>
<
h:outputText value="http://www.srcmini.com/Student Contact" />
<
/rich:column>
<
/rich:columnGroup>
<
/f:facet>
<
rich:column colspan="6">
<
rich:collapsibleSubTableToggler for="sbtbl" />
<
h:outputText value="http://www.srcmini.com/#{record.id}" />
<
/rich:column>
<
rich:collapsibleSubTable value="http://www.srcmini.com/#{record.records}" var="item" id="sbtbl" expandMode="client">
<
rich:column>
<
h:outputText value="http://www.srcmini.com/#{record.id}" />
<
/rich:column>
<
rich:column>
<
h:outputText value="http://www.srcmini.com/#{record.name}" />
<
/rich:column>
<
rich:column>
<
h:outputText value="http://www.srcmini.com/#{record.email}" />
<
/rich:column>
<
rich:column>
<
h:outputText value="http://www.srcmini.com/#{record.contactNumber}" />
<
/rich:column>
<
f:facet name="footer">
<
h:outputText value="http://www.srcmini.com/Total of Student redcords: #{record.numberOfRecords}" />
<
/f:facet>
<
/rich:collapsibleSubTable>
<
/rich:dataTable>
<
/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@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();
}}
输出
文章图片
单击学生ID后, 它显示子表。
文章图片
推荐阅读
- RichFaces rich:inplaceSelect组件用法
- RichFaces rich:inplaceInput用法详解
- RichFaces rich(dropDownMenu用法示例)
- RichFaces rich(editor组件用法)
- RichFaces rich(dataTable组件)
- RichFaces rich(dataScroller用法示例)
- RichFaces rich(dataGrid用法示例)
- RichFaces rich(calendar组件用法)
- RichFaces rich(autocomplete组件用法示例)