Basic Tree

Note! Opened and selected nodes will be saved in the user's browser, so when returning to the same tree the previous state will be restored.
<div id="kt_tree_1" class="tree-demo">
    <ul>
        <li>
            Root node 1
            <ul>
                <li data-jstree='{ "selected" : true }'>
                    <a href="javascript:;">
                    Initially selected </a>
                </li>
                <li data-jstree='{ "icon" : "flaticon2-gear text-success " }'>
                    custom icon URL
                </li>
                <li data-jstree='{ "opened" : true }'>
                    initially open
                    <ul>
                        <li data-jstree='{ "disabled" : true }'>
                            Disabled Node
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            Another node
                        </li>
                    </ul>
                </li>
                <li data-jstree='{ "icon" : "flaticon2-rectangular text-danger" }'>
                    Custom icon class (bootstrap)
                </li>
            </ul>
        </li>
        <li data-jstree='{ "type" : "file" }'>
            <a href="http://www.keenthemes.com">
            Clickable link node </a>
        </li>
    </ul>
</div>
$("#kt_tree_1").jstree({
    "core": {
        "themes": {
            "responsive": false
        }
    },
    "types": {
        "default": {
            "icon": "fa fa-folder"
        },
        "file": {
            "icon": "fa fa-file"
        }
    },
    "plugins": ["types"]
});

Custom Icons & Clickable Nodes

<div id="kt_tree_2" class="tree-demo">
 <ul>
  <li>
   Root node 1
   <ul>
    <li data-jstree='{ "selected" : true }'>
     <a href="javascript:;">
     Initially selected </a>
    </li>
    <li data-jstree='{ "icon" : "flaticon2-analytics text-success " }'>
     custom icon URL
    </li>
    <li data-jstree='{ "opened" : true }'>
     initially open
     <ul>
      <li data-jstree='{ "disabled" : true }'>
       Disabled Node
      </li>
      <li data-jstree='{ "type" : "file" }'>
       Another node
      </li>
     </ul>
    </li>
    <li data-jstree='{ "icon" : "flaticon2-user text-danger" }'>
     Custom icon class (bootstrap)
    </li>
   </ul>
  </li>
  <li data-jstree='{ "type" : "file" }'>
   <a href="https://keenthemes.com/">
   Clickable link node </a>
  </li>
 </ul>
</div>
$('#kt_tree_2').jstree({
    "core": {
        "themes": {
            "responsive": false
        }
    },
    "types": {
        "default": {
            "icon": "fa fa-folder text-warning"
        },
        "file": {
            "icon": "fa fa-file  text-warning"
        }
    },
    "plugins": ["types"]
});

// handle link clicks in tree nodes(support target="_blank" as well)
$('#kt_tree_2').on('select_node.jstree', function(e, data) {
    var link = $('#' + data.selected).find('a');
    if (link.attr("href") != "#" && link.attr("href") != "javascript:;" && link.attr("href") != "") {
        if (link.attr("target") == "_blank") {
            link.attr("href").target = "_blank";
        }
        document.location.href = link.attr("href");
        return false;
    }
});

Checkable Tree

<div id="kt_tree_3" class="tree-demo">
</div>
$('#kt_tree_3').jstree({
 "plugins": ["wholerow", "checkbox", "types"],
 "core": {
     "themes": {
         "responsive": false
     },
     "data": [{
            "text": "Same but with checkboxes",
             "children": [{
                 "text": "initially selected",
                 "state": {
                     "selected": true
                 }
             }, {
                 "text": "custom icon",
                 "icon": "fa fa-warning text-danger"
             }, {
                 "text": "initially open",
                 "icon": "fa fa-folder text-default",
                 "state": {
                     "opened": true
                 },
                 "children": ["Another node"]
             }, {
                 "text": "custom icon",
                 "icon": "fa fa-warning text-waring"
             }, {
                 "text": "disabled node",
                 "icon": "fa fa-check text-success",
                 "state": {
                     "disabled": true
                 }
             }]
         },
         "And wholerow selection"
     ]
 },
 "types": {
     "default": {
         "icon": "fa fa-folder text-warning"
     },
     "file": {
         "icon": "fa fa-file  text-warning"
     }
 },
});

Contextual Menu

