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.