diff options
Diffstat (limited to 'ecomp-portal-FE/client/bower_components/jqTree/_examples/05_load_on_demand.html')
-rw-r--r-- | ecomp-portal-FE/client/bower_components/jqTree/_examples/05_load_on_demand.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/05_load_on_demand.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/05_load_on_demand.html new file mode 100644 index 00000000..135036fa --- /dev/null +++ b/ecomp-portal-FE/client/bower_components/jqTree/_examples/05_load_on_demand.html @@ -0,0 +1,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 %} |