RichFaces <rich:dataScroller>

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

该组件用于浏览表中的多个页面。它必须放置在表的 facet 中。我们也可以使用 for 属性将父表绑定到滚动条。需要指定每页的行数限制。

样式类和皮肤参数

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

Class	函数	皮肤参数	映射的 CSS 属性
.rf-ds	用于定义 data scroller 的样式。	generalFamilyFont generalSizeFont	font-family font-size
.rf-ds-btn	用于定义 data scroller 中按钮的样式。	generalFamilyFont generalSizeFont	font-family font-size
.rf-ds-btn-first	用于定义第一个按钮的样式。	无皮肤参数。
.rf-ds-btn-fastrwd	用于定义快速倒退按钮的样式。	无皮肤参数。
.rf-ds-btn-prev	用于定义上一个按钮的样式。	无皮肤参数。
.rf-ds-btn-next	用于定义下一个按钮的样式。	无皮肤参数。
.rf-ds-btn-fastfwd	用于定义快速前进按钮的样式。	无皮肤参数。
.rf-ds-btn-last	用于定义最后一个按钮的样式。	无皮肤参数。
.rf-ds-nmb-btn	用于定义 data scroller 中页码按钮的样式。	generalTextColor generalFamilyFont	颜色字体系列
.rf-ds-press	用于定义按下控件时 data scroller 的样式。	tableBorderColor tableBackgroundColor	border-color background
.rf-ds-act	用于定义活动 data scroller 的样式。	tableBorderColor	color
.rf-ds-dis	用于定义禁用 data scroller 的样式。	tableBorderColor	color

示例

这里，在下面的示例中，我们实现了 <rich:dataScroller> 组件。此示例包含以下文件。

JSF 文件

// data-scroller.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>Scrollable Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:dataTable value="#{studentRecord.records}" var="student" rows="2" id="student-table">
<f:facet name="header">
<h:outputText value="Student Records" />
</f:facet>
<rich:column>
<f:facet name="header">Student ID</f:facet>
<h:outputText value="#{student.id}"/>
</rich:column>
<rich:column>
<f:facet name="header">Student Name</f:facet>
<h:outputText value="#{student.name}"/>
</rich:column>
<rich:column >
<f:facet name="header">Student Email</f:facet>
<h:outputText value="#{student.email}"/>
</rich:column>
<rich:column>
<f:facet name="header">Student Contact</f:facet>
<h:outputText value="#{student.contactNumber}"/>
</rich:column>
</rich:dataTable>
<rich:dataScroller for="student-table" maxPages="5">
<f:facet name="first">
<h:outputText value="First" />
</f:facet>
<f:facet name="last">
<h:outputText value="Last" />
</f:facet>
</rich:dataScroller>
</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();
}
}

输出

滚动到下一个之后，它也会显示其他记录。

下一个主题RichFaces <rich:tree>

← 上一个下一个 →

RichFaces <rich:dataScroller>

样式类和皮肤参数

示例

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

样式类和皮肤参数

示例

JSF 文件

托管 Bean

相关帖子

rich:dropDownMenu

rich:inplaceInput

rich:toolbar

rich:inputNumberSpinner

rich:select

rich:message

rich:fileUpload

rich:orderingList

rich:dataTable

rich:editor

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器