ecomp-portal-FE/client/bower_components/jqTree/_examples/05_load_on_demand.html

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