ecomp-portal-FE/client/bower_components/jqTree/_examples/01_load_json_data.html

   1 ---
   2 title: Load json data in javascript tree
   3 layout: page
   4 js: examples/load_json_data.js
   5 css: example.css
   6 ---
   7
   8 <p id="nav">
   9     <a href="../../index.html">&laquo; Documentation</a>
  10     <a href="../02_load_json_data_from_server/" class="next">Example 2 &raquo;</a>
  11 </p>
  12
  13 <h1>Example 1 - load json data</h1>
  14
  15 <div id="tree1"></div>
  16
  17 <p>
  18     In this example we load the data using the <strong>data</strong> option.
  19     As you can see, the data is an array of objects.
  20 </p>
  21 <ul>
  22     <li>The <strong>label</strong> property defines the label of the node.</li>
  23     <li>The <strong>id</strong> is the unique id of the node.</li>
  24     <li>The <strong>children</strong> property is an array of nodes.</li>
  25 </ul>
  26
  27 {% highlight js %}
  28 var data = [
  29     {
  30         name: 'node1', id: 1,
  31         children: [
  32             { name: 'child1', id: 2 },
  33             { name: 'child2', id: 3 }
  34         ]
  35     },
  36     {
  37         name: 'node2', id: 4,
  38         children: [
  39             { name: 'child3', id: 5 }
  40         ]
  41     }
  42 ];
  43
  44 $('#tree1').tree({
  45     data: data
  46 });
  47 {% endhighlight %}