Пример использования Primefaces Tree, TreeNode, TreeTable с пошаговым руководством

JSF

Для отображения иерархических данных и создания навигации по сайту Primefaces предоставляет вам компоненты Tree & TreeTable. Использование этих компонентов не так просто, и для этого требуется много технических деталей. Некоторые из этих технических вопросов случайным образом рассматриваются в опубликованных технических документах в Интернете, в то время как другие – нет. Этот учебник предназначен для предоставления вам полных объяснений о том, как вы можете воспользоваться этими компонентами.

Основная информация о Primefaces Tree

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

Атрибуты Primefaces Tree

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.

Начало работы с Primefaces Tree

Дерево заполняется экземпляром org.primefaces.model.TreeNode, который соответствует корню. Ниже приведен простой пример, который вы можете разработать, в котором использован компонент Tree. Код 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
	private TreeNode root;

	public TreeManagedBean(){
		// Это корневой узел, поэтому его данные - это корень, а его родитель - null
		this.root = new DefaultTreeNode("Root Node", null);
		// Создание дочернего узла
		TreeNode child = new DefaultTreeNode("Child Node", this.root);
		// Ссылка на родителя дочернего узла
		child.setParent(this.root);
		// Создание потомков
		TreeNode descendent = new DefaultTreeNode("Descendent Node", child);
		// Ссылка на родителя потомка
		descendent.setParent(child);
	}

	public TreeNode getRoot() {
		return root;
	}

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

Вот дополнительные пояснения к комментариям выше:

Компонент дерева связан с экземпляром TreeNode, названным root.
Корневой экземпляр также имеет ребенка в виде экземпляра TreeNode, который также ссылается на своего ребенка.
Этот иерархический вид отображается путем прямой ссылки на корневой узел с использованием атрибута value.
Атрибут var используется компонентом дерева для ссылки на переменную с областью видимости запроса, которая будет использоваться для ссылки на данные каждого узла дерева.
Каждый TreeNode создается путем передачи двух аргументов: инкапсулированного экземпляра объекта данных и ссылки на родителя.
Свойства каждого TreeNode: type, data, children, parent и указатель на булево значение expanded. Все эти свойства должны быть рассмотрены в следующих разделах.

Primefaces Dynamic Tree

Компонент дерева по умолчанию не является динамичным; динамический режим использует ajax для загрузки узлов дерева с сервера по мере необходимости. Когда узел расширен, дерево загружает дочерние элементы конкретного расширенного узла и отправляет их на клиент для отображения. В отличие от того, что происходило изначально, когда переключение установлено на клиент, все узлы дерева в модели отображаются на клиенте, и дерево создается. Для обработки большого объема данных динамический режим более подходящий, чем использование поведения по умолчанию. Ниже приведен способ идентификации атрибута dynamic.

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 Multiple TreeNode Types

Это обычное требование – иметь различные типы TreeNode и значки в вашей иерархии. Для реализации этого следуйте простым шагам:

Определите/разместите более одного компонента <p:treeNode/>, каждый с разным типом.
Используйте этот определенный тип для привязки TreeNodes в вашей модели.

Ниже приведен простой пример демонстрации использования различных TreeNode для отображения разнообразия типов. Файлы, затронутые этим, – это и файлы index.xhtml и TreeManagedBean.java.

<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
	private TreeNode root;

	public TreeManagedBean(){
		// Это корневой узел, поэтому его данные - root, а родитель - null
		this.root = new DefaultTreeNode("Root Node", null);
		// Создать узел документов
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Создать узел документа
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Создать узел изображений
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Создать узел изображения
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Создать узел видео
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Создать узел видео
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

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

Как очевидно из предоставленного демо, интеграция между экземпляром TreeNode и компонентом p:treeNode происходит через атрибут type.

События поведения Ajax дерева Primefaces

Дерево предоставляет различные события поведения 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.

У следующего дерева три слушателя: код 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
	private TreeNode root;

	public TreeManagedBean(){
		// Это корневой узел, поэтому его данные - root, а родитель - null
		this.root = new DefaultTreeNode("Root Node", null);
		// Создать узел документов
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Создать узел документа
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Создать узел изображений
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Создать узел изображения
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Создать узел видео
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Создать узел видео
		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");
	}
}

