primefaces教程_Primefaces树，TreeNode，TreeTable示例教程

primefaces教程

For displaying hierarchical data and create site navigation, Primefaces provides you Tree & TreeTable components. Leveraging these components aren’t so easy and it needs a lot of technical details. Some of those technical issues are covered randomly along spread published technical documents on the internet while others aren’t. This tutorial intended to provide you full explanations of how you can benefit from these components.

为了显示分层数据并创建站点导航，Primefaces为您提供了Tree和TreeTable组件。 利用这些组件并非易事，它需要大量技术细节。 这些技术问题中的一些是随互联网上已发布的技术文档随机涵盖的，而其他则不是。 本教程旨在为您提供有关如何从这些组件中受益的完整说明。

Primefaces树基本信息 (Primefaces Tree Basic Info)

Info	Tree
Component Class	org.primefaces.component.tree.Tree
Component Type	org.primefaces.component.Tree
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.TreeRenderer
Renderer Class	org.primefaces.component.tree.TreeRenderer

信息	树
组件类别	org.primefaces.component.tree.Tree
组件类型	org.primefaces.component.Tree
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.TreeRenderer
渲染器类	org.primefaces.component.tree.TreeRenderer

Primefaces树属性 (Primefaces Tree Attributes)

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
widgetVar	null	String	Name of the client side widget
value	null	Object	A TreeNode instance as the backing model
var	null	String	Name of the request-scoped variable that’ll be usedto refer each treenode data.
dynamic	false	Boolean	Specifies the ajax/client toggleMode
cache	true	Boolean	Specifies caching on dynamically loaded nodes.When set to true expanded nodes will be kept in memory.
onNodeClick	null	String	Javascript event to process when a tree node isclicked.
selection	null	Object	TreeNode array to reference the selections.
style	null	String	Style of the main container element of tree
styleClass	null	String	Style class of the main container element of tree
selectionMode	null	String	Defines the selectionMode
highlight	true	Boolean	Highlights nodes on hover when selection is enabled.
datakey	null	Object	Unique key of the data presented by nodes.
animate	false	Boolean	When enabled, displays slide effect on toggle.
orientation	vertical	String	Orientation of layout, vertical or horizontal.
propagateSelectionUp	true	Boolean	Defines upwards selection propagation forcheckbox mode.
propagateSelectionDown	true	Boolean	Defines downwards selection propagation forcheckbox mode.
dir	ltr	String	Defines text direction, valid values are ltr and rtl.
draggable	false	Boolean	Makes tree nodes draggable.
droppable	false	Boolean	Makes tree droppable.
dragdropScope	null	String	Scope key to group a set of tree components fortransferring nodes using drag and drop.
dragMode	self	String	Defines parent-child relationship when a node isdragged, valid values are self (default), parent andancestor.
dropRestrict	none	String	Defines parent-child restrictions when a node isdropped valid values are none (default) and sibling.
required	false	Boolean	Validation constraint for selection.
requiredMessage	null	String	Message for required selection validation.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件
捆绑	空值	目的	El表达式，它映射到支持Bean中的服务器端UIComponent实例
widgetVar	空值	串	客户端小部件的名称
值	空值	目的	一个TreeNode实例作为支持模型
变种	空值	串	请求范围变量的名称，该变量将用于引用每个treenode数据。
动态	假	布尔型	指定ajax / client toggleMode
快取	真正	布尔型	在动态加载的节点上指定缓存。设置为true时，扩展的节点将保留在内存中。
onNodeClick	空值	串	单击树节点时要处理的Javascript事件。
选择	空值	目的	TreeNode数组引用选择。
样式	空值	串	树的主要容器元素的样式
styleClass	空值	串	树的主要容器元素的样式类
selectionMode	空值	串	定义selectionMode
突出	真正	布尔型	启用选择后，突出显示悬停时的节点。
数据键	空值	目的	节点显示的数据的唯一键。
动画	假	布尔型	启用后，在切换时显示幻灯片效果。
方向	垂直	串	布局方向，垂直或水平。
broadcastSelectionUp	真正	布尔型	为复选框模式定义向上的选择传播。
broadcastSelectionDown	真正	布尔型	为复选框模式定义向下的选择传播。
目录	ltr	串	定义文本方向，有效值为ltr和rtl。
可拖动的	假	布尔型	使树节点可拖动。
可滴	假	布尔型	使树可放置。
dragdropScope	空值	串	范围键可对一组树组件进行分组，以使用拖放功能来传输节点。
dragMode	自	串	定义节点被拖动时的父子关系，有效值为self（默认值），parent andancestor。
dropRestrict	没有	串	定义删除节点时的父子限制，有效值为none（默认）和同级。
需要	假	布尔型	选择的验证约束。
requiredMessage	空值	串	要求选择确认的消息。

