Fancytree - Init from Ajax request

This sample includes all options (with their default values) to allow playing with them.

by Andy Bulka

HTML

<link rel="stylesheet" href="https://rawgithub.com/mar10/fancytree/master/src/skin-win8/ui.fancytree.css">
<script src="https://rawgithub.com/mar10/fancytree/master/src/jquery.fancytree.js"></script>
<div id="tree"></div>
<div id="statusLine">-</div>
<button id="button1">Toggle item2</button>

CSS

table.fancytree-ext-table tbody tr.fancytree-selected {
  background-color: #99FDDE;
}

JavaScript

/*
This test data is only used to mock-up the Ajax reuqest with jsFiddle's echo feature.
A real handler would return the equivalent JSON.
*/
var AJAX_RESPONSE = [
    {title: "node 1", key: "id1"},
    {title: "node 2", key: "id2"},
    
    // more.... that could be loaded via e.g. 
    // http://www.jqueryscript.net/demo/jQuery-jQuery-UI-Dynamic-Tree-View-Plugin-Fancytree/demo/ajax-tree-plain.json
    
    {"title": "simple node (no explicit id, so a default key is generated)" },
    {"key": "2", "title": "item1 with key and tooltip", "tooltip": "Look, a tool tip!" },
    {"key": "3", "title": "<span>item2 with <b>html</b> inside a span tag</span>" },
    {"key": "4", "title": "node 4" },
    {"key": "5", "title": "using href", "href": "http://www.wwWendt.de/" },
    {"key": "6", "title": "node with some extra classes (will be added to the generated markup)", "extraClasses": "my-extra-class" },
    {"key": "10", "title": "Folder 1", "folder": true, "children": [
      {"key": "10_1", "title": "Sub-item 1.1", "children": [
        {"key": "10_1_1", "title": "Sub-item 1.1.1"},
        {"key": "10_1_2", "title": "Sub-item 1.1.2"}
      ]},
      {"key": "10_2", "title": "Sub-item 1.2", "children": [
        {"key": "10_2_1", "title": "Sub-item 1.2.1"},
        {"key": "10_2_2", "title": "Sub-item 1.2.2"}
      ]}
    ]},
    {"key": "20", "title": "Simple node with active children (expand)", "expanded": true, "children": [
      {"key": "20_1", "title": "Sub-item 2.1", "children": [
        {"key": "20_1_1", "title": "Sub-item 2.1.1"},
        {"key": "20_1_2", "title": "Sub-item 2.1.2"}
      ]},
      {"key": "20_2", "title": "Sub-item 2.2", "children": [
        {"key": "20_2_1", "title": "Sub-item 2.2.1"},
        {"key": "20_2_2", "title": "Sub-item 2.2.2"}
      ]}
    ]},
    {"key": "30", "title": "Lazy folder", "folder": true, "lazy": true },
    {"key": "31", "title": "Lazy folder 2", "folder": true, "lazy": true },
    {"key": "32", "title": "Lazy...