« 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

[
  {
    label: 'Saurischia',
    id: 1,
    load_on_demand: true
  },
  {
    label: 'Ornithischians',
    id: 23,
    load_on_demand: true
  }
]

html

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

javascript

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