Primefaces树入门 (Getting Started with Primefaces Tree)

Tree is populated with an org.primefaces.model.TreeNode instance which corresponds to the root. Following below simple example that you may develop in which a Tree component had used.

用与根相对应的org.primefaces.model.TreeNode实例填充树。 在下面的简单示例中，您可能会开发使用树组件的示例。

index.xhtml code:

index.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node">
		<p:treeNode>
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create child node
		TreeNode child = new DefaultTreeNode("Child Node", this.root);
		// Reference the parent of child node
		child.setParent(this.root);
		// Create descendent nodes
		TreeNode descendent = new DefaultTreeNode("Descendent Node", child);
		// Reference the parent of descendent node
		descendent.setParent(child);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
}

Here are additional explanations beside those commented above:

除上述注释外，还有其他说明：

• Tree component has associated with a TreeNode instance called root.
  树组件与名为root的TreeNode实例相关联。
• Root instance has also a child as a TreeNode instance which also refers its child.
  根实例还有一个子节点，作为TreeNode实例，它也引用了它的子节点。
• This hierarchical view is displayed by referencing the root node directly using value attribute.
  通过直接使用值属性引用根节点来显示此分层视图。
• Attributue var has used by the Tree component for referencing the Request-Scoped variable that’ll be used to refer each treenode data.
  Tree组件使用Attributue var来引用Request-Scoped变量，该变量将用于引用每个treenode数据。
• Each TreeNode has been created by passing two arguments; encapsulated data object instance and parent reference.
  每个TreeNode都是通过传递两个参数创建的； 封装的数据对象实例和父引用。
• Properties of every TreeNode are: type, data, children, parent and expanded boolean indicator. All of those properties has to be explored in the next coming sections.
  每个TreeNode的属性是：类型，数据，子级，父级和扩展的布尔值指示器。 所有这些属性都必须在接下来的部分中进行探讨。

Primefaces动态树 (Primefaces Dynamic Tree)

Tree component isn’t dynamic by default, dynamic mode uses ajax to fetch the tree nodes from the server side on demand. When node is expanded, tree loads the children of the particular expanded node and send to the client for display. Unlike what is happened originally, when toggling is set to client all the tree nodes in model are rendered to the client and tree is created. For large scale of data the dynamic mode is suitable than using the default behavior. Following below the way in which dynamic attribute can be identified.

默认情况下，树组件不是动态的，动态模式使用ajax根据需要从服务器端获取树节点。 扩展节点时，树将加载特定扩展节点的子级，然后发送到客户端进行显示。 与最初发生的情况不同，将切换设置为客户端时，会将模型中的所有树节点呈现给客户端并创建树。 对于大规模数据，动态模式比使用默认行为更合适。 下面按照以下方法可以识别动态属性。

index.xhtml code:

index.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true">
		<p:treeNode>
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>

Primefaces多种TreeNode类型 (Primefaces Multiple TreeNode Types)

It’s a common requirement that you want different TreeNode types and icons inside your hierarchy. For implementing this, you should follow below simple steps:

通常需要在层次结构中使用不同的TreeNode类型和图标。 为此，您应该遵循以下简单步骤：

• Define/Place more than one <p:treeNode/> components, each having a different type.
  定义/放置多个<p：treeNode />组件，每个组件具有不同的类型。
• Use that defined type to bind TreeNodes in your model.
  使用该定义的类型绑定模型中的TreeNodes。

