Tree View header small text goes here...

Default Tree

  • Root node 1
    • Initially Selected
    • Folder 1
    • Folder 2
    • Folder 3
    • Initially open
      • Disabled node
      • Another node
    • custom icon class (fontawesome)
    • Clickable link node
  • Root node 2
<!-- required files -->
<link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="../assets/plugins/jstree/dist/jstree.min.js"></script>

<!-- html -->
<div id="jstree-default">
  <ul>
    <li data-jstree='{"opened":true}' >
      Root node 1
      <ul>
        <li data-jstree='{"opened":true, "selected":true }'>Initially Selected</li>
        <li>Folder 1</li>
      </ul>
    </li>
  </ul>
</div>

<script>
  $("#jstree-default").jstree({
    "plugins": ["types"],
    "core": {
      "themes": { "responsive": false  }            
      },
    "types": {
      "default": { "icon": "fa fa-folder text-warning fa-lg" },
      "file": { "icon": "fa fa-file text-inverse fa-lg" }
    }
  });
</script>

Checkable Tree

<!-- required files -->
<link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="../assets/plugins/jstree/dist/jstree.min.js"></script>

<!-- html -->
<div id="jstree-checkable"></div>

<script>
  $("#jstree-checkable").jstree({
    "plugins": ["wholerow", "checkbox", "types"],
    "core": {
      "themes": { "responsive": false },    
      "data": [{
        "text": "Same but with checkboxes",
        "children": [{
          "text": "initially selected",
          "state": { "selected": true }
        }, {
          "text": "Folder 1"
        }]
      ]},
      "Root node 2"
    ]},
    "types": {
      "default": { "icon": "fa fa-folder text-primary fa-lg" },
      "file": { "icon": "fa fa-file text-success fa-lg" }
    }
  });
</script>

Contextual Menu with Drag & Drop

All the opened & selected nodes will be saved in the user's browser.
<!-- required files -->
<link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="../assets/plugins/jstree/dist/jstree.min.js"></script>

<!-- html -->
<div id="jstree-drag-and-drop"></div>

<script>
  $("#jstree-drag-and-drop").jstree({
    "plugins": ["contextmenu", "dnd", "state", "types"],
    "core": {
      "themes": { "responsive": false },
      "check_callback": true,
      "data": [{
          "text": "Parent Node",
          "children": [{
            "text": "Initially selected",
            "state": { "selected": true }
          }, {
            "text": "Folder 1"
          }
        },
        "Another Node"
      ]
    },
    "types": {
      "default": { "icon": "fa fa-folder text-warning fa-lg" },
      "file": { "icon": "fa fa-file text-warning fa-lg" }
    },
    "state": { "key": "demo2"  }
  });
</script>

Ajax Tree with Drag & Drop

The tree nodes are loaded from date_root.json via ajax.
<!-- required files -->
<link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="../assets/plugins/jstree/dist/jstree.min.js"></script>

<!-- html -->
<div id="jstree-ajax"></div>

<script>
  $("#jstree-ajax").jstree({
    "plugins": ["dnd", "state", "types"],
    "core": {
      "themes": { "responsive": false },
      "check_callback": true,
      "data": {
        "url": function(node) {
          return node.id === "#" ? "../assets/js/demo/json/data_root.json" : "../assets/js/demo/json/" + node.original.file;
        },
        "data": function(node) {
          return {
            "id": node.id
          };
        },
        "dataType": "json"
      }
    },
    "types": {
      "default": { "icon": "fa fa-folder text-warning fa-lg" },
      "file": { "icon": "fa fa-file text-warning fa-lg" }
    }
  });
</script>
App Settings
Header Fixed
Header Inverse
Sidebar Fixed
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage