demos/tree-view/index2.html

<!DOCTYPE html>

<html>
<head>
	<script src="../../build/aui/aui.js" type="text/javascript"></script>

	<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
</head>

<style type="text/css" media="screen">

	.aui-tree-view {
		margin: 30px;
		font-size: 12px;
	}

	#treeFromNodes {
		margin: 30px;
	}

	#tree1 {
		padding: 15px;
		border: 3px solid #ededed;
	}

	#tree1-1 {
		left: 300px;
		position: absolute;
		top: 100px;
	}

</style>

<body>
<h1>Alloy - TreeView</h1>

<button id="expandAll-1">Expand All</button>
<button id="collapseAll-1">Collapse All</button>
<button id="createNodeROOT-1">Append node to ROOT</button>
<button id="insertBeforeROOT-1">Insert node before ROOT</button>

<h1>A.TreeView Folder Style</h1>
<div id="tree1"></div>
<div id="tree1-1"></div>

<br/><br/><br/>

<button id="expandAll-2">Expand All</button>
<button id="collapseAll-2">Collapse All</button>
<button id="createNodeROOT-2">Append node to ROOT</button>

<h1>A.TreeView Simple Style</h1>
<div id="tree2"></div>

<script type="text/javascript" charset="utf-8">

AUI().ready('aui-tree-view', 'aui-tooltip', 'datatype-xml', 'dataschema-xml', function(A) {
	console.log(arguments);
	new A.Tooltip({ trigger: '#tree1', bodyContent: 'Mouseover the tree to activate the Drag&Drop.', width: 150 }).render();

	var defCallback = function(event) {
		if (window.console && window.console.log) {
			console.log(event.type, event);
		}
	};

	// creating from constructor A.TreeNode
	var fileRoot1 = new A.TreeNode({ label: 'File ROOT 1', id: 'fileRoot1' });

	// or from json
	var children = [
		{
			type: 'io',
			label: 'CachedTreeNodeIO1',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO2',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO3',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO4',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO5',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO6',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO7',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO8',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO9',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO10',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO11',
			cache: true,
			io: 'assets/content.php'
		},
		{
			type: 'io',
			label: 'CachedTreeNodeIO12',
			cache: true,
			io: 'assets/content.php'
		}
	];

	// display the nodes using the A.TreeView
	// var tree1 = new A.TreeView({
	var tree1 = new A.TreeViewDD({
		paginator: {
			alwaysVisible: true,
			offsetParam: 'start',
			limit: 3,
			total: 1000
		},
		io: {
			cache: false,
			url: 'assets/content.php'
		},
		selectOnToggle: false,
		type: 'file',
		width: 200,
		height: 400,
		boundingBox: '#tree1',
		on: {
			// collapse: defCallback,
			// expand: defCallback,
			append: defCallback,
			collapseAll: defCallback,
			expandAll: defCallback,
			// insert: defCallback,
			move: defCallback,
			remove: defCallback,
			drop: defCallback
		},
		after: {
			drop: function(event) {
				var tree = event.tree;
				// console.log(tree.dragNode.get('parentNode').indexOf(tree.dragNode));
			},
			// collapse: defCallback,
			// expand: defCallback,
			append: defCallback,
			collapseAll: defCallback,
			expandAll: defCallback,
			// insert: defCallback,
			move: defCallback,
			remove: defCallback
		},
		children: children
	}).render();
});

</script>

</body>
</html>