Liferay AUI treeview

Tree View is needed basically to display folder structures.

And Even it will help to display Parent-Child relation.
Basically aui tree view is very easy to construct.

First we will see the construction of tree view with static elements.

Step 1:

We need a html div where the tree will be constructed.

<div id="myTreeView"></div>



Step 2:

Import
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>

in your jsp file.

Step 3:
<aui:script>
YUI().use( 'aui-tree-view', function(Y) { // Create an array object for the tree root and child nodes var children = [ { children: [ { label: 'File X' }, { label: 'File Y' }, { label: 'File Z' } ], expanded: true, label: 'Root' } ]; // Create a TreeView Component new Y.TreeView( { boundingBox: '#myTreeView', children: children } ).render(); } );
</aui:script>
So In this way we can construct a tree view with static elements.

------------------------------------------------------------------------------

So here we will see how to do it dynamically by passing a json array
from the controller.

Step 1:

Construct a jsonarray in your controller

JSONArray treeJsonArray=JSONFactoryUtil.createJSONArray();
 
/*Loop this part and put more nodes into treejsonarray*/  
JSONObject jsonObject=JSONFactoryUtil.createJSONObject();
jsonObject.put("label",folderTitle); jsonObject.put("id",folderId); jsonObject.put("type","node"); jsonObject.put("expanded", true);
jsonObject.put("leaf",true);

treeJsonArray.put(jsonObject);

Step 2:
After construction of jsonarray pass it to the view

request.setAttribute("data", treeJsonArray);

Step 3:
And In the jsp

Get your json array and display as tree.
<script> var data=[]; data=JSON.parse('${data}'); YUI().ready('aui-tree-view','io-xdr','aui-button','node', function(Y) { var childs=[]; var rootNode=data.id; var quotes = "'"; for(var i=0;i<data.length;i++){ var subchild=[]; var leaf=false; var nodeSelectionHighlighter = "cust-node node-name"; var treeRootNode = new Y.TreeNode( { cache :false, label :'<span class="'+nodeSelectionHighlighter+'">'+data[i].label+'</a></span>', id :data[i].id, expanded :true, draggable :false, leaf:data[i].leaf }); childs.push(treeRootNode); } var treeView = new Y.TreeView( { boundingBox: '#tree-wrapper', children: childs } ).render(); }); </script>

Again loop it and push into childs array.And do manipulation as you need for
labels styling and finally pass that childs to the children attribute in treeView.

So you can see a tree view like this.

----------------------------------------------------------------------------

Now opening the child nodes on click of parent node

Step 1:
Get the parent node's id and pass to the controller and get the data back using
ajax call.
Add this inside your script tag itself.
$( "body" ).delegate( ".tree-hitarea", "click", function() { var str=$(this).attr("id"); var index=str.lastIndexOf("_"); var id=$(this).parent().parent().attr('id'); var node = treeView.getNodeById(id); var status=node.hasChildNodes(); if(!status){ var childNodes=[]; var childNodesURL = "<portlet:resourceURL id='getChildNodes'></portlet:resourceURL>"; $.ajax({ url:childNodesURL, type: 'GET', datatype:'json', sync: true, data:{ _brandarchive_WAR_BrandCentreportlet_parentAssetsId:id, }, success: function(data){ childNodes=JSON.parse(data); //appending the child nodes for(var i=0;i<childNodes.length;i++){ var node1 = new Y.TreeNode( { id: childNodes[i].id, label :'<span class="node-name cust-node">
<a href="javascript:folderAsset('+quotes+childNodes[i].id+quotes+','+quotes+childNodes[i].path+quotes+','+quotes+childNodes[i].upload+quotes+','+quotes+childNodes[i].allowedSubFolder+quotes+','+quotes+childNodes[i].archiveroot+quotes+');">
<i class="folder-ico fa fa-folder"></i>'+childNodes[i].label+'</a></span>', /* label: '<span class="lbl"><span class="cust-node">'+childNodes[i].label+'</span></span>', */ leaf: childNodes[i].leaf, type:childNodes[i].type } ); node.appendChild(node1); } } }); } });

Step 2:

Form your child array in controller and pass it back.

  resourceResponse.getWriter().write(treeJsonArray.toString());

Step 3:

And use  
node.appendChild(node1);
as shown in the code.

Step 4: 

If you want the first node to opened at beginning time then after construction of
tree use
node.appendChild(node1);

And use can also type as radio,check,task to add checkbox,radio in front of nodes.

Important Attributes:

label - Give your label and you can also add style for it you can give as

html syntax here.And you can highlight the selected node,etc here

type - You can give node,check,radio,task

expanded - true/false to expand the node.Its used for static elements.

leaf - true/false to identify whether its the last element or its node.

id - Unique value which we can use to get subchild etc.,

children[] - Pass children nodes.

boundingBox: '#tree-wrapper' - div id where you need your tree to be constructed.

Refer Alloy UI Tree View