Following below simple example demonstration for using different TreeNode for showing that type varieties. The files have affected by are both files index.xhtml view and TreeManagedBean.java.

下面是使用不同TreeNode显示该类型变体的简单示例演示。 这些文件都受到文件index.xhtml view和TreeManagedBean.java的影响 。

index.xhtml code:

index.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
}

As obvious from provided demo, the integration between TreeNode instance and p:treeNode component is the type attribute.

从提供的演示中可以明显看出，TreeNode实例与p：treeNode组件之间的集成是type属性。

Primefaces树Ajax行为事件 (Primefaces Tree Ajax Behavior Events)

Tree provides various ajax behavior events:

Tree提供了各种ajax行为事件：

Event	Listener Parameter	Fired
expand	org.primefaces.event.NodeExpandEvent	When a node is expanded.
collapse	org.primefaces.event.NodeCollapseEvent	When a node is collapsed.
select	org.primefaces.event.NodeSelectEvent	When a node is selected.
unselect	org.primefaces.event.NodeUnselectEvent	When a node is unselected.

事件	侦听器参数	被解雇
扩大	org.primefaces.event.NodeExpandEvent	扩展节点时。
坍方	org.primefaces.event.NodeCollapseEvent	节点折叠时。
选择	org.primefaces.event.NodeSelectEvent	选择节点时。
取消选择	org.primefaces.event.NodeUnselectEvent	取消选择节点时。

Following tree has three listeners:

以下树具有三个侦听器：

index2.xhtml code:

index2.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

	public void onNodeSelect(NodeSelectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Selected");
	}

	public void onNodeUnSelect(NodeUnselectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: UnSelected");
	}

	public void onNodeExpand(NodeExpandEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Expanded");
	}

	public void onNodeCollapse(NodeCollapseEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Collapsed");
	}
}

• Once you’ve expanded TreeNode, an Ajax event has fired.
  扩展TreeNode后，将触发Ajax事件。
• For each fired event, an ajax listener method has defined for handling purposes.
  对于每个触发的事件，已定义了一个ajax侦听器方法以进行处理。
• Event listeners are also useful when dealing with a huge amount of data. That is by providing the root and child nodes to the tree, use event listeners to get the selected node and add new nodes to that particular tree at runtime.
  在处理大量数据时，事件侦听器也很有用。 也就是说，通过为树提供根节点和子节点，使用事件侦听器来获取选定的节点，并在运行时将新节点添加到该特定树中。
• Select and UnSelect events haven’t produced now, issuing these events required SelectionMode to be set.
  Select和UnSelect事件现在尚未产生，发出这些事件需要设置SelectionMode 。

Primefaces树选择和SelectionMode (Primefaces Tree Selection & SelectionMode)

Tree component provides a built-in functionality that help you identify those selected nodes. Node selection mechanism supports three modes, for each provided mode a TreeNode instance(s) has/have assigned as a selection reference.

树组件提供了内置功能，可帮助您识别那些选定的节点。 节点选择机制支持三种模式，对于每种提供的模式，已将TreeNode实例指定为选择参考。

• Single Mode: One TreeNode can be selected at a time. Selection should be a TreeNode reference.
  单一模式：一次可以选择一个TreeNode。 选择应该是TreeNode引用。
• Multiple Mode: Multiple nodes can be selected. Selection should be a TreeNode array reference.
  多个模式：可以选择多个节点。 选择应该是一个TreeNode数组引用。
• Checkbox Mode: Multiple nodes can be selected using a checkbox UI. Selection should be a TreeNode array reference.
  复选框模式：可以使用复选框UI选择多个节点。 选择应该是一个TreeNode数组引用。

index1.xhtml code:

