ecomp-portal-FE/client/bower_components/jqTree/_entries/07_tutorial.md

   1 ---
   2 title: Tutorial
   3 name: Tutorial
   4 ---
   5
   6 Include [jQuery](http://code.jquery.com/jquery.min.js)
   7
   8 {% highlight html %}
   9 <script src="jquery.min.js"></script>
  10 {% endhighlight %}
  11
  12 Include tree.jquery.js:
  13
  14 {% highlight html %}
  15 <script src="tree.jquery.js"></script>
  16 {% endhighlight %}
  17
  18 Include jqtree.css:
  19
  20 {% highlight html %}
  21 <link rel="stylesheet" href="jqtree.css">
  22 {% endhighlight %}
  23
  24 Optionally, for saveState include [jquery-cookie](https://github.com/carhartl/jquery-cookie):
  25
  26 {% highlight html %}
  27 <script src="jquery.cookie.js"></script>
  28 {% endhighlight %}
  29
  30 Create a div.
  31
  32 {% highlight html %}
  33 <div id="tree1"></div>
  34 {% endhighlight %}
  35
  36 Create tree data.
  37
  38 {% highlight js %}
  39 var data = [
  40     {
  41         name: 'node1',
  42         children: [
  43             { name: 'child1' },
  44             { name: 'child2' }
  45         ]
  46     },
  47     {
  48         name: 'node2',
  49         children: [
  50             { name: 'child3' }
  51         ]
  52     }
  53 ];
  54 {% endhighlight %}
  55
  56 Create tree widget.
  57
  58 {% highlight js %}
  59 $(function() {
  60     $('#tree1').tree({
  61         data: data
  62     });
  63 });
  64 {% endhighlight %}
  65
  66 Alternatively, get the data from the server.
  67
  68 {% highlight js %}
  69 $.getJSON(
  70     '/some_url/',
  71     function(data) {
  72         $('#tree1').tree({
  73             data: data
  74         });
  75     }
  76 );
  77 {% endhighlight %}