ecomp-portal-FE/client/bower_components/jqTree/_examples/09_custom_html.html

   1 ---
   2 title: Javascript tree with custom html
   3 layout: page
   4 js: examples/custom_html.js
   5 css: example.css
   6 ---
   7
   8 <p id="nav">
   9     <a href="../08_multiple_select/">&laquo; Example 8</a>
  10     <a href="../10_icon_buttons/" class="next">Example 10 &raquo;</a>
  11 </p>
  12
  13 <h1>Example 9 - custom html</h1>
  14
  15 <style>
  16     .jqtree-tree .edit {
  17         margin-left: 8px;
  18         vertical-align: middle;
  19     }
  20 </style>
  21 <p>
  22     This example uses the <strong>onCreateLi</strong> option to create an edit link next to the tree node.
  23 </p>
  24 <div id="tree1"></div>
  25
  26 <h3>html</h3>
  27
  28 {% highlight html %}
  29 <div id="tree1"></div>
  30 {% endhighlight %}
  31
  32 <h3>javascript</h3>
  33
  34 {% highlight js %}
  35 $(function() {
  36     var $tree = $('#tree1');
  37
  38     $tree.tree({
  39         data: ExampleData.example_data,
  40         autoOpen: 1,
  41         onCreateLi: function(node, $li) {
  42             // Append a link to the jqtree-element div.
  43             // The link has an url '#node-[id]' and a data property 'node-id'.
  44             $li.find('.jqtree-element').append(
  45                 '<a href="#node-'+ node.id +'" class="edit" data-node-id="'+
  46                 node.id +'">edit</a>'
  47             );
  48         }
  49     });
  50
  51     // Handle a click on the edit link
  52     $tree.on(
  53         'click', '.edit',
  54         function(e) {
  55             // Get the id from the 'node-id' data property
  56             var node_id = $(e.target).data('node-id');
  57
  58             // Get the node from the tree
  59             var node = $tree.tree('getNodeById', node_id);
  60
  61             if (node) {
  62                 // Display the node name
  63                 alert(node.name);
  64             }
  65         }
  66     );
  67 });
  68 {% endhighlight %}