index1.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true"
			selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true"
			selectionMode="multiple" selection="#{treeManagedBean.multipleSelectedTreeNodes}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true"
			selectionMode="checkbox" selection="#{treeManagedBean.checkboxSelectedTreeNodes}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
	<h:commandButton value="Print Selected Nodes" action="#{treeManagedBean.printSelectedNodes}"></h:commandButton>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;
	private TreeNode singleSelectedTreeNode;
	private TreeNode [] multipleSelectedTreeNodes;
	private TreeNode [] checkboxSelectedTreeNodes;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

	public TreeNode getSingleSelectedTreeNode() {
		return singleSelectedTreeNode;
	}

	public void setSingleSelectedTreeNode(TreeNode singleSelectedTreeNode) {
		this.singleSelectedTreeNode = singleSelectedTreeNode;
	}

	public TreeNode[] getMultipleSelectedTreeNodes() {
		return multipleSelectedTreeNodes;
	}

	public void setMultipleSelectedTreeNodes(TreeNode[] multipleSelectedTreeNodes) {
		this.multipleSelectedTreeNodes = multipleSelectedTreeNodes;
	}

	public TreeNode[] getCheckboxSelectedTreeNodes() {
		return checkboxSelectedTreeNodes;
	}

	public void setCheckboxSelectedTreeNodes(TreeNode[] checkboxSelectedTreeNodes) {
		this.checkboxSelectedTreeNodes = checkboxSelectedTreeNodes;
	}

	public void onNodeSelect(NodeSelectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Selected");
	}

	public void onNodeUnSelect(NodeUnselectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: UnSelected");
	}

	public void onNodeExpand(NodeExpandEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Expanded");
	}

	public void onNodeCollapse(NodeCollapseEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Collapsed");
	}

	public String printSelectedNodes(){
		System.out.println("Single Selection Is :: "+this.singleSelectedTreeNode.getData());
		for(TreeNode n : this.multipleSelectedTreeNodes){
			System.out.println("Multiple Selection Are :: "+n.getData());
		}
		for(TreeNode n : this.checkboxSelectedTreeNodes){
			System.out.println("CheckBox Selection Are :: "+n.getData());
		}
		return "";
	}
}

One remaining notes should be mentioned for full detailed explanation:

应该提及其余的注释以进行完整的详细说明：

• TreeNode component has attributes like expandedIcon and collapsedIcon for specifying icons of both expand and collapsed behaviors.
  TreeNode组件具有诸如expandedIcon和collapsedIcon之类的属性，用于指定展开和折叠行为的图标。
• TreeNode component has also icon attribute that used for specifying the icon of the node itself.
  TreeNode组件还具有icon属性，该属性用于指定节点本身的图标。

Primefaces节点缓存和OnNodeClick (Primefaces Node Cache & OnNodeClick)

By default cache attribute has turned on, nodes are loaded dynamically will be kept in memory so re expanding a node won’t trigger a server side request. In case you’ve set to false, collapsing the node will remove the children and expanding it later causes the children nodes to be fetched from the server again.

默认情况下， 缓存属性处于打开状态，动态加载节点将保留在内存中，因此重新扩展节点不会触发服务器端请求。 如果您将其设置为false，则折叠节点将删除子节点，稍后对其进行扩展将导致再次从服务器获取子节点。

It’s also applicable for you to execute a custom JavaScript in case certain node has clicked on. onNodeClick attribute used for this purpose, JavaScript method invoked with passing html clicked node and event elements. Following example is a log messages have displayed once onNodeClick has called.

如果某些节点已单击，它也适用于执行自定义JavaScript。 用于此目的的onNodeClick属性，通过传递html clicked 节点和事件元素来调用JavaScript方法。 以下示例是onNodeClick调用后已显示的日志消息。

index3.xhtml code:

index3.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function onNodeClick(node,event){
			console.log("nodeArg :: "+node);
			console.log("eventArg ::"+event);
		}
	</script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" 
				onNodeClick="onNodeClick(node,event)"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

Primefaces DragDrop (Primefaces DragDrop)

Tree nodes can be reordered within a single tree and can even be transferred between multiple trees using dragdrop. Following example shows you how can make single tree draggable and droppable.

可以在单个树中对树节点进行重新排序，甚至可以使用拖放操作在多个树之间进行转移。 以下示例说明如何使单棵树可拖动和可拖放。

index4.xhtml code:

index4.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" droppable="true" draggable="true"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

Applying drag-drop concept against single tree is so easy, more complicated example can be noticed when it comes for dragging-dropping against multiple tree components. Following example shows you a simple example for that. This time a new attribute dragdropScope should be used for making trees’ nodes draggable and droppable between each others.

