Logo

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

Quick Actions finance & reports

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