« Example 4 Example 6 »

Example 5 - Load nodes on demand from the server

In this example, the data is loaded on demand from the server.
To use load on demand, you must do the following:

• You must specify a data url. In this example this is done using the data-url html data attribute.
• Folders that must be loaded on demand must have the load_on_demand property. You can specify this in the data.
• In this example, the url /nodes/ returns the first level of data (Saurischia and Ornithischians).
• The url for the load on demand data is <data-url>?node=<node-id>. So, for node 23 this would be /nodes/?node=23.

first level of data

[
    {
        "name": "Saurischia",
        "id": 1,
        "load_on_demand": true
    },
    {
        "name": "Ornithischians",
        "id": 23,
        "load_on_demand": true
    }
]

html

<div id="tree1" data-url="/nodes/"></div>

javascript

$('#tree1').tree({
    dragAndDrop: true
});