---
title: Javascript tree with custom html
layout: page
js: examples/custom_html.js
css: example.css
---
« Example 8
Example 10 »
Example 9 - custom html
This example uses the onCreateLi option to create an edit link next to the tree node.
html
{% highlight html %}
{% endhighlight %}
javascript
{% 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(
'edit'
);
}
});
// 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 %}