jsTree Example

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="http://static.jstree.com/3.0.9/assets/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://static.jstree.com/3.0.9/assets/dist/themes/default/style.min.css" />
    <link rel="stylesheet" href="http://static.jstree.com/3.0.9/assets/docs.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <a href="http://www.jstree.com/demo/">http://www.jstree.com/demo/</a>
    <br><br>
    <div id="jstree_demo"></div>
    <script src="http://static.jstree.com/3.0.9/assets/jquery-1.10.2.min.js"></script>
    <script src="http://static.jstree.com/3.0.9/assets/jquery.address-1.6.js"></script>
    <script src="http://static.jstree.com/3.0.9/assets/vakata.js"></script>
    <script src="http://static.jstree.com/3.0.9/assets/dist/jstree.min.js"></script>
    <script src="http://www.jstree.com/demo/static/site.js"></script>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

(function() {
  $('#jstree_demo').jstree({
    "core": {
      "animation": 0,
      "check_callback": true,
      "themes": {
        "stripes": true
      },
      'data': {
        'url': function(node) {
          return node.id === '#' ?
            'ajax_demo_roots.json' : 'ajax_demo_children.json';
        },
        'data': function(node) {
          return {
            'id': node.id
          };
        }
      }
    },
    "types": {
      "#": {
        "max_children": 1,
        "max_depth": 4,
        "valid_children": ["root"]
      },
      "root": {
        "icon": "http://http://www.jstree.com/demo/static/3.0.9/assets/images/tree_icon.png",
        "valid_children": ["default"]
      },
      "default": {
        "valid_children": ["default", "file"]
      },
      "file": {
        "icon": "glyphicon glyphicon-file",
        "valid_children": []
      }
    },
    "plugins": [
      "contextmenu", "dnd", "search",
      "state", "types", "wholerow"
    ]
  });
})();

/* Styles go here */

[
  { "id" : "demo_root_1", "text" : "Root 1", "children" : true, "type" : "root" },
  { "id" : "demo_root_2", "text" : "Root 2", "type" : "root" }
]

["Child 1", { "id" : "demo_child_1", "text" : "Child 2", "children" : [ { "id" : "demo_child_2", "text" : "One more", "type" : "file" }] }]