blob: 135036fa15d54f820730df101b1d3fc68525ba56 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
---
title: Load nodes on demand from the server in javascript tree
layout: page
js: examples/load_on_demand.js
css: example.css
---
<p id="nav">
<a href="../04_save_state/">« Example 4</a>
<a href="../06_autoescape/" class="next">Example 6 »</a>
</p>
<h1>Example 5 - Load nodes on demand from the server</h1>
<div id="tree1" data-url="/nodes/"></div>
<p>
In this example, the data is loaded on demand from the server.
<br>
To use load on demand, you must do the following:
</p>
<ul>
<li>
You must specify a <strong>data url</strong>. In this example this is done using the <strong>data-url</strong>
html data attribute.
</li>
<li>
Folders that must be loaded on demand must have the <strong>load_on_demand</strong> property. You can specify this in the data.
</li>
<li>
In this example, the url <strong>/nodes/</strong> returns the first level of data (Saurischia and Ornithischians).
</li>
<li>
The url for the load on demand data is <strong><data-url>?node=<node-id></strong>. So, for node 23 this would be
<strong>/nodes/?node=23</strong>.
</li>
</ul>
<h3>first level of data</h3>
{% highlight js %}
[
{
"label": "Saurischia",
"id": 1,
"load_on_demand": true
},
{
"label": "Ornithischians",
"id": 23,
"load_on_demand": true
}
]
{% endhighlight %}
<h3>html</h3>
{% highlight html %}
<div id="tree1" data-url="/nodes/"></div>
{% endhighlight %}
<h3>javascript</h3>
{% highlight js %}
$('#tree1').tree({
dragAndDrop: true
});
{% endhighlight %}
|