Pure Javascript TreeView Component – aimaraJS

Live Demo



How to Use

<link rel="stylesheet" type="text/css" href="css/Aimara.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
<button onclick="expand_all()">Expand All Nodes</button>
<button onclick="collapse_all()">Collapse All Nodes</button>
<br/><br/>
<div id="div_tree"></div>
<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

Download

This awesome jQuery plugin is developed by rafaelthca . For more Advanced Usages, please check the demo page or visit the official website.