После раскрытия TreeNode произошло событие Ajax.
Для каждого сработавшего события определен метод слушателя ajax для обработки.
Слушатели событий также полезны при работе с большим объемом данных. Это достигается путем предоставления корневых и дочерних узлов для дерева, использования слушателей событий для получения выбранного узла и добавления новых узлов к этому конкретному дереву во время выполнения.
События выбора и снятия выбора пока не производятся, для их выполнения требуется установка SelectionMode.

Выбор дерева Primefaces и SelectionMode

Компонент дерева предоставляет встроенную функциональность, которая помогает вам определить выбранные узлы. Механизм выбора узла поддерживает три режима, для каждого предоставленного режима TreeNode (ы) назначается в качестве ссылки для выбора.

Режим одиночного выбора: один TreeNode может быть выбран в данный момент времени. Выбор должен быть ссылкой на TreeNode.
Multiple Mode: Можно выбрать несколько узлов. Выбор должен быть ссылкой на массив TreeNode.
Checkbox Mode: Можно выбрать несколько узлов с использованием интерфейса флажков. Выбор должен быть ссылкой на массив TreeNode.

index1.xhtml code:

<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
	private TreeNode root;
	private TreeNode singleSelectedTreeNode;
	private TreeNode [] multipleSelectedTreeNodes;
	private TreeNode [] checkboxSelectedTreeNodes;

	public TreeManagedBean(){
		// Это корневой узел, поэтому его данные - root, а его родитель - null
		this.root = new DefaultTreeNode("Root Node", null);
		// Создать узел документов
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Создать узел документа
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Создать узел изображений
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Создать узел изображения
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Создать узел видео
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Создать узел видео
		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 "";
	}
}

Остается еще одно замечание для полного подробного объяснения:

У компонента TreeNode есть атрибуты, такие как expandedIcon и collapsedIcon для указания значков для раскрытия и сворачивания.
У компонента TreeNode также есть атрибут icon, который используется для указания значка самого узла.

Primefaces Узел Кэш & OnNodeClick

По умолчанию атрибут cache включен, узлы, загруженные динамически, будут храниться в памяти, чтобы сворачивание узла не вызывало запроса с сервера. В случае, если вы установили его в значение false, сворачивание узла удалит дочерние элементы, и повторное раскрытие потребует загрузки дочерних узлов с сервера. Также вы можете выполнить пользовательский JavaScript в случае, если на определенный узел был произведен щелчок. Для этой цели используется атрибут onNodeClick, JavaScript-метод вызывается с передачей HTML-элементов, на которые был произведен щелчок, а также элементов node и event. В следующем примере отображаются сообщения журнала после вызова onNodeClick. Код 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 Перетаскивание и Перемещение

Узлы дерева могут быть переупорядочены в пределах одного дерева и даже перемещены между несколькими деревьями с помощью функции перетаскивания и перемещения. В следующем примере показано, как сделать одно дерево перетаскиваемым и перемещаемым. Код 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>

Применение концепции перетаскивания и сбрасывания против одного дерева настолько просто, что более сложный пример можно заметить, когда речь идет о перетаскивании и сбрасывании против нескольких компонентов дерева. В следующем примере показано простое решение для этого. На этот раз для того чтобы сделать узлы деревьев перетаскиваемыми и сбрасываемыми друг на друга, следует использовать новый атрибут dragdropScope. Код 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

