# jsTree

## javascript tree component

### Examples

## Data sources

## Predefined HTML

- Root node 1
  - Custom icon
  - Child node 2
  - Some other child node 111
- Root node 2

    $(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.