将拖放概念应用于单个树非常容易，当涉及针对多个树组件进行拖放时，可以注意到更为复杂的示例。 以下示例为您提供了一个简单的示例。 这次应该使用新的属性 dragdropScope来使树的节点在彼此之间可拖放。

index5.xhtml code:

index5.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" droppable="true" draggable="true"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}"
				dragdropScope="myScope">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
	
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" droppable="true" draggable="true"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}"
				dragdropScope="myScope">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>	
</h:form>
</html>

Primefaces水平树 (Primefaces Horizontal Tree)

Default orientation of tree is vertical, setting it to horizontal displays nodes in a horizontal layout. All features of vertical tree except dragdrop are available for horizontal tree as well. Attribute orientation is used for this purpose.

树的默认方向是垂直，将其设置为水平以水平布局显示节点。 除拖放树外，垂直树的所有功能也可用于水平树。 为此使用属性方向 。

index6.xhtml code:

index6.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" orientation="horizontal" 
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

Primefaces ContextMenu (Primefaces ContextMenu)

Primefaces provides you a special component that can serve you achieve some sort of contextual operations. ContextMenu component used for that, Tree component has even integrated with the context menu in order for applying those sorted operations against selected node and nodes in case you’ve developed multiple selections.

Primefaces为您提供了一个特殊的组件，可以为您提供某种上下文操作。 为此使用了ContextMenu组件，Tree组件甚至与上下文菜单集成在一起，以便在开发了多个选择的情况下对选定的一个或多个节点应用这些排序的操作。

ContextMenu’s for attribute should be used for referencing Tree component’s id attribute so that defined menu has been displayed at every time certain node within Tree component has selected. Use Right click for displaying context menu component.

应该使用ContextMenu的for属性引用树组件的id属性，以便在每次选择树组件中的某些节点时都显示定义的菜单。 使用右键单击以显示上下文菜单组件 。

index6.xhtml code:

index6.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:contextMenu for="tree">
		<p:menuitem value="View" actionListener="#{treeManagedBean.view}" icon="ui-icon-search"></p:menuitem>
	</p:contextMenu>
	<p:tree id="tree" value="#{treeManagedBean.root}" var="node" dynamic="true" orientation="horizontal" 
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;
	private TreeNode singleSelectedTreeNode;
	private TreeNode [] multipleSelectedTreeNodes;
	private TreeNode [] checkboxSelectedTreeNodes;
	
	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
	
	public TreeNode getSingleSelectedTreeNode() {
		return singleSelectedTreeNode;
	}

	public void setSingleSelectedTreeNode(TreeNode singleSelectedTreeNode) {
		this.singleSelectedTreeNode = singleSelectedTreeNode;
	}

	public TreeNode[] getMultipleSelectedTreeNodes() {
		return multipleSelectedTreeNodes;
	}

	public void setMultipleSelectedTreeNodes(TreeNode[] multipleSelectedTreeNodes) {
		this.multipleSelectedTreeNodes = multipleSelectedTreeNodes;
	}

	public TreeNode[] getCheckboxSelectedTreeNodes() {
		return checkboxSelectedTreeNodes;
	}

	public void setCheckboxSelectedTreeNodes(TreeNode[] checkboxSelectedTreeNodes) {
		this.checkboxSelectedTreeNodes = checkboxSelectedTreeNodes;
	}

	public void onNodeSelect(NodeSelectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Selected");
	}
	
	public void onNodeUnSelect(NodeUnselectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: UnSelected");
	}
	
	public void onNodeExpand(NodeExpandEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Expanded");
	}
	
	public void onNodeCollapse(NodeCollapseEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Collapsed");
	}
	
	public String printSelectedNodes(){
		System.out.println("Single Selection Is :: "+this.singleSelectedTreeNode.getData());
		for(TreeNode n : this.multipleSelectedTreeNodes){
			System.out.println("Multiple Selection Are :: "+n.getData());	
		}
		for(TreeNode n : this.checkboxSelectedTreeNodes){
			System.out.println("CheckBox Selection Are :: "+n.getData());	
		}		
		return "";
	}
	
	public void view(ActionEvent e){
		System.out.println("View action has invoked against node :: "+this.singleSelectedTreeNode.getData());
	}	
}

