Pure Javascript TreeView Component – aimaraJS

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

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">

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>

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>