2 title: Javascript tree with custom html
4 js: examples/custom_html.js
9 <a href="../08_multiple_select/">« Example 8</a>
10 <a href="../10_icon_buttons/" class="next">Example 10 »</a>
13 <h1>Example 9 - custom html</h1>
18 vertical-align: middle;
22 This example uses the <strong>onCreateLi</strong> option to create an edit link next to the tree node.
24 <div id="tree1"></div>
29 <div id="tree1"></div>
36 var $tree = $('#tree1');
39 data: ExampleData.example_data,
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="'+
51 // Handle a click on the edit link
55 // Get the id from the 'node-id' data property
56 var node_id = $(e.target).data('node-id');
58 // Get the node from the tree
59 var node = $tree.tree('getNodeById', node_id);
62 // Display the node name