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 시작하기

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(){
		// 이것은 루트 노드이므로 데이터는 root이고 부모는 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;
	}
}

위에 주석으로 설명되지 않은 추가 설명은 다음과 같습니다:

  • Tree 컴포넌트에는 root라는 TreeNode 인스턴스가 연결되어 있습니다.
  • Root 인스턴스는 또한 자식으로 TreeNode 인스턴스를 가지고 있으며 자식을 참조합니다.
  • 이 계층적인 뷰는 value 속성을 사용하여 직접 루트 노드를 참조함으로써 표시됩니다.
  • 속성 var는 각 트리노드 데이터를 참조하는 데 사용되는 Tree 컴포넌트에 의해 사용됩니다.
  • 각 TreeNode는 두 개의 인수를 전달하여 생성되었습니다. 캡슐화된 데이터 객체 인스턴스와 부모 참조입니다.
  • 각 TreeNode의 속성은 다음과 같습니다: 타입, 데이터, 자식, 부모 및 확장된 부울 표시기. 이러한 속성은 다음 섹션에서 살펴볼 필요가 있습니다.

Primefaces 동적 트리

트리 컴포넌트는 기본적으로 동적이 아니며, 동적 모드는 ajax를 사용하여 필요에 따라 서버 측에서 트리 노드를 가져옵니다. 노드가 확장되면 트리는 특정 확장된 노드의 자식을 로드하고 클라이언트에 전송하여 표시합니다. 원래 발생한 것과 달리, 토글이 클라이언트로 설정된 경우 모델의 모든 트리 노드가 클라이언트에 렌더링되고 트리가 생성됩니다. 대량의 데이터에 대해서는 동적 모드가 기본 동작 사용보다 적합합니다. 아래에 동적 속성을 식별하는 방법이 나와 있습니다. 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 유형

계층 구조 내에서 다른 TreeNode 유형과 아이콘을 표시하는 것은 일반적인 요구 사항입니다. 이를 구현하기 위해 다음의 간단한 단계를 따라야 합니다.

  • 서로 다른 유형을 가진 여러 <p:treeNode/> 컴포넌트를 정의/배치하십시오.
  • 모델에서 정의된 유형을 사용하여 TreeNodes를 바인딩하십시오.

다른 트리노드를 사용하는 간단한 예제는 아래에 설명되어 있습니다. 영향을 받은 파일은 index.xhtml 뷰와 TreeManagedBean.java입니다. index.xhtml 코드: 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 속성입니다.

Primefaces Tree Ajax 동작 이벤트

트리는 다양한 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 참조여야 합니다.
  • 다중 모드: 다중 노드를 선택할 수 있습니다. 선택은 TreeNode 배열 참조여야 합니다.
  • 체크박스 모드: 체크박스 UI를 사용하여 여러 노드를 선택할 수 있습니다. 선택은 TreeNode 배열 참조여야 합니다.

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 인스턴스
	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 속성을 사용하며, HTML로 클릭한 노드와 이벤트 요소를 전달하여 JavaScript 메서드를 호출합니다. 다음 예제는 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 수평 트리

나무의 기본 방향은 세로입니다. 수평으로 설정하면 노드가 수평 레이아웃으로 표시됩니다. 드래그 앤 드롭을 제외한 모든 수직 트리 기능은 수평 트리에서도 사용할 수 있습니다. 이를 위해 속성 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 구성 요소가 사용됩니다. Tree 구성 요소는 선택한 노드 및 다중 선택한 경우 해당 정렬된 작업을 적용하기 위해 컨텍스트 메뉴와 통합되어 있습니다. ContextMenu의 for 속성은 Tree 구성 요소의 id 속성을 참조하는 데 사용되어 정의된 메뉴가 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 인스턴스로 채워집니다. TreeNode API는 계층적 데이터 구조를 가지며 트리에 채워질 데이터를 나타냅니다. 다음 예제에서는 TreeTable 구성 요소를 사용하여 표시되는 Plain Old Java Object (POJO) 문서 인스턴스를 보여줍니다. 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 생성
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// 문서 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 – 선택

Tree 컴포넌트와 유사하게, 노드 선택은 내장된 기능으로서 선택 유형을 결정할 수 있습니다. Single, multiple, checkbox는 사용할 수 있는 값입니다. Single 선택은 선택한 노드를 TreeNode의 인스턴스로 바인딩하며, 다른 경우에는 TreeNode의 배열을 사용합니다. 다음 예제는 사용자 선택을 Growl 메시지로 표시하는 방법을 보여줍니다. 이 예제는 Primefaces에서 제공하는 p:commandButton을 사용하며, 이에 대해서는 나중에 설명하겠습니다. 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 생성
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// 문서 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

TreeTable는 이미 Tree 컴포넌트와 함께 제공되는 동일한 Ajax 동작 이벤트를 지원합니다. 예외적인 이벤트는 열 크기를 조정할 때 발생하는 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을 표시하려면 TreeTable의 sortBy 속성을 사용하고, 선택적으로 기본 정렬 순서 (오름차순 또는 내림차순)를 정의하기 위해 sortOrder 및 sortFunction 속성을 제공할 수 있습니다.

Primefaces Tree TreeNode TreeTable 요약

트리와 트리테이블 컴포넌트는 구조적인 계층 데이터를 표시하는 데 빈번하게 사용됩니다. 이러한 컴포넌트를 올바르게 사용하는 방법과 주요 속성에 대해 배웠습니다. 아래에 의견을 남겨 주시고 사용하실 수 있도록 소스 코드를 다운로드하세요.

PrimeFaces Tree 프로젝트 다운로드

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