ecomp-portal-FE/client/bower_components/jqTree/_examples/08_multiple_select.html

   1 ---
   2 title: Javascript tree with multiple select
   3 layout: page
   4 js: examples/multiple_select.js
   5 css: example.css
   6 ---
   7
   8 <p id="nav">
   9     <a href="../07_autoscroll/">&laquo; Example 7</a>
  10     <a href="../09_custom_html/" class="next">Example 9 &raquo;</a>
  11 </p>
  12
  13 <h1>Example 8 - multiple select</h1>
  14
  15
  16 <p>
  17     This example implements multiple select using the following functions and events:
  18 </p>
  19 <ul>
  20     <li>
  21         <strong>addToSelection</strong>: add node to selections
  22     </li>
  23     <li>
  24         <strong>isNodeSelected</strong>: is this node selected?
  25     </li>
  26     <li>
  27         <strong>removeFromSelection</strong>: unselect this node
  28     </li>
  29     <li>
  30         <strong>tree.click event</strong>: this event is fired when a user clicks on a node
  31     </li>
  32 </ul>
  33
  34 <div id="tree1"></div>
  35
  36 <h3>html</h3>
  37
  38 {% highlight html %}
  39 <div id="tree1" data-url="/nodes/"></div>
  40 {% endhighlight %}
  41
  42 <h3>javascript</h3>
  43
  44 {% highlight js %}
  45 $(function() {
  46     var $tree = $('#tree1');
  47     $tree.tree({
  48         data: ExampleData.example_data,
  49         autoOpen: true
  50     });
  51     $tree.bind(
  52         'tree.click',
  53         function(e) {
  54             // Disable single selection
  55             e.preventDefault();
  56
  57             var selected_node = e.node;
  58
  59             if (selected_node.id == undefined) {
  60                 console.log('The multiple selection functions require that nodes have an id');
  61             }
  62
  63             if ($tree.tree('isNodeSelected', selected_node)) {
  64                 $tree.tree('removeFromSelection', selected_node);
  65             }
  66             else {
  67                 $tree.tree('addToSelection', selected_node);
  68             }
  69         }
  70     );
  71 });
  72 {% endhighlight %}