Create TreeView in JQuery using jsTree Plugin from flat JSON Data

In my previous article Create TreeView using jsTree Plugin and nested JSON Data we have seen how to create treeview structure using jsTree plugin and a nested JSON data.

This article will explain on creating Tree-View structure using jsTree plugin and a flat JSON data. This flat JSON data structure is more easy to implement rather than the nested structure as its very easy to get the data from database and hold it inside a custom list and just deserialize it into a flat JSON with some parent id.

Follow my previous article and setup the project to use jsTree plugin, once you set it up we are all set to consume the flat JSON data structure to use in the project.

Find out all the articles on jsTree here.

Tree View Example

View Live Demo

Creating container for the jsTree

Here is the html container that will use the flat JSON structure to create the jsTree.
<div class="panel panel-primary">
       <div class="panel-heading">
           <h3 class="panel-title">Flat JSON Example Data</h3>
       <div class="panel-body">
           <div class="m-b-10">
               <asp:TextBox ID="txtSearchAPI" runat="server" placeholder="Serch JSTree" CssClass="search-input form-control"></asp:TextBox>

           <div id="jstree-api">
       <div id="footer-api" class="panel-footer">You have not selected any node</div>

 Now lets feed the jsTree with JSON Data

The jsTree will work on only JSON data and it has two predefined structure, in which the JSON will be accepted.
  1. JSON with nested elements (parent-children structure)
  2. JSON with flat structure (with parent id structure)
The first one JSON with nested elements is a bit difficult to produce when you are using a database so I prefer using the second one as its pretty simple and easy because of its flat structure.

Below is the flat JSON format. This JSON format is easy to generate from backend; be it C# or PHP.
var jsonData = [
       { "id": "1", "parent": "#", "text": "Folder 1" },
       { "id": "2", "parent": "1", "text": "Sub Folder 1" },
       { "id": "3", "parent": "2", "text": "Sub - Sub Folder 1" },
       { "id": "4", "parent": "1", "text": "Sub Folder 2" },
       { "id": "5", "parent": "#", "text": "Folder 2" },
The jquery code for loading the jsTree is same for nested JSON and flat JSON.
function LoadJSTreeWithFlatJSONData() {

    var jsonData = [
       { "id": "1", "parent": "#", "text": "Folder 1", type: "root" },
       { "id": "2", "parent": "1", "text": "Sub Folder 1", type: "child" },
       { "id": "3", "parent": "2", "text": "Sub - Sub Folder 1", type: "child" },
       { "id": "4", "parent": "1", "text": "Sub Folder 2", type: "child" },
       { "id": "5", "parent": "#", "text": "Folder 2", type: "root" },

    $("#txtSearchAPI").keyup(function () {
        var searchString = $(this).val();
        $('#jstree-api').jstree('search', searchString);

        'core': {
            'data': jsonData
        "types": {
            "child": {
                "icon": "glyphicon glyphicon-leaf"
            "root": {
                "icon": "glyphicon glyphicon-folder-close"
            "default": {
                "icon": "glyphicon glyphicon-folder-close"
        "search": {

            "case_insensitive": true,
            "show_only_matches": true


        "plugins": ["search", "themes", "types"]

    $('#jstree-api').on('changed.jstree', function (e, data) {
        var objNode = data.instance.get_node(data.selected);
        var note;
        note = 'Selected Node Data(Id: <strong>' + + '</strong>, Name: <strong>' + objNode.text + '</strong>)'; e = 'Selected Category(Id: <strong>' + + '</strong>, Name: <strong id="api-data" data-parent="' + objNode.parent + '" data-id="' + + '">' + objNode.text + '</strong>)';


    $('#jstree-api').on('open_node.jstree', function (e, data) {
        data.instance.set_icon(data.node, "glyphicon glyphicon-folder-open");
    }).on('close_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-folder-close"); });

View Live Demo

That's it you have created a jsTree with nested JSON data. Check out my next article on creating jsTree with flat JSON data. And all articles on JsTree here.

Happy Codding...

No comments:

Post a Comment