RichFaces <rich:collapsibleSubTable>

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

这个组件作为 <rich:dataTable> 的子元素。它迭代当前迭代对象中的子集合，以创建详细的表格。

表格的详细部分可以折叠或展开。

<rich:collapsibleSubTable> 需要与 <rich:dataTable> 组件相同的基本属性。 value 属性保存集合，var 属性指定在迭代集合时使用的变量。

样式类

下表包含 collapsibleSubTable 的样式类和相应的皮肤参数。

Class	函数	皮肤参数	映射的 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	它用于定义第一个页脚的样式。	无皮肤参数。

示例

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

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="#{studentRecord.records}" var="record">
<f:facet name="header">
<rich:columnGroup>
<rich:column colspan="6">
<h:outputText value="Student Records" />
</rich:column>
<rich:column breakRowBefore="true">
<h:outputText value="Student ID" />
</rich:column>
<rich:column>
<h:outputText value="Student Name" />
</rich:column>
<rich:column>
<h:outputText value="Student Email" />
</rich:column>
<rich:column>
<h:outputText value="Student Contact" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column colspan="6">
<rich:collapsibleSubTableToggler for="sbtbl" />
<h:outputText value="#{record.id}" />
</rich:column>
<rich:collapsibleSubTable value="#{record.records}" var="item" id="sbtbl" expandMode="client">
<rich:column>
<h:outputText value="#{record.id}" />
</rich:column>
<rich:column>
<h:outputText value="#{record.name}" />
</rich:column>
<rich:column>
<h:outputText value="#{record.email}" />
</rich:column>
<rich:column>
<h:outputText value="#{record.contactNumber}" />
</rich:column>
<f:facet name="footer">
<h:outputText value="Total of Student redcords: #{record.numberOfRecords}" />
</f:facet>
</rich:collapsibleSubTable>
</rich:dataTable>
</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();
}
}

输出

单击学生 ID 后显示子表。

下一个主题RichFaces <rich:datagrid>

← 上一个下一个 →

RichFaces <rich:collapsibleSubTable>

样式类

示例

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:collapsibleSubTable>

样式类

示例

JSF 文件

托管 Bean

相关帖子

rich:dataScroller

rich:notifyMessage

rich:dataTable

rich:list

rich:inplaceInput

rich:fileUpload

rich:dataGrid

rich:dropDownMenu

rich:editor

rich:tooltip

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器