forked from vakata/jstree
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (108 loc) · 4.5 KB
/
index.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
109
110
111
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type" />
<title>jstree testing</title>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="vakata.js"></script>
<script type="text/javascript" src="jstree.core.js"></script>
<script type="text/javascript" src="jstree.themes.js"></script>
<script type="text/javascript" src="jstree.ui.js"></script>
<script type="text/javascript" src="jstree.state.js"></script>
<script type="text/javascript" src="jstree.json.js"></script>
<style type="text/css">
html, body { margin:0; padding:0; font-family:Verdana; font-size:10px; }
#container { width:800px; margin:0 auto; }
.demo { width:300px; margin:20px auto; float:none; border:1px solid gray; height:200px; overflow:auto; }
</style>
<script type="text/javascript">
var STATE = false;
function save_state() {
STATE = $('#jstree').jstree('get_state');
}
$(function () {
$("#jstree")
.jstree()
.bind('__ready.jstree', function () {
save_state();
})
.bind("create_node.jstree", function (e, data) {
alert("Created `" + data.inst.get_text(data.rslt.obj) + "` inside `" + (data.rslt.parent === -1 ? 'the main container' : data.inst.get_text(data.rslt.parent)) + "` at index " + data.rslt.position);
});
$("#jstree-json")
.jstree({
'json' : {
// data function:
// 'data' : function (o, c) { c.call(this, ['node 1', 'node 2']
// data static:
'data' : [
{
'title' : 'Root 1',
'data' : { 'jstree' : { 'closed' : true } }
},
'Root 2',
{
'title' : 'Root 3',
'data' : { 'jstree' : { 'children' : [ 'Child 1', 'Child 2' ] } }
}
],
// mixed with ajax
'ajax' : {
// static url
'url' : 'test.json'
// url with function
// 'url' : function (o) { return 'test.json'; },
// with some data
// 'data' : function () { return { 'foo' : 'bar' }; }
}
},
'plugins' : [ 'core', 'themes', 'ui', 'json' ]
});
});
</script>
</head>
<body>
<div id="jstree-json" style="float:left; width:45%; margin-left:1%;"></div>
<div id="jstree" style="float:right; width:45%; margin-right:1%;">
<ul>
<li id="some-node-id">Root node
<ul>
<li data-jstree='{ "icon" : false }'>child with no icon</li>
<li>child</li>
<li data-jstree='{ "selected" : true }' id="the-selected-one">selected child</li>
<li><em>italic child</em></li>
<li>mixed <span style="color:red;">content </span><strong>child</strong></li>
<li><strong>strong child</strong></li>
</ul>
</li>
<li id="some-node-id2" data-jstree='{ "opened" : true }'>Root node 2
<ul>
<li>opened child</li>
</ul>
</li>
<li id="some-node-id3" data-jstree='{ "opened" : true }'>Root node 3
<ul>
<li>opened child</li>
</ul>
</li>
</ul>
</div>
<hr style="clear:both;" />
<input type="button" value="$.jstree._focused().create_node();" onclick="$.jstree._focused().create_node();" />
<input type="button" value="$.jstree._focused().create_node(-1, 'New root node');" onclick="$.jstree._focused().create_node(-1, 'New root node');" />
<input type="button" value="$.jstree._focused().create_node(null, { title : 'New root node', children : [ 'Created child 1', 'Created child 2' ] });" onclick="$.jstree._focused().create_node(null, { title : 'New root node', children : [ 'Created child 1', 'Created child 2' ] });" />
<hr />
<input type="button" value="$.jstree._focused().delete_node();" onclick="$.jstree._focused().delete_node();" />
<hr />
<input type="button" value="$.jstree._focused().rename_node(null, 'some <em>mixed </em> title');" onclick="$.jstree._focused().rename_node(null, 'some <em>mixed </em> title');" />
<hr />
<input type="button" value="$.jstree._focused().set_state(STATE);" onclick="$.jstree._focused().set_state($.extend(true, {}, STATE));" />
<input type="button" value="$.jstree._focused().refresh();" onclick="$.jstree._focused().refresh();" />
<hr />
<input type="button" value="$.jstree._focused().move_node(null, -1, 0);" onclick="$.jstree._focused().move_node(null, -1, 0);" />
<input type="button" value="$.jstree._focused().move_node(null, '#some-node-id', 'before');" onclick="$.jstree._focused().move_node(null, '#some-node-id', 'before');" />
<input type="button" value="$.jstree._focused().copy_node(null, -1, 0);" onclick="$.jstree._focused().copy_node(null, -1, 0);" />
</body>
</html>