Data sources

Predefined HTML

$(function () {
	$("#demo1").tree();
});

Predefined JSON

$("#demo2").tree({
  data  : {
    type  : "json",
    json  : [ 
      { attributes: { id : "pjson_1" }, state: "open", data: "Root node 1", children : [
        { attributes: { id : "pjson_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
        { attributes: { id : "pjson_3" }, data: "Child node 2" },
        { attributes: { id : "pjson_4" }, data: "Some other child node" }
      ]}, 
      { attributes: { id : "pjson_5" }, data: "Root node 2" } 
    ]
  }
});

Predefined XML

Requires webserver
$(function () {
    $("#demo3").tree({
      data  : {
        type  : "xml_nested", // or "xml_flat"
        xml  : '<root><item id="pxml_1" ><content><name ><![CDATA[Root node 1]]></name></content><item id="pxml_2" ><content><name icon="../media/images/ok.png" ><![CDATA[Custom icon]]></name></content></item><item id="pxml_3" ><content><name ><![CDATA[Child node 2]]></name></content></item><item id="pxml_4" ><content><name ><![CDATA[Some other child node]]></name></content></item></item><item id="pxml_5" ><content><name ><![CDATA[Root node 2]]></name></content></item></root>'
      }
    });
});

NOTE:
Predefined xml also works with the "xml_flat" data.type setting.
This example requires a web server, due to loading an XSL file for transforming the string.

Loading from file

Requires webserver
$(function () {
    $("#demo4").tree({
      data  : {
        type  : "xml_flat", // or "xml_nested" or "json"
        url   : "1_xml_flat.xml"
      }
    });
});

NOTE:
"From file" also works with the "xml_nested" and "json" data.type setting.
This example requires a web server for loading both the XML and XSL files.
When generating an xml file remember to send the text/xml header.

Using async loading

The async_data function in this example is not required - it is only included to show how you can modify the params sent to the server.

Requires webserver
$(function () {
    $("#demo5").tree({
      data  : {
        type  : "json", // or "xml_nested" or "xml_nested"
        url   : "1_async.php",
        async : true,
        async_data : function (NODE) { return { id : $(NODE).attr("id") || 0, my_param : "my_value" } }
      }
    });
});

NOTE:
"Async" also works with the "xml_nested" and "xml_flat" data.type setting
When using async with "xml_flat" do not set the parent_id xml atttribute.
This example requires a web server for requesting the JSON file.