blob: 4a0cebec17b6472289a11ea8b1ae5cada1284bed (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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 %}
|
