1 |
5703
|
leinfelder
|
<!DOCTYPE html
|
2 |
|
|
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
3 |
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
4 |
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
5 |
|
|
<head>
|
6 |
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
7 |
|
|
<title>jsTree v.1.0 - full featured demo</title>
|
8 |
|
|
<script type="text/javascript" src="../_lib/jquery.js"></script>
|
9 |
|
|
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
|
10 |
|
|
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
|
11 |
|
|
<script type="text/javascript" src="../jquery.jstree.js"></script>
|
12 |
|
|
|
13 |
|
|
<style type="text/css">
|
14 |
|
|
html, body { margin:0; padding:0; }
|
15 |
|
|
body, td, th, pre, code, select, option, input, textarea { font-family:verdana,arial,sans-serif; font-size:10px; }
|
16 |
|
|
.demo, .demo input, .jstree-dnd-helper, #vakata-contextmenu { font-size:10px; font-family:Verdana; }
|
17 |
|
|
#container { width:780px; margin:10px auto; overflow:hidden; position:relative; }
|
18 |
|
|
#demo { width:auto; height:400px; overflow:auto; border:1px solid gray; }
|
19 |
|
|
|
20 |
|
|
#text { margin-top:1px; }
|
21 |
|
|
|
22 |
|
|
#alog { font-size:9px !important; margin:5px; border:1px solid silver; }
|
23 |
|
|
</style>
|
24 |
|
|
</head>
|
25 |
|
|
<body>
|
26 |
|
|
<div id="container">
|
27 |
|
|
|
28 |
|
|
<div id="mmenu" style="height:30px; overflow:auto;">
|
29 |
|
|
<input type="button" id="add_folder" value="add folder" style="display:block; float:left;"/>
|
30 |
|
|
<input type="button" id="add_default" value="add file" style="display:block; float:left;"/>
|
31 |
|
|
<input type="button" id="rename" value="rename" style="display:block; float:left;"/>
|
32 |
|
|
<input type="button" id="remove" value="remove" style="display:block; float:left;"/>
|
33 |
|
|
<input type="button" id="cut" value="cut" style="display:block; float:left;"/>
|
34 |
|
|
<input type="button" id="copy" value="copy" style="display:block; float:left;"/>
|
35 |
|
|
<input type="button" id="paste" value="paste" style="display:block; float:left;"/>
|
36 |
|
|
<input type="button" id="clear_search" value="clear" style="display:block; float:right;"/>
|
37 |
|
|
<input type="button" id="search" value="search" style="display:block; float:right;"/>
|
38 |
|
|
<input type="text" id="text" value="" style="display:block; float:right;" />
|
39 |
|
|
</div>
|
40 |
|
|
|
41 |
|
|
<!-- the tree container (notice NOT an UL node) -->
|
42 |
|
|
<div id="demo" class="demo"></div>
|
43 |
|
|
<!-- JavaScript neccessary for the tree -->
|
44 |
|
|
<script type="text/javascript">
|
45 |
|
|
$(function () {
|
46 |
|
|
// Settings up the tree - using $(selector).jstree(options);
|
47 |
|
|
// All those configuration options are documented in the _docs folder
|
48 |
|
|
$("#demo")
|
49 |
|
|
.jstree({
|
50 |
|
|
// the list of plugins to include
|
51 |
|
|
"plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu" ],
|
52 |
|
|
// Plugin configuration
|
53 |
|
|
|
54 |
|
|
// I usually configure the plugin that handles the data first - in this case JSON as it is most common
|
55 |
|
|
"json_data" : {
|
56 |
|
|
// I chose an ajax enabled tree - again - as this is most common, and maybe a bit more complex
|
57 |
|
|
// All the options are the same as jQuery's except for `data` which CAN (not should) be a function
|
58 |
|
|
"ajax" : {
|
59 |
|
|
// the URL to fetch the data
|
60 |
|
|
"url" : "./server.php",
|
61 |
|
|
// this function is executed in the instance's scope (this refers to the tree instance)
|
62 |
|
|
// the parameter is the node being loaded (may be -1, 0, or undefined when loading the root nodes)
|
63 |
|
|
"data" : function (n) {
|
64 |
|
|
// the result is fed to the AJAX request `data` option
|
65 |
|
|
return {
|
66 |
|
|
"operation" : "get_children",
|
67 |
|
|
"id" : n.attr ? n.attr("id").replace("node_","") : 1
|
68 |
|
|
};
|
69 |
|
|
}
|
70 |
|
|
}
|
71 |
|
|
},
|
72 |
|
|
// Configuring the search plugin
|
73 |
|
|
"search" : {
|
74 |
|
|
// As this has been a common question - async search
|
75 |
|
|
// Same as above - the `ajax` config option is actually jQuery's object (only `data` can be a function)
|
76 |
|
|
"ajax" : {
|
77 |
|
|
"url" : "./server.php",
|
78 |
|
|
// You get the search string as a parameter
|
79 |
|
|
"data" : function (str) {
|
80 |
|
|
return {
|
81 |
|
|
"operation" : "search",
|
82 |
|
|
"search_str" : str
|
83 |
|
|
};
|
84 |
|
|
}
|
85 |
|
|
}
|
86 |
|
|
},
|
87 |
|
|
// Using types - most of the time this is an overkill
|
88 |
|
|
// Still meny people use them - here is how
|
89 |
|
|
"types" : {
|
90 |
|
|
// I set both options to -2, as I do not need depth and children count checking
|
91 |
|
|
// Those two checks may slow jstree a lot, so use only when needed
|
92 |
|
|
"max_depth" : -2,
|
93 |
|
|
"max_children" : -2,
|
94 |
|
|
// I want only `drive` nodes to be root nodes
|
95 |
|
|
// This will prevent moving or creating any other type as a root node
|
96 |
|
|
"valid_children" : [ "drive" ],
|
97 |
|
|
"types" : {
|
98 |
|
|
// The default type
|
99 |
|
|
"default" : {
|
100 |
|
|
// I want this type to have no children (so only leaf nodes)
|
101 |
|
|
// In my case - those are files
|
102 |
|
|
"valid_children" : "none",
|
103 |
|
|
// If we specify an icon for the default type it WILL OVERRIDE the theme icons
|
104 |
|
|
"icon" : {
|
105 |
|
|
"image" : "./file.png"
|
106 |
|
|
}
|
107 |
|
|
},
|
108 |
|
|
// The `folder` type
|
109 |
|
|
"folder" : {
|
110 |
|
|
// can have files and other folders inside of it, but NOT `drive` nodes
|
111 |
|
|
"valid_children" : [ "default", "folder" ],
|
112 |
|
|
"icon" : {
|
113 |
|
|
"image" : "./folder.png"
|
114 |
|
|
}
|
115 |
|
|
},
|
116 |
|
|
// The `drive` nodes
|
117 |
|
|
"drive" : {
|
118 |
|
|
// can have files and folders inside, but NOT other `drive` nodes
|
119 |
|
|
"valid_children" : [ "default", "folder" ],
|
120 |
|
|
"icon" : {
|
121 |
|
|
"image" : "./root.png"
|
122 |
|
|
},
|
123 |
|
|
// those options prevent the functions with the same name to be used on the `drive` type nodes
|
124 |
|
|
// internally the `before` event is used
|
125 |
|
|
"start_drag" : false,
|
126 |
|
|
"move_node" : false,
|
127 |
|
|
"delete_node" : false,
|
128 |
|
|
"remove" : false
|
129 |
|
|
}
|
130 |
|
|
}
|
131 |
|
|
},
|
132 |
|
|
// For UI & core - the nodes to initially select and open will be overwritten by the cookie plugin
|
133 |
|
|
|
134 |
|
|
// the UI plugin - it handles selecting/deselecting/hovering nodes
|
135 |
|
|
"ui" : {
|
136 |
|
|
// this makes the node with ID node_4 selected onload
|
137 |
|
|
"initially_select" : [ "node_4" ]
|
138 |
|
|
},
|
139 |
|
|
// the core plugin - not many options here
|
140 |
|
|
"core" : {
|
141 |
|
|
// just open those two nodes up
|
142 |
|
|
// as this is an AJAX enabled tree, both will be downloaded from the server
|
143 |
|
|
"initially_open" : [ "node_2" , "node_3" ]
|
144 |
|
|
}
|
145 |
|
|
})
|
146 |
|
|
.bind("create.jstree", function (e, data) {
|
147 |
|
|
$.post(
|
148 |
|
|
"./server.php",
|
149 |
|
|
{
|
150 |
|
|
"operation" : "create_node",
|
151 |
|
|
"id" : data.rslt.parent.attr("id").replace("node_",""),
|
152 |
|
|
"position" : data.rslt.position,
|
153 |
|
|
"title" : data.rslt.name,
|
154 |
|
|
"type" : data.rslt.obj.attr("rel")
|
155 |
|
|
},
|
156 |
|
|
function (r) {
|
157 |
|
|
if(r.status) {
|
158 |
|
|
$(data.rslt.obj).attr("id", "node_" + r.id);
|
159 |
|
|
}
|
160 |
|
|
else {
|
161 |
|
|
$.jstree.rollback(data.rlbk);
|
162 |
|
|
}
|
163 |
|
|
}
|
164 |
|
|
);
|
165 |
|
|
})
|
166 |
|
|
.bind("remove.jstree", function (e, data) {
|
167 |
|
|
data.rslt.obj.each(function () {
|
168 |
|
|
$.ajax({
|
169 |
|
|
async : false,
|
170 |
|
|
type: 'POST',
|
171 |
|
|
url: "./server.php",
|
172 |
|
|
data : {
|
173 |
|
|
"operation" : "remove_node",
|
174 |
|
|
"id" : this.id.replace("node_","")
|
175 |
|
|
},
|
176 |
|
|
success : function (r) {
|
177 |
|
|
if(!r.status) {
|
178 |
|
|
data.inst.refresh();
|
179 |
|
|
}
|
180 |
|
|
}
|
181 |
|
|
});
|
182 |
|
|
});
|
183 |
|
|
})
|
184 |
|
|
.bind("rename.jstree", function (e, data) {
|
185 |
|
|
$.post(
|
186 |
|
|
"./server.php",
|
187 |
|
|
{
|
188 |
|
|
"operation" : "rename_node",
|
189 |
|
|
"id" : data.rslt.obj.attr("id").replace("node_",""),
|
190 |
|
|
"title" : data.rslt.new_name
|
191 |
|
|
},
|
192 |
|
|
function (r) {
|
193 |
|
|
if(!r.status) {
|
194 |
|
|
$.jstree.rollback(data.rlbk);
|
195 |
|
|
}
|
196 |
|
|
}
|
197 |
|
|
);
|
198 |
|
|
})
|
199 |
|
|
.bind("move_node.jstree", function (e, data) {
|
200 |
|
|
data.rslt.o.each(function (i) {
|
201 |
|
|
$.ajax({
|
202 |
|
|
async : false,
|
203 |
|
|
type: 'POST',
|
204 |
|
|
url: "./server.php",
|
205 |
|
|
data : {
|
206 |
|
|
"operation" : "move_node",
|
207 |
|
|
"id" : $(this).attr("id").replace("node_",""),
|
208 |
|
|
"ref" : data.rslt.np.attr("id").replace("node_",""),
|
209 |
|
|
"position" : data.rslt.cp + i,
|
210 |
|
|
"title" : data.rslt.name,
|
211 |
|
|
"copy" : data.rslt.cy ? 1 : 0
|
212 |
|
|
},
|
213 |
|
|
success : function (r) {
|
214 |
|
|
if(!r.status) {
|
215 |
|
|
$.jstree.rollback(data.rlbk);
|
216 |
|
|
}
|
217 |
|
|
else {
|
218 |
|
|
$(data.rslt.oc).attr("id", "node_" + r.id);
|
219 |
|
|
if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
|
220 |
|
|
data.inst.refresh(data.inst._get_parent(data.rslt.oc));
|
221 |
|
|
}
|
222 |
|
|
}
|
223 |
|
|
$("#analyze").click();
|
224 |
|
|
}
|
225 |
|
|
});
|
226 |
|
|
});
|
227 |
|
|
});
|
228 |
|
|
});
|
229 |
|
|
</script>
|
230 |
|
|
<script type="text/javascript">
|
231 |
|
|
$(function () {
|
232 |
|
|
$("#mmenu input").click(function () {
|
233 |
|
|
switch(this.id) {
|
234 |
|
|
case "add_default":
|
235 |
|
|
case "add_folder":
|
236 |
|
|
$("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
|
237 |
|
|
break;
|
238 |
|
|
case "search":
|
239 |
|
|
$("#demo").jstree("search", document.getElementById("text").value);
|
240 |
|
|
break;
|
241 |
|
|
case "text": break;
|
242 |
|
|
default:
|
243 |
|
|
$("#demo").jstree(this.id);
|
244 |
|
|
break;
|
245 |
|
|
}
|
246 |
|
|
});
|
247 |
|
|
});
|
248 |
|
|
</script>
|
249 |
|
|
|
250 |
|
|
<div style="position:absolute; right:30px; top:120px; width:220px; border:1px solid silver; min-height:160px;">
|
251 |
|
|
<input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' value="reconstruct" onclick="$.get('./server.php?reconstruct', function () { $('#demo').jstree('refresh',-1); });" />
|
252 |
|
|
<input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' id="analyze" value="analyze" onclick="$('#alog').load('./server.php?analyze');" />
|
253 |
|
|
<input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' value="refresh" onclick="$('#demo').jstree('refresh',-1);" />
|
254 |
|
|
<div id='alog'></div>
|
255 |
|
|
</div>
|
256 |
|
|
|
257 |
|
|
<p style="margin:1em 2em 3em 2em; text-align:center; ">If you like the project - consider <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=paypal@vakata.com¤cy_code=USD&amount=&return=http://jstree.com/donation&item_name=Buy+me+a+coffee+for+jsTree">supporting jstree</a>.</p>
|
258 |
|
|
|
259 |
|
|
</div>
|
260 |
|
|
|
261 |
|
|
</body>
|
262 |
|
|
</html>
|