Fórumok

How to create the Alloy UI Treeview dynamically

thumbnail
Gurumurthy Godlaveeti, módosítva 11 év-val korábban

How to create the Alloy UI Treeview dynamically

Regular Member Bejegyzések: 208 Csatlakozás dátuma: 2011.08.12. Legújabb bejegyzések
Hello All ,

I want to show the tree view in my application . So as per the application , the following is the code which provided by Alloy UI Javascript code .

var tree1 = new A.TreeViewDD(
			{
				boundingBox: '#tree1',
				children: children,
				height: 280,
				io: {
					cache: false,
					url: 'http://liferay.com/alloy-demos/tree-view/content.html',
				},
				type: '', /* type: 'file', */
				width: 300
			}
		)
		.render();


So here one of the parameter is "Children" but this Children is having the hard coded values in the example as like below .


var children = [
			{
				children: [
					{
						checked: true,
						checkName: 'customSelectName',
						io: '/c/document_library/get_file?uuid=1737d9e2-e7c4-4f46-a77c-4aa8937c2d8e&groupId=14',
						label: 'TaskNodeRoot',
						leaf: false,
						type: 'task'
					},
					{
						alwaysShowHitArea: false,
						checkName: 'customSelectName',
						label: 'CheckboxNode',
						leaf: false,
						type: 'check'
					},
					{
						cache: true,
						io: 'http://liferay.com/alloy-demos/tree-view/content.html',
						label: 'CachedTreeNodeIO',
						type: 'io'
					},
					{
						children: [
							{
								label: 'Folder1-1',
								id: 'folder1-1',
								leaf: false,
								expanded: false,
								children: [
									fileRoot1,
									{
										label: 'File1'
									},
									{
										label: 'File2'
									},
									{
										label: 'From JSON',
										id: 'fromJSON'
									}
								]
							},
							{
								label: 'File1 - with id',
								id: 'file1'
							},
							{
								label: 'File2'
							},
							{
								label: 'File3'
							}
						],
						expanded: true,
						id: 'folder1',
						label: 'Folder1',
					},
				],
				draggable: false,
				expanded: true,
				id: 'root1',
				label: 'ROOT'
			}
		]; 


How to create the Children dynamically ? If any body have example about it then please share it .
thumbnail
anas esseidi, módosítva 7 év-val korábban

RE: How to create the Alloy UI Treeview dynamically

New Member Bejegyzések: 3 Csatlakozás dátuma: 2015.08.06. Legújabb bejegyzések
Hello,
that script will inspire you do something useful for your case.


<% 
	long userId = UserServiceUtil.getCurrentUser().getUserId(); 
 	List<repository> repositories = RepositoryLocalServiceUtil.getRepositoriesByUserId(userId);
%&gt;

  
 &lt;%  for(int i=0; i<repositories.size(); i++){ %>
        <aui:script> 
			YUI().use(
				  'aui-tree-view',
				  function(Y) {
		  		  new Y.TreeViewDD(
		    		  {
		    		    boundingBox: '#myTreeView',
		   		     children: [
		        		  {
		            		children: [
		            	&lt;% 
		List<activityentry> Activities = ActivityEntryLocalServiceUtil.getActivitiesByRepositoryId(repositories.get(i).getRepositoryId());
		            	for(int j=0; j&lt; Activities.size(); j++){ %&gt;
		            	
		            		{label: '&lt;%= Activities.get(j).getActivityEntryName() %&gt;', leaf: true,  type: ''},
		            		
		            		
		            	&lt;% } %&gt;
		            		],
		            		expanded: true,
		            		label: '&lt;%= repositories.get(i).getRepositoryName() %&gt;'
		          		}
		        		]
		      		}
		    		).render();
		  		}
				);
			</activityentry></aui:script>
			
			&lt;%			
 					}
	 		%&gt;

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

</repositories.size();></repository>
Pankaj Kumar, módosítva 7 év-val korábban

RE: How to create the Alloy UI Treeview dynamically

Regular Member Bejegyzések: 101 Csatlakozás dátuma: 2014.07.27. Legújabb bejegyzések
Please look into this

http://liferayplanet.blogspot.com/2015/03/liferay-aui-treeview.html