forked from dragosu/jquery-aciTree
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaciTree-checkbox.html
108 lines (80 loc) · 4.85 KB
/
aciTree-checkbox.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="robots" content="index, follow" />
<title>aciTree checkbox demo - A treeview control with jQuery</title>
<meta name="description" content="A demo to show you how aciTree can be used with checkboxes, check the plugin page to see all the functions exposed by the API" />
<meta name="keywords" content="aciTree, treeview, control, tree view, javascript, jQuery" />
<link rel="stylesheet" type="text/css" href="css/aciTree.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/demo.css" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.aciPlugin.min.js"></script>
<script type="text/javascript" src="js/jquery.aciTree.core.js"></script>
<script type="text/javascript" src="js/jquery.aciTree.selectable.js"></script>
<script type="text/javascript" src="js/jquery.aciTree.checkbox.js"></script>
<script type="text/javascript" src="js/jquery.aciTree.radio.js"></script>
</head>
<body>
<div>
<p>This is a demo to show you using aciTree with checkboxes. The <b>isCheckbox</b> flag need to be set for each item into the JSON data when
both checkbox and radio extensions are included.<br />
By default, all items will have a checkbox (if <b>isCheckbox</b> is missing from the JSON data).</p>
<p>When a checkbox is checked, all childs from each level under the selected one will be checked by default. Also, the parents
will be checked all the way up to the root item.<br />This functionality will break once there is a missing checkbox.
In this way you can form checkbox groups.</p>
<p>Note: When loading nodes, the checked/unchecked state need to be correctly set in the JSON data.</p>
<div id="tree" class="aciTree"><div>
<a style="font-size:10px" href="/source/php/niceJson.php?file=source/aciTree/json/checkbox.json" title="See the JSON data" target="_blank">see the JSON behind this tree</a>
<br />The easy way to find a car that's right for you</div></div>
<div id="tree-combined" class="aciTree"><div>
<a style="font-size:10px" href="/source/php/niceJson.php?file=source/aciTree/json/checkbox-radio-button.json" title="See the JSON data" target="_blank">see the JSON behind this tree</a>
<br />With checkbox + radio button sample</div></div>
<div class="log">Tree Log... <a class="clear_log" style="font-size:10px" href="#" title="Clear the LOG" target="_blank">clear log</a>
<div></div></div>
<div style="clear:both"><pre style="padding:30px;border:1px dashed #000;background:#f6f6f6;display:inline-block;"></pre></div>
<script id="code" type="text/javascript">
$(function(){
// init the tree
$('#tree').aciTree({
jsonUrl: 'json/checkbox.json?branch=',
checkbox: true,
checkboxName: 'checkbox1[]'
});
// init the tree
$('#tree-combined').aciTree({
jsonUrl: 'json/checkbox-radio-button.json?branch=',
checkbox: true,
checkboxName: 'checkbox2[]',
radio: true,
radioName: 'radio2',
unique: true
});
});
</script>
<script type="text/javascript">
$(function(){
var log = $('.log div');
// write to log
$('#tree,#tree-combined').on('acitree', function(event, api, item, eventName, options){
if (api.isItem(item)){
log.prepend('<p>' + eventName + ' [' + api.getId(item) + ']</p>');
} else {
log.prepend('<p>' + eventName + ' [tree]</p>');
}
});
$('.clear_log').click(function(){
$('.log div').html('');
return false;
});
});
</script>
</div>
<script type="text/javascript">
$(function(){
$('pre').text($('#code').text());
});
</script>
</body>
</html>