This javascript component was created as a response to other TreeView components that did not satisfied my project requirements.
The main objective of this component is to be able to dinamically add and remove nodes from the tree as fast as possible and also offer features to interact with the tree. The primary features of TreeView Plugin:
- Create an initial tree structure and render it;
- Add and remove nodes in real time, when the tree is already rendered;
- Display nodes with icons;
- Custom events when nodes are opened and closed;
- Context menus for nodes.
Live Demo
How to Use
1. CSS
Add the css below to your html page
<link rel="stylesheet" type="text/css" href="css/Aimara.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
2. HTML
Create a container where you want to render treeview
<button onclick="expand_all()">Expand All Nodes</button>
<button onclick="collapse_all()">Collapse All Nodes</button>
<br/><br/>
<div id="div_tree"></div>
3. Javascript
Load jQuery library together with the TreeView library into your code
<script src="lib/Aimara.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
//Tree Context Menu Structure
var contex_menu = {
'context1': {
elements: [{
text: 'Node Actions',
icon: 'images/blue_key.png',
action: function (node) {
},
submenu: {
elements: [{
text: 'Toggle Node',
icon: 'images/leaf.png',
action: function (node) {
node.toggleNode();
}
},
{
text: 'Expand Node',
icon: 'images/leaf.png',
action: function (node) {
node.expandNode();
}
},
{
text: 'Collapse Node',
icon: 'images/leaf.png',
action: function (node) {
node.collapseNode();
}
},
{
text: 'Expand Subtree',
icon: 'images/tree.png',
action: function (node) {
node.expandSubtree();
}
},
{
text: 'Collapse Subtree',
icon: 'images/tree.png',
action: function (node) {
node.collapseSubtree();
}
},
{
text: 'Delete Node',
icon: 'images/delete.png',
action: function (node) {
node.removeNode();
}
},
]
}
},
{
text: 'Child Actions',
icon: 'images/blue_key.png',
action: function (node) {
},
submenu: {
elements: [{
text: 'Create Child Node',
icon: 'images/add1.png',
action: function (node) {
node.createChildNode('Created', false, 'images/folder.png',
null, 'context1');
}
},
{
text: 'Create 1000 Child Nodes',
icon: 'images/add1.png',
action: function (node) {
for (var i = 0; i < 1000; i++)
node.createChildNode('Created -' + i, false,
'images/folder.png', null, 'context1');
}
},
{
text: 'Delete Child Nodes',
icon: 'images/delete.png',
action: function (node) {
node.removeChildNodes();
}
}
]
}
}
]
}
};
//Creating the tree
tree = createTree('div_tree', 'white', contex_menu);
//Loop to create test nodes
for (var i = 1; i < 10; i++) {
node1 = tree.createNode('Level 0 - Node ' + i, false, 'images/star.png', null, null, 'context1');
for (var j = 1; j < 5; j++) {
node2 = node1.createChildNode('Level 1 - Node ' + j, false, 'images/blue_key.png', null,
'context1');
for (var k = 1; k < 5; k++) {
node3 = node2.createChildNode('Level 2 - Node ' + k, false, 'images/monitor.png', null,
'context1');
}
}
}
//Rendering the tree
tree.drawTree();
//Adding node after tree is already rendered
tree.createNode('<a href="http://www.google.com">Link to Google</a', false, 'images/leaf.png', null, null,
'context1');
};
function expand_all() {
tree.expandTree();
}
function collapse_all() {
tree.collapseTree();
}
</script>
Source Code
DownloadThis awesome jQuery plugin is developed by rafaelthca . For more Advanced Usages, please check the demo page or visit the official website.