<div id="kt_tree_4" class="tree-demo">
</div>
$("#kt_tree_4").jstree({
    "core": {
        "themes": {
            "responsive": false
        },
        // so that create works
        "check_callback": true,
        "data": [{
                "text": "Parent Node",
                "children": [{
                    "text": "Initially selected",
                    "state": {
                        "selected": true
                    }
                }, {
                    "text": "Custom Icon",
                    "icon": "flaticon2-hourglass-1 text-danger"
                }, {
                    "text": "Initially open",
                    "icon": "fa fa-folder text-success",
                    "state": {
                        "opened": true
                    },
                    "children": [{
                        "text": "Another node",
                        "icon": "fa fa-file text-waring"
                    }]
                }, {
                    "text": "Another Custom Icon",
                    "icon": "flaticon2-drop text-waring"
                }, {
                    "text": "Disabled Node",
                    "icon": "fa fa-check text-success",
                    "state": {
                        "disabled": true
                    }
                }, {
                    "text": "Sub Nodes",
                    "icon": "fa fa-folder text-danger",
                    "children": [{
                            "text": "Item 1",
                            "icon": "fa fa-file text-waring"
                        },
                        {
                            "text": "Item 2",
                            "icon": "fa fa-file text-success"
                        },
                        {
                            "text": "Item 3",
                            "icon": "fa fa-file text-default"
                        },
                        {
                            "text": "Item 4",
                            "icon": "fa fa-file text-danger"
                        },
                        {
                            "text": "Item 5",
                            "icon": "fa fa-file text-info"
                        }
                    ]
                }]
            },
            "Another Node"
        ]
    },
    "types": {
        "default": {
            "icon": "fa fa-folder text-primary"
        },
        "file": {
            "icon": "fa fa-file  text-primary"
        }
    },
    "state": {
        "key": "demo2"
    },
    "plugins": ["contextmenu", "state", "types"]
});

Drag & Drop

<div id="kt_tree_5" class="tree-demo">
</div>
$("#kt_tree_5").jstree({
    "core": {
        "themes": {
            "responsive": false
        },
        // so that create works
        "check_callback": true,
        "data": [{
                "text": "Parent Node",
                "children": [{
                    "text": "Initially selected",
                    "state": {
                        "selected": true
                    }
                }, {
                    "text": "Custom Icon",
                    "icon": "flaticon2-warning text-danger"
                }, {
                    "text": "Initially open",
                    "icon": "fa fa-folder text-success",
                    "state": {
                        "opened": true
                    },
                    "children": [{
                        "text": "Another node",
                        "icon": "fa fa-file text-waring"
                    }]
                }, {
                    "text": "Another Custom Icon",
                    "icon": "flaticon2-bell-5 text-waring"
                }, {
                    "text": "Disabled Node",
                    "icon": "fa fa-check text-success",
                    "state": {
                        "disabled": true
                    }
                }, {
                    "text": "Sub Nodes",
                    "icon": "fa fa-folder text-danger",
                    "children": [{
                            "text": "Item 1",
                            "icon": "fa fa-file text-waring"
                        },
                        {
                            "text": "Item 2",
                            "icon": "fa fa-file text-success"
                        },
                        {
                            "text": "Item 3",
                            "icon": "fa fa-file text-default"
                        },
                        {
                            "text": "Item 4",
                            "icon": "fa fa-file text-danger"
                        },
                        {
                            "text": "Item 5",
                            "icon": "fa fa-file text-info"
                        }
                    ]
                }]
            },
            "Another Node"
        ]
    },
    "types": {
        "default": {
            "icon": "fa fa-folder text-success"
        },
        "file": {
            "icon": "fa fa-file  text-success"
        }
    },
    "state": {
        "key": "demo2"
    },
    "plugins": ["dnd", "state", "types"]
});

Ajax Data

Note! The tree nodes are loaded from server side demo script via ajax.
<div id="kt_tree_6" class="tree-demo">
</div>
$("#kt_tree_6").jstree({
    "core": {
        "themes": {
            "responsive": false
        },
        // so that create works
        "check_callback": true,
        "data": {
            "url": function(node) {
                return HOST_URL + "api/jstree/ajax_data.php";
            },
            "data": function(node) {
                return {
                    "parent": node.id
                };
            }
        }
    },
    "types": {
        "default": {
            "icon": "fa fa-folder text-primary"
        },
        "file": {
            "icon": "fa fa-file  text-primary"
        }
    },
    "state": {
        "key": "demo3"
    },
    "plugins": ["dnd", "state", "types"]
});
[{
    "id": "node_158179869559930",
    "icon": "fa fa-folder icon-lg text-warning",
    "text": "Node 1581798695",
    "children": false
}, {
    "id": "node_15817986951142",
    "icon": "fa fa-folder icon-lg text-success",
    "text": "Node 1581798695",
    "children": false
}, {
    "id": "node_158179869568539",
    "icon": "fa fa-file icon-lg text-warning",
    "text": "Node 1581798695",
    "children": true
}]

Notifications 24 New

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo