RichFaces <rich:tree>

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

此组件用于创建分层树。它使用 <rich:treeNode> 作为子组件。

我们可以根据我们的需求创建自定义树。RichFaces 提供了所有可用的组件来相应地创建树。

它需要 value 属性来绑定数据模型以创建树。数据模型必须是 org.richfaces.model.TreeNode 接口、org.richfaces.model.TreeDataModel 接口或 javax.swing.tree.TreeNode 接口。

样式类和皮肤参数

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

Class	函数	皮肤参数	映射的 CSS 属性
.rf-trn	它用于定义树节点的样式。	generalFamilyFont generalSizeFont	font-family font-size
.rf-trn-lbl	它用于定义树节点标签的样式。	无皮肤参数。
.rf-trn-cnt	它用于定义树节点内容的样式。	无皮肤参数。
.rf-trn-sel	它用于定义选定树节点的样式。	additionalBackgroundColor	背景
.rf-trn-ldn	它用于定义树节点加载时的样式。	additionalBackgroundColor	背景
.rf-trn-hnd	它用于定义树节点手柄的样式。	无皮肤参数。
.rf-trn-hnd-lf	它用于定义叶子节点手柄的样式。	无皮肤参数。
.rf-trn-hnd-colps	它用于定义折叠节点手柄的样式。	无皮肤参数。
.rf-trn-hnd-exp	它用于定义展开节点手柄的样式。	无皮肤参数。
.rf-trn-hnd-ldn-fct	它用于定义树节点手柄的加载方面的样式。	无皮肤参数。
.rf-trn-ico	它用于定义树节点图标的样式。	无皮肤参数。
.rf-trn-ico-lf	它用于定义叶子节点图标的样式。	无皮肤参数。
.rf-trn-ico-colps	它用于定义折叠节点图标的样式。	无皮肤参数。
.rf-trn-ico-exp	它用于定义展开节点图标的样式。	无皮肤参数。
.rf-trn-ico-cst	它用于定义自定义节点图标的样式。	无皮肤参数。

示例

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

JSF 文件

// rich-tree.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 Tree </title>
</h:head>
<h:body>
<h:form>
<rich:tree value="#{tree.rootNodes}" var="tree">
<rich:treeNode>
<h:outputText value="#{tree.data}" />
</rich:treeNode>
</rich:tree>
</h:form>
</h:body>
</f:view>
</ui:composition>

托管 Bean

// Tree.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import org.richfaces.model.TreeNodeImpl;
@ManagedBean
@RequestScoped
public class Tree extends TreeNodeImpl {
private Tree stationRoot;
private Tree rootNodes;
private Object data;

public Tree() {
super();
}
public Tree(boolean leaf, Object data) {
super(leaf);
this.data = data;
}
public Object getData() {
return data;
}
@Override
public String toString() {
return super.toString() + ">>" + data;
}
public Tree getRootNodes() {
if (rootNodes == null) {
String[] author_collection = {"Ravindra Nath Tagore - Geetanjali",
"David Bowie - Let's Dance",
"Paulo Coelho  - Alchemist",
"Kim Carnes - Bette Davis Eyes",
"KC & the Sunshine Band - Give It Up"};
stationRoot = new Tree(false, "Books Collection");
for (int i = 0; i < author_collection.length; i++) {
Tree child = new Tree(true, author_collection[i]);
stationRoot.addChild(i, child);
}
rootNodes = new Tree();
rootNodes.addChild(0, stationRoot);
}
return rootNodes;
}
}

输出

展开根树后，它将显示所有树节点，如下所示。

下一主题RichFaces <rich:dropdownmenu>

← 上一主题下一主题 →

RichFaces <rich:tree>

样式类和皮肤参数

示例

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

样式类和皮肤参数

示例

JSF 文件

托管 Bean

相关帖子

rich:pickList

rich:inplaceSelect

rich:messages

rich:editor

rich:dropDownMenu

rich:orderingList

rich:calendar

rich:autocomplete

rich:panelMenu

rich:list

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器