blob: 5331acf39b5ff7058d342e25981a3816674c0c6d (
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
69
70
71
72
|
---
title: Javascript tree with multiple select
layout: page
js: examples/multiple_select.js
css: example.css
---
<p id="nav">
<a href="../07_autoscroll/">« Example 7</a>
<a href="../09_custom_html/" class="next">Example 9 »</a>
</p>
<h1>Example 8 - multiple select</h1>
<p>
This example implements multiple select using the following functions and events:
</p>
<ul>
<li>
<strong>addToSelection</strong>: add node to selections
</li>
<li>
<strong>isNodeSelected</strong>: is this node selected?
</li>
<li>
<strong>removeFromSelection</strong>: unselect this node
</li>
<li>
<strong>tree.click event</strong>: this event is fired when a user clicks on a node
</li>
</ul>
<div id="tree1"></div>
<h3>html</h3>
{% highlight html %}
<div id="tree1" data-url="/nodes/"></div>
{% endhighlight %}
<h3>javascript</h3>
{% highlight js %}
$(function() {
var $tree = $('#tree1');
$tree.tree({
data: ExampleData.example_data,
autoOpen: true
});
$tree.bind(
'tree.click',
function(e) {
// Disable single selection
e.preventDefault();
var selected_node = e.node;
if (selected_node.id == undefined) {
console.log('The multiple selection functions require that nodes have an id');
}
if ($tree.tree('isNodeSelected', selected_node)) {
$tree.tree('removeFromSelection', selected_node);
}
else {
$tree.tree('addToSelection', selected_node);
}
}
);
});
{% endhighlight %}
|
