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 {
	// \قاعدة الشجرة\ 
	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.
  • Root مثيل لديه أيضًا طفل كمثيل TreeNode يشير أيضًا إلى طفله.
  • يتم عرض هذا الرأي الهرمي عن طريق الإشارة إلى العقدة الجذر مباشرة باستخدام سمة value.
  • تم استخدام السمة var من قبل مكون الشجرة للإشارة إلى المتغير الذي يتم استخدامه للإشارة إلى بيانات كل عقدة شجرة.
  • تم إنشاء كل TreeNode عن طريق تمرير معلمتين. تمرير مثيل كائن البيانات المغلف والإشارة إلى الوالد.
  • خصائص كل TreeNode هي: النوع ، البيانات ، الأطفال ، الوالدين ومؤشر بولياني موسع. يجب استكشاف جميع هذه الخصائص في الأقسام القادمة.

Primefaces Dynamic 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" dynamic="true">
		<p:treeNode>
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>

أنواع الشجرة المتعددة في Primefaces

من المتطلبات الشائعة أن ترغب في أنواع مختلفة من الـ TreeNode والرموز داخل التسلسل الهرمي الخاص بك. لتنفيذ ذلك، يجب أن تتبع الخطوات البسيطة التالية:

  • قم بتعريف/وضع أكثر من مكون <p:treeNode/>، يحمل كل منها نوعًا مختلفًا.
  • استخدم هذا النوع المعرف لربط TreeNodes في نموذجك.

اليك مثال بسيط لاستخدام TreeNode مختلف لعرض أنواع الشجرة. تأثرت الملفات هي كل من index.xhtml و TreeManagedBean.java. كود 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 
	private TreeNode root;

	public TreeManagedBean(){
		 // هذا هو جذر العقدة، لذلك بياناته هي جذر والعقدة الأم لها قيمة فارغة 
		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 هو سمة النوع.

أحداث سلوك برايمفيس لشجرة 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(){
		 // هذا هو جذر العقدة، لذلك بياناته هي جذر والعقدة الأم لها قيمة فارغة 
		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.
  • الوضع المتعدد: يمكن تحديد عدة عقد. يجب أن يكون التحديد مرجعًا إلى مصفوفة العقدات الشجرية.
  • وضع الخانة: يمكن تحديد عدة عقد باستخدام واجهة مستخدم خانة اختيار. يجب أن يكون التحديد مرجعًا إلى مصفوفة العقدات الشجرية.

كود 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

بشكل افتراضي، تم تشغيل سمة التخزين المؤقت، حيث يتم الاحتفاظ بالعقد المحملة ديناميكيًا في الذاكرة بحيث لا يتم تشغيل طلب من الخادم عند توسيع العقد مرة أخرى. في حالة قيامك بتعيين القيمة على الخطأ، سيؤدي طي العقد إلى إزالة العقد الفرعية، وسيؤدي توسيعه في وقت لاحق إلى استرجاع العقد الفرعية من الخادم مرة أخرى. كما يمكن لك تنفيذ JavaScript مخصص في حالة نقر على عقد معين. يُستخدم سمة onNodeClick لهذا الغرض، حيث يتم استدعاء الطريقة 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 DragDrop

يمكن إعادة ترتيب عقد الشجرة داخل شجرة واحدة وحتى نقلها بين عدة شجرات باستخدام السحب والإفلات. يُظهر المثال التالي كيف يمكنك جعل شجرة واحدة قابلة للسحب والإسقاط. كود 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 Horizontal 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: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

يوفر Primefaces مكونًا خاصًا يمكن أن يخدمك في تنفيذ بعض العمليات السياقية. يُستخدم مكون ContextMenu لذلك، وقد دُمج مكون Tree حتى مع القائمة السياقية من أجل تطبيق تلك العمليات المرتبة على العقد المحدد والعقد في حال قمت بتطوير تحديدات متعددة. يجب استخدام السمة for للإشارة إلى السمة 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(){
		// هذا هو العقد الجذري، لذلك بياناته هي جذر ووالده 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 أن نلقي نظرة على المعلومات الأساسية والسمات الخاصة به على التوالي.

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.

بشكل مماثل للشجرة، يتم ملء 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 – الاختيار

مماثلة لمكون الشجرة، تعتبر عملية اختيار العقد وظيفة مدمجة يمكنك من خلالها تحديد نوع الاختيار؛ الاختيار الفردي والمتعدد وخانة الاختيار هي القيم التي قد تستخدمها. سيقوم الاختيار الفردي بربط العقد المحدد بنسخة واحدة من TreeNode، بينما قد يستخدم الآخرون مصفوفة من TreeNode. يوضح المثال التالي كيف يمكنك تضمين اختيارات المستخدم عن طريق عرض رسالة Growl. يستخدم هذا المثال الزر الأمري 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 & قائمة السياق

TreeTable دعم نفس أحداث سلوك Ajax التي تأتي بالفعل مع مكون الشجرة. حدث استثنائي واحد هو حدث colResize الذي سيتم تشغيله عند تغيير حجم العمود. أيضًا، استخدام ContextMenu لا يختلف عن ما يحدث في مكون الشجرة. للأسف، الإصدار المجاني من 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 لتحديد الترتيب الافتراضي (تصاعدي أو تنازلي) وطريقة Java للترتيب الفعلي على التوالي.

ملخص Primefaces Tree TreeNode TreeTable

تستخدم مكونات الشجرة والجدول الشجري بشكل مكثف لعرض البيانات التسلسلية الهيكلية. تعلمنا كيفية استخدام هذه المكونات بشكل صحيح وما هي السمات الرئيسية التي قد تحتاجها. ساهموا معنا من خلال التعليق أدناه وللحصول على استخدامكم، قم بتنزيل الشيفرة المصدرية أدناه.

تحميل مشروع PrimeFaces Tree

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