Primefaces树表 (Primefaces TreeTable)

TreeTable is used for displaying hierarchical data in tabular format.

TreeTable用于以表格格式显示层次结构数据。

Primefaces TreeTable入门 (Getting Started With Primefaces TreeTable)

It’s important before exploring TreeTable component to take a look at it’s basic information and attributes respectively.

在探索TreeTable组件以分别查看其基本信息和属性之前，这一点很重要。

Info	TreeTable
Component Class	org.primefaces.component.treetable.TreeTable
Component Type	org.primefaces.component.TreeTable
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.TreeTableRenderer
Renderer Class	org.primefaces.component.treetable.TreeTableRenderer

信息	树表
组件类别	org.primefaces.component.treetable.TreeTable
组件类型	org.primefaces.component.TreeTable
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.TreeTableRenderer
渲染器类	org.primefaces.component.treetable.TreeTableRenderer

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of thecomponent, when set to false component willnot be rendered.
binding	null	Object	An el expression that maps to a server sideUIComponent instance in a backing bean
value	null	Object	A TreeNode instance as the backing model.
var	null	String	Name of the request-scoped variable used torefer each treenode.
widgetVar	null	String	Name of the client side widget
style	null	String	Inline style of the container element.
styleClass	null	String	Style class of the container element.
selection	null	Object	Selection reference.
selectionMode	null	String	Type of selection mode.
scrollable	false	Boolean	Whether or not the data should be scrollable.
scrollHeight	null	Integer	Height of scrollable data.
scrollWidth	null	Integer	Width of scrollable data.
tableStyle	null	String	Inline style of the table element.
tableStyleClass	null	String	Style class of the table element.
emptyMessage	No records found	String	Text to display when there is no data to display.
resizableColumns	false	Boolean	Defines if colums can be resized or not.
rowStyleClass	null	String	Style class for each row.
liveResize	false	Boolean	Columns are resized live in this mode withoutusing a resize helper.
required	false	Boolean	Validation constraint for selection.
requiredMessage	null	String	Message for required selection validation.
sortBy	null	ValueExpr	Expression for default sorting.
sortOrder	ascending	String	Defines default sorting order.
sortFunction	null	MethodExpr	Custom pluggable sortFunction for defaultsorting.
nativeElements	false	Boolean	In native mode, treetable uses nativecheckboxes.
dataLocale	null	Object	Locale to be used in features such as sorting,defaults to view locale.
caseSensitiveSort	false	Boolean	Case sensitivity for sorting, insensitive bydefault.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时，将不呈现组件。
捆绑	空值	目的	El表达式，它映射到支持bean中的服务器sideUIComponent实例
值	空值	目的	一个TreeNode实例作为支持模型。
变种	空值	串	用于引用每个treenode的请求范围变量的名称。
widgetVar	空值	串	客户端小部件的名称
样式	空值	串	容器元素的内联样式。
styleClass	空值	串	容器元素的样式类。
选择	空值	目的	选择参考。
selectionMode	空值	串	选择模式的类型。
可滚动	假	布尔型	数据是否应可滚动。
scrollHeight	空值	整数	可滚动数据的高度。
scrollWidth	空值	整数	可滚动数据的宽度。
tableStyle	空值	串	表格元素的内联样式。
tableStyleClass	空值	串	表格元素的样式类。
emptyMessage	没有找到记录	串	没有数据显示时显示的文本。
resizableColumns	假	布尔型	定义是否可以调整列的大小。
rowStyleClass	空值	串	每行的样式类。
liveResize	假	布尔型	在此模式下实时调整列大小，而无需使用调整大小助手。
需要	假	布尔型	选择的验证约束。
requiredMessage	空值	串	要求选择确认的消息。
排序方式	空值	ValueExpr	用于默认排序的表达式。
排序	上升	串	定义默认的排序顺序。
sortFunction	空值	方法专家	自定义可插拔sortFunction用于默认排序。
nativeElements	假	布尔型	在纯模式下，treetable使用nativecheckbox。
dataLocale	空值	目的	用于排序等功能的语言环境，默认情况下查看语言环境。
caseSensitiveSort	假	布尔型	区分大小写，默认不区分大小写。