Основная ориентация дерева вертикальная, установка ее в горизонтальное положение отображает узлы в горизонтальном формате. Все функции вертикального дерева, кроме dragdrop, также доступны для горизонтального дерева. Для этого используется атрибут orientation. Код 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. Даже дерево интегрировано с контекстным меню для применения этих отсортированных операций к выбранному узлу и узлам в случае, если вы разработали множественный выбор. Атрибут for ContextMenu должен использоваться для ссылки на атрибут id компонента Tree, чтобы определенное меню отображалось каждый раз, когда выбран определенный узел в компоненте Tree. Используйте правый клик для отображения контекстного меню.

Код 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
	private TreeNode root;
	private TreeNode singleSelectedTreeNode;
	private TreeNode [] multipleSelectedTreeNodes;
	private TreeNode [] checkboxSelectedTreeNodes;
	
	public TreeManagedBean(){
		// Это корневой узел, поэтому его данные - root, а его родитель - null
		this.root = new DefaultTreeNode("Root Node", null);
		// Создать узел документов
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Создать узел документа
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Создать узел изображений
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Создать узел изображения
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Создать узел видео
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Создать узел видео
		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 TreeTable

TreeTable используется для отображения иерархических данных в табличном формате.

Начало работы с Primefaces TreeTable

Перед изучением компонента 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

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.

Аналогично Tree, TreeTable заполняется экземпляром TreeNode, который соответствует корневому узлу. API TreeNode имеет иерархическую структуру данных и представляет данные, которые будут заполнены в дереве. В следующем примере показаны экземпляры документов Plain Old Java Object (POJO), отображаемые с использованием компонента TreeTable. Код 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(){
		// Заполнение экземпляров документов
		Document doc01 = new Document("Primefaces Tutorial","1","Primefaces Company");
		
		Document doc02 = new Document("Hibernate Tutorial","2","JournalDev");
		
		// Создание узла документов
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// Создание узла документа
		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 – Selection

Аналогично компоненту Tree, выбор узла является встроенной функциональностью, с помощью которой вы можете определить тип выбора; Одиночный, множественный и флажок – это значения, которые вы можете использовать. Одиночный выбор привяжет выбранный узел к одному экземпляру TreeNode, в то время как другие используют массив TreeNode. В следующем примере показано, как вы можете ограничить выбор пользователя, отображая Growl Message. В этом примере используется p:commandButton, предоставленный Primefaces, о котором будет рассказано позже. Код 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(){
		// Заполнение экземпляров документа
		Document doc01 = new Document("Primefaces Tutorial","1","Primefaces Company");	
		Document doc02 = new Document("Hibernate Tutorial","2","JournalDev");
		// Создание узлов документов
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// Создание узла документа
		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 Behavior Events & ContextMenu

TreeTable поддерживает те же события Ajax, что и компонент Tree. Одним из исключительных событий является событие colResize, которое срабатывает при изменении размера столбца. Использование ContextMenu не отличается от того, что происходит в компоненте Tree. К сожалению, бесплатная версия Primefaces 5.0, которую мы используем, имеет серьезную проблему, которая мешает нам слушать событие изменения размера столбца. Но чтобы просто узнать, как можно слушать такое событие, приведен простой пример ниже: код 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>

// .. Некоторый необходимый код

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

Primefaces TreeTable – Сортировка

Сортировка включается установкой выражений sortBy на уровне столбца. Код 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>

Если вы хотите, чтобы TreeTable отображалась отсортированной при загрузке страницы, используйте атрибут sortBy TreeTable. Дополнительно предоставлены атрибуты sortOrder и sortFunction, чтобы определить порядок сортировки по умолчанию (по возрастанию или убыванию) и метод сортировки соответственно.

Primefaces Tree TreeNode TreeTable Сводка

Компоненты Tree и TreeTable активно используются для отображения структурных иерархических данных. Мы узнали, как правильно использовать эти компоненты, и какие основные атрибуты вам могут понадобиться. Поддержите нас, оставив комментарий ниже, и для вашего использования загрузите исходный код ниже.

Загрузите проект PrimeFaces Tree

Source:
https://www.digitalocean.com/community/tutorials/primefaces-tree-treenode-treetable-components-example-tutorial