Basic JSON demo

The built in JSON datastore lets you define some static data to use to build the tree. Those two examples show a few basics of the JSON datastore format.

$(function () { 
    $("#basic_json_1").tree({
        data : { 
            type : "json",
            opts : {
                static : [
                    { 
                        // the short format demo
                        data : "A node", 
                        // here are the children
                        children : [
                            { data : "Child node 1" },
                            { data : "Child node 2" },
                            { data : "Child node 3" }
                        ]
                    },
                    { 
                        attributes : { "id" : "li.node.id" }, 
                        // this is the long data format
                        data : { 
                            title : "Long format demo", 
                            attributes : { "href" : "http://jstree.com" } 
                        } 
                    }
                ]
            }
        }
    });
});

You can also force a node in a closed or open state (notice in the previous example, that the node having children is intially closed).

$(function () { 
    $("#basic_json_2").tree({
        data : { 
            type : "json",
            opts : {
                static : [
                    { data : "A node", children : [ { data : "Only child" } ], 
                        // this node will initially be open
                        state : "open"
                    },
                    { data : "Some other node", 
                        // this node will appear closed even though it has no children
                        state : "closed"
                    }
                ]
            }
        }
    });
});