Similar to Tree, TreeTable is populating with a TreeNode instance that corresponds to the root node. TreeNode API has a hierarchical data structure and represents the data to be populated in tree. Following example shows you Plain Old Java Object (POJO) document instances that are displayed using TreeTable component.

与Tree相似，TreeTable填充有一个与根节点相对应的TreeNode实例。 TreeNode API具有分层数据结构，并表示要在树中填充的数据。 下面的示例向您显示使用TreeTable组件显示的Plain Old Java Object（POJO）文档实例。

index7.xhtml code:

index7.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>							
	<p:treeTable value="#{treeTableManagedBean.root}" var="node">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
</h:form>
</html>

package com.journaldev.prime.faces.data;

public class Document {
	private String name;
	private String id;
	private String author;
	
	public Document(String name, String id,String author){
		this.name = name;
		this.id = id;
		this.author = author;
	}
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getAuthor() {
		return author;
	}
	public void setAuthor(String author) {
		this.author = author;
	}
}

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import com.journaldev.prime.faces.data.Document;

@ManagedBean
@SessionScoped
public class TreeTableManagedBean {
	
	private TreeNode root = new DefaultTreeNode("Root Node", null);

	public TreeTableManagedBean(){
		// Populate Document Instances
		Document doc01 = new Document("Primefaces Tutorial","1","Primefaces Company");
		
		Document doc02 = new Document("Hibernate Tutorial","2","JournalDev");
		
		// Create Documents TreeNode
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// Create Document TreeNode
		TreeNode document01 = new DefaultTreeNode(doc01, documents);
		TreeNode document02 = new DefaultTreeNode(doc02, documents);
	}
	
	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
}

Primefaces TreeTable –选择 (Primefaces TreeTable – Selection)

Similar to Tree component, node selection is a built-in functionality by which you can determine the type of selection; Single, multiple and checkbox are the values that you might use. Single selection will bind your selected node into one instance of TreeNode, while others have used array of TreeNode. Following example shows you how you can enclose user selections by displaying Growl Message. This example uses p:commandButton provided by Primefaces which will be discussed later on.

类似于树组件，节点选择是一项内置功能，通过它可以确定选择的类型。 单个，多个和复选框是您可能使用的值。 单一选择会将您选择的节点绑定到一个TreeNode实例中，而其他节点则使用TreeNode数组。 以下示例显示了如何通过显示Growl Message来封闭用户选择。 此示例使用Primefaces提供的p：commandButton，稍后将进行讨论。

index8.xhtml code:

index8.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>			
	<p:growl id="message">
	</p:growl>				
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" selectionMode="single"
		selection="#{treeTableManagedBean.singleSelectedNode}">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" selectionMode="multiple"
		selection="#{treeTableManagedBean.multipleSelectedNodes}">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" selectionMode="checkbox"
		selection="#{treeTableManagedBean.checkboxSelectedNodes}">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>	
	<p:commandButton value="Show Selected Documents" action="#{treeTableManagedBean.viewSelectedNodes}" process="@form" update="message">
	</p:commandButton>	
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import com.journaldev.prime.faces.data.Document;

@ManagedBean
@SessionScoped
public class TreeTableManagedBean {
	
	private TreeNode root = new DefaultTreeNode("Root Node", null);
	private TreeNode singleSelectedNode;
	private TreeNode [] multipleSelectedNodes;
	private TreeNode [] checkboxSelectedNodes;

	public TreeTableManagedBean(){
		// Populate Document Instances
		Document doc01 = new Document("Primefaces Tutorial","1","Primefaces Company");	
		Document doc02 = new Document("Hibernate Tutorial","2","JournalDev");
		// Create Documents TreeNode
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// Create Document TreeNode
		TreeNode document01 = new DefaultTreeNode(doc01, documents);
		TreeNode document02 = new DefaultTreeNode(doc02, documents);
	}
	
	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

	public TreeNode getSingleSelectedNode() {
		return singleSelectedNode;
	}

