个性化阅读
专注于IT技术分析

RichFaces rich:dataScroller用法示例

本文概述

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

样式类和皮肤参数

下表包含dataScroller的样式类和相应的外观参数。

Class Function Skin Parameters 映射的CSS属性
.rf-ds 它用于定义数据滚动器的样式。 generalFamilyFont generalSizeFont font-family font-size
.rf-ds-btn 它用于定义数据滚动器中按钮的样式。 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 它用于为数据滚动器中的页码按钮定义样式。 generalTextColor generalFamilyFont 彩色字体系列
.rf-ds-press 用于在按下控件时为数据滚动条定义样式。 tableBorderColor tableBackgroundColor border-color background
.rf-ds-act 它用于定义活动数据滚动器的样式。 tableBorderColor color
.rf-ds-dis 它用于为禁用的数据滚动条定义样式。 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>

托管豆

// 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 Datascroller 1

滚动到下一步后, 它也会显示其他记录。

RichFaces Datascroller 2

赞(0) 打赏
未经允许不得转载:srcmini » RichFaces rich:dataScroller用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