RichFaces rich(collapsibleSubTable用法示例)

本文概述

  • 样式类
  • 例子
此组件充当< rich:dataTable> 的子元素。它遍历当前迭代对象中的子集合以创建详细表。
该表的详细部分可以折叠或展开。
< 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 用于定义第一个页脚的样式。 没有皮肤参数。
例子 在下面的示例中, 我们正在实现< 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="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(); }}

输出
RichFaces rich(collapsibleSubTable用法示例)

文章图片
单击学生ID后, 它显示子表。
RichFaces rich(collapsibleSubTable用法示例)

文章图片

    推荐阅读