diff options
Diffstat (limited to 'ecomp-portal-FE/client/bower_components/jqTree/_examples/09_custom_html.html')
-rw-r--r-- | ecomp-portal-FE/client/bower_components/jqTree/_examples/09_custom_html.html | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/09_custom_html.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/09_custom_html.html new file mode 100644 index 00000000..4a0cebec --- /dev/null +++ b/ecomp-portal-FE/client/bower_components/jqTree/_examples/09_custom_html.html @@ -0,0 +1,68 @@ +--- +title: Javascript tree with custom html +layout: page +js: examples/custom_html.js +css: example.css +--- + +<p id="nav"> + <a href="../08_multiple_select/">« Example 8</a> + <a href="../10_icon_buttons/" class="next">Example 10 »</a> +</p> + +<h1>Example 9 - custom html</h1> + +<style> + .jqtree-tree .edit { + margin-left: 8px; + vertical-align: middle; + } +</style> +<p> + This example uses the <strong>onCreateLi</strong> option to create an edit link next to the tree node. +</p> +<div id="tree1"></div> + +<h3>html</h3> + +{% highlight html %} +<div id="tree1"></div> +{% endhighlight %} + +<h3>javascript</h3> + +{% highlight js %} +$(function() { + var $tree = $('#tree1'); + + $tree.tree({ + data: ExampleData.example_data, + autoOpen: 1, + onCreateLi: function(node, $li) { + // Append a link to the jqtree-element div. + // The link has an url '#node-[id]' and a data property 'node-id'. + $li.find('.jqtree-element').append( + '<a href="#node-'+ node.id +'" class="edit" data-node-id="'+ + node.id +'">edit</a>' + ); + } + }); + + // Handle a click on the edit link + $tree.on( + 'click', '.edit', + function(e) { + // Get the id from the 'node-id' data property + var node_id = $(e.target).data('node-id'); + + // Get the node from the tree + var node = $tree.tree('getNodeById', node_id); + + if (node) { + // Display the node name + alert(node.name); + } + } + ); +}); +{% endhighlight %} |