	public void setSingleSelectedNode(TreeNode singleSelectedNode) {
		this.singleSelectedNode = singleSelectedNode;
	}

	public TreeNode[] getMultipleSelectedNodes() {
		return multipleSelectedNodes;
	}

	public void setMultipleSelectedNodes(TreeNode[] multipleSelectedNodes) {
		this.multipleSelectedNodes = multipleSelectedNodes;
	}

	public TreeNode[] getCheckboxSelectedNodes() {
		return checkboxSelectedNodes;
	}

	public void setCheckboxSelectedNodes(TreeNode[] checkboxSelectedNodes) {
		this.checkboxSelectedNodes = checkboxSelectedNodes;
	}
	
	public String viewSelectedNodes(){
		String message = "You've selected documents :: ";
		message+="- "+((Document)this.singleSelectedNode.getData()).getName()+"\n";
		for(TreeNode node : this.multipleSelectedNodes){
			message+="- "+((Document)node.getData()).getName()+"\n";	
		}
		for(TreeNode node : this.checkboxSelectedNodes){
			message+="- "+((Document)node.getData()).getName()+"\n";	
		}		
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
		return "";
	}
}

Primefaces TreeTable – Ajax行为事件和ContextMenu (Primefaces TreeTable – Ajax Behavior Events & ContextMenu)

TreeTable has supported the same Ajax behavior events that already Tree component come with. One exceptional event is that colResize that would be fired when a column is resized.

TreeTable支持与Tree组件一起提供的相同Ajax行为事件。 一个例外事件是colResize ，在调整列大小时会触发该行为。

Also, the using of ContextMenu doesn’t differ from that’s occurred in Tree component. Unfortunately, free version of Primefaces 5.0 that already used for now has a crucial issue prevents us from clarifying column re size event listening but for just knowing how such that event could be listening a simple example is provided below:

另外，ContextMenu的使用与Tree组件中的使用没有什么不同。 不幸的是，现在已经使用的免费版本的Primefaces 5.0存在一个关键问题，这使我们无法澄清列重大小事件的监听，但是仅知道如何监听此类事件，下面提供了一个简单示例：

index9.xhtml code:

index9.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>							
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" resizableColumns="true">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
		<p:ajax event="colResize" listener="#{treeTableManagedBean.colResizeListener}"></p:ajax>
	</p:treeTable>
</h:form>
</html>

// .. Some Required Code
	public void colResizeListener(ColumnResizeEvent e){
		String message ="Column resize event is thrown";
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
	}

Primefaces TreeTable –排序 (Primefaces TreeTable – Sorting)

Sorting is enabled by setting sortBy expressions at column level.

通过在列级别设置sortBy表达式可以启用排序。

index10.xhtml code:

index10.xhtml代码：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>							
	<p:treeTable value="#{treeTableManagedBean.root}" var="node">
		<p:column sortBy="#{node.name}">
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column sortBy="#{node.author}">
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column sortBy="#{node.id}">
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
</h:form>
</html>

In case you would like to display TreeTable as sorted on page load use sortBy attribute of TreeTable, optional sortOrder and sortFunction attributes are provided to define the default sort order (ascending or descending) and a Java method to the actual sorting respectively.

如果你想显示treetable中上treetable中的页面加载使用sortBy属性作为分选，提供可选中将sortOrder和sortFunction属性来定义的默认排序顺序（升序或降序）和Java方法来实际分别排序。

Primefaces树TreeNode树表摘要 (Primefaces Tree TreeNode TreeTable Summary)

Tree and TreeTable components are used intensively for displaying structural hierarchical data. We learned how to use these components properly and what are the main attributes you should need. Contribute us by commenting below and for your use, download below source code.

Tree和TreeTable组件大量用于显示结构层次数据。 我们学习了如何正确使用这些组件以及您需要哪些主要属性。 通过在下面评论来为我们提供帮助，并在下面的源代码中下载供您使用。

Download PrimeFaces Tree Project 下载PrimeFaces Tree项目

翻译自: https://www.journaldev.com/3538/primefaces-tree-treenode-treetable-components-example-tutorial

primefaces教程