Dynamic Tree View That Loads JSON Data On Demand - Tree.js

A dynamic, semantic, SEO-friendly jQuery tree view plugin for viewing hierarchical JSON data in a nested, collapsible/expandable HTML list just like a tree.

A major feature of this plugin is that it allows to delay the loading of child tree data until you expand the current node by clicking the arrow. This greatly helps reduce data load time and improve page performance.

How to use it:

1. To use this tree view plugin, include the following JavaScript and Stylesheet on the HTML page.

<link rel="stylesheet" href="css/tree.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="tree.js"></script>

2. Create a container element to hold the tree.

<div id="myListTree"></div>

3. Define your JSON data for the tree as follows .

var Treedata = {
    "result": [{
        "id": "l01",
        "displayName": "Beverages",
        "hasChild": true,
        "isLoaded": true,
        "children": [{
            "id": "b01",
            "displayName": "Water",
            "hasChild": false,
            "isLoaded": false
        },
        {
            "id": "b01",
            "displayName": "Coffee",
            "hasChild": false,
            "isLoaded": false
        },
        {
            "id": "b01",
            "displayName": "Tea",
            "hasChild": false,
            "isLoaded": false
        }
        ]
    }, {
        "id": "l02",
        "displayName": "Beverages1",
        "hasChild": true,
        "isLoaded": true,
        "children": [{
            "id": "b01",
            "displayName": "Water",
            "hasChild": false,
            "isLoaded": false
        },
        {
            "id": "b01",
            "displayName": "Coffee",
            "hasChild": false,
            "isLoaded": false
        },
        {
            "id": "b01",
            "displayName": "Tea",
            "hasChild": false,
            "isLoaded": false
        }
        ]
    }, {
        "id": "l03",
        "displayName": "Beverages2",
        "hasChild": true,
        "isLoaded": true,
        "children": [{
            "id": "b01",
            "displayName": "Water",
            "hasChild": false,
            "isLoaded": false
        },
        {
            "id": "b01",
            "displayName": "Coffee",
            "hasChild": false,
            "isLoaded": false
        },
        {
            "id": "b01",
            "displayName": "Tea",
            "hasChild": false,
            "isLoaded": false
        }
        ]
    }, {
        "id": "l05",
        "displayName": "Beverages2",
        "hasChild": false,
        "isLoaded": true,
        "children": []
    }]
};

4. Initialize the tree view plugin and define the JSON data to fetch.

$('#myListTree').tree({
  data: function(){
    return Treedata.result
  }
});

5. Define the JSON data to fetch on demand.

$('#myListTree').tree({
  data: function(){
    return Treedata.result
  },
  onDemandData: function () {
    return Treedata.result2
  }
});

---

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