Html Treeview Control

Here is a simple Html treeview for use in your client-side javascript applications.

We've tried to make is as simple to use as possible and also compact. The only external dependencies are JQuery. Here is a simple treeview with the child nodes populated in one call to the onNodePopulate callback.

Html

All that is needed to create the treeview is a container element. In this example, a <div> with the Id of tree.

<!DOCTYPE html>
<html>
<head>
    <title>Vectorlight Treeview Demo</title>
    <meta charset="utf-8" />

    <style>
        body {
            font-family: Arial;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="Css/vectorlight.tree-1.0.0.css" />
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="Scripts/vectorlight.tree-1.0.0.min.js"></script>
</head>
<body>
    <div id="tree"></div>
</body>
</html>

Javascript

Now that we have our container element defined it's time to use it to create the treeview. Here we add some javascript to create some configuration data, initialize the treeview and listen for node click events which we report out to the console.

var config = {
    container: $("#tree"),
    iconRoot: "/Images/",
    rootId: "1",
    onNodePopulate: function (treeview, parentId) {
        console.log("Populate node: " + parentId);

        var nodes = [
            {
                Id: "2", Title: "Root", Icon: "home.png", Children: [
                    { Id: "3", Title: "Child Node 1", Icon: "document.png", Children: [] },
                    { Id: "4", Title: "Child Node 2", Icon: "document.png", Children: [] },
                    {
                        Id: "5", Title: "Folder 1", Icon: "folder.png", Children: [
                            { Id: "7", Title: "Child Node 1", Icon: "document.png", Children: [] },
                            { Id: "8", Title: "Child Node 2", Icon: "document.png", Children: [] },
                            { Id: "9", Title: "Child Node 3", Icon: "document.png", Children: [] }
                        ]
                    },
                    { Id: "6", Title: "Child Node 4", Icon: "document.png", Children: [] },
                ]
            },
        ];

        treeview.populateNode(nodes, parentId, null, null);
    },
    onNodeSelected: function (treeview, id) {
        console.log("Tree node selected: " + id);

        return true;
    }
};

var tree = new VectorlightTreeView(config);

Running the Demo

When the above is run in your browser you will see the treeview with 3 levels of nodes. You can of course customize the node icon images and also the CSS to tailor the treeview to you own needs.

Node Population

As you can see we have an event handler named onNodePopulate which is responsible for passing in node data to the treeview. In the example above there are 3 levels of nodes. In most applications we would create nodes as their parents are expanded. This is straightforward to do as everytime a node is expanded, the treeview will check if the child nodes have been loaded, and if not, it will call the onNodePopulate event handler passing it the parent node Id that requires population.

Using this mechanism it is easy to make an AJAX call to some server-side component to build a dynamic treeview from a database, and other data sources.

Any comments please post them below. We'll be adding some documentation for this control very soon.

Post your Comments

 
Latest Games
Zombie Escape
Apr 19, 2016
Plays: 633

Zombie Escape ScreenshotDrive fast before the crazy mutant zombies get you!

6 Ratings/4.1 Average
Car Parking
Jan 16, 2016
Plays: 681

Car Parking ScreenshotGuide the car to its parking space in this fun Car Parking game.

1 Rating/5 Average
Trash It
Jan 11, 2016
Plays: 698

Trash It ScreenshotAim for the Trash Can and get the various items of Trash in the bin.

3 Ratings/5 Average
Sky Fly
Jan 11, 2016
Plays: 710

Sky Fly ScreenshotFly your plane in this colorful vertical scrolling shoot-em-up. Blast the bad guys and collect any bonus's they leave behind.

1 Rating/5 Average
Professor Snappy
Jan 11, 2016
Plays: 498

Professor Snappy ScreenshotPop as many bubbles as possible in this fun and colorful bubble popping game. The levels start off easy enough but gradually get harder!

1 Rating/5 Average
Monster Match Saga
Jan 10, 2016
Plays: 722

Monster Match Saga ScreenshotHere we have a bunch of monsters that need to be matched up. Look out for the bomb and spinning monsters that will cause special damage!

3 Ratings/4.6 Average
Fly Bird Fly
Jan 10, 2016
Plays: 552

Fly Bird Fly ScreenshotGuide your friendly Bird through the maze of pipes and other obstacles collecting the Stars in this cool arcade game inspired by the legendary Flappy Bird.

1 Rating/5 Average
Life In One
Jan 10, 2016
Plays: 625

Life In One ScreenshotYou are stranded on an Alien planet. Your goal is to build a space rocket and escape. Start by building units to create power and mine the metal patches. Build defenses to defend your base from the advancing Aliens and Zombies!

2 Ratings/3 Average
X Pool
Jan 02, 2016
Plays: 926

X Pool ScreenshotPlay Pool against the computer or battle against your friends in the online mode!

1 Rating/5 Average
Fruit Slicer
Jan 02, 2016
Plays: 537

Fruit Slicer ScreenshotSlice the fruit that is thrown up onto the screen. Slice the fruit into multiple pieces for maximum points!

1 Rating/5 Average