mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
461 lines
15 KiB
HTML
461 lines
15 KiB
HTML
|
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<title>jsTree v.1.0 - Demo</title>
|
||
|
|
<script type="text/javascript" src="../_lib/jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
|
||
|
|
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
|
||
|
|
<script type="text/javascript" src="../jquery.jstree.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="../_docs/syntax/!style.css"/>
|
||
|
|
<link type="text/css" rel="stylesheet" href="../_docs/!style.css"/>
|
||
|
|
<script type="text/javascript" src="../_docs/syntax/!script.js"></script>
|
||
|
|
</head>
|
||
|
|
<body id="demo_body">
|
||
|
|
<div id="container">
|
||
|
|
|
||
|
|
<h1 id="dhead">jsTree v.1.0</h1>
|
||
|
|
<h1>DEMO</h1>
|
||
|
|
<h2>Creating a tree, binding events, using the instance</h2>
|
||
|
|
<div id="description">
|
||
|
|
<p>Here is how you create an instance, bind an event and then get the instance.</p>
|
||
|
|
<div id="demo1" class="demo" style="height:100px;">
|
||
|
|
<ul>
|
||
|
|
<li id="phtml_1">
|
||
|
|
<a href="#">Root node 1</a>
|
||
|
|
<ul>
|
||
|
|
<li id="phtml_2">
|
||
|
|
<a href="#">Child node 1</a>
|
||
|
|
</li>
|
||
|
|
<li id="phtml_3">
|
||
|
|
<a href="#">Child node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li id="phtml_4">
|
||
|
|
<a href="#">Root node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" class="source below">
|
||
|
|
$(function () {
|
||
|
|
// TO CREATE AN INSTANCE
|
||
|
|
// select the tree container using jQuery
|
||
|
|
$("#demo1")
|
||
|
|
// call `.jstree` with the options object
|
||
|
|
.jstree({
|
||
|
|
// the `plugins` array allows you to configure the active plugins on this instance
|
||
|
|
"plugins" : ["themes","html_data","ui","crrm","hotkeys"],
|
||
|
|
// each plugin you have included can have its own config object
|
||
|
|
"core" : { "initially_open" : [ "phtml_1" ] }
|
||
|
|
// it makes sense to configure a plugin only if overriding the defaults
|
||
|
|
})
|
||
|
|
// EVENTS
|
||
|
|
// each instance triggers its own events - to process those listen on the container
|
||
|
|
// all events are in the `.jstree` namespace
|
||
|
|
// so listen for `function_name`.`jstree` - you can function names from the docs
|
||
|
|
.bind("loaded.jstree", function (event, data) {
|
||
|
|
// you get two params - event & data - check the core docs for a detailed description
|
||
|
|
});
|
||
|
|
// INSTANCES
|
||
|
|
// 1) you can call most functions just by selecting the container and calling `.jstree("func",`
|
||
|
|
setTimeout(function () { $("#demo1").jstree("set_focus"); }, 500);
|
||
|
|
// with the methods below you can call even private functions (prefixed with `_`)
|
||
|
|
// 2) you can get the focused instance using `$.jstree._focused()`.
|
||
|
|
setTimeout(function () { $.jstree._focused().select_node("#phtml_1"); }, 1000);
|
||
|
|
// 3) you can use $.jstree._reference - just pass the container, a node inside it, or a selector
|
||
|
|
setTimeout(function () { $.jstree._reference("#phtml_1").close_node("#phtml_1"); }, 1500);
|
||
|
|
// 4) when you are working with an event you can use a shortcut
|
||
|
|
$("#demo1").bind("open_node.jstree", function (e, data) {
|
||
|
|
// data.inst is the instance which triggered this event
|
||
|
|
data.inst.select_node("#phtml_2", true);
|
||
|
|
});
|
||
|
|
setTimeout(function () { $.jstree._reference("#phtml_1").open_node("#phtml_1"); }, 2500);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Doing something when the tree is loaded</h2>
|
||
|
|
<div id="description">
|
||
|
|
<p>You can use a few events to do that.</p>
|
||
|
|
<div id="demo2" class="demo" style="height:100px;">
|
||
|
|
<ul>
|
||
|
|
<li id="rhtml_1" class="jstree-open">
|
||
|
|
<a href="#">Root node 1</a>
|
||
|
|
<ul>
|
||
|
|
<li id="rhtml_2">
|
||
|
|
<a href="#">Child node 1</a>
|
||
|
|
</li>
|
||
|
|
<li id="rhtml_3">
|
||
|
|
<a href="#">Child node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li id="rhtml_4">
|
||
|
|
<a href="#">Root node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" class="source below">
|
||
|
|
// Note method 2) and 3) use `one`, this is because if `refresh` is called those events are triggered
|
||
|
|
$(function () {
|
||
|
|
$("#demo2")
|
||
|
|
.jstree({ "plugins" : ["themes","html_data","ui"] })
|
||
|
|
// 1) the loaded event fires as soon as data is parsed and inserted
|
||
|
|
.bind("loaded.jstree", function (event, data) { })
|
||
|
|
// 2) but if you are using the cookie plugin or the core `initially_open` option:
|
||
|
|
.one("reopen.jstree", function (event, data) { })
|
||
|
|
// 3) but if you are using the cookie plugin or the UI `initially_select` option:
|
||
|
|
.one("reselect.jstree", function (event, data) { });
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Doing something when a node is clicked</h2>
|
||
|
|
<div id="description">
|
||
|
|
<div id="demo3" class="demo" style="height:100px;">
|
||
|
|
<ul>
|
||
|
|
<li id="shtml_1" class="jstree-open">
|
||
|
|
<a href="#">Root node 1</a>
|
||
|
|
<ul>
|
||
|
|
<li id="shtml_2">
|
||
|
|
<a href="#">Child node 1</a>
|
||
|
|
</li>
|
||
|
|
<li id="shtml_3">
|
||
|
|
<a href="#">Child node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li id="shtml_4">
|
||
|
|
<a href="#">Root node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" class="source below">
|
||
|
|
$(function () {
|
||
|
|
$("#demo3")
|
||
|
|
.jstree({ "plugins" : ["themes","html_data","ui"] })
|
||
|
|
// 1) if using the UI plugin bind to select_node
|
||
|
|
.bind("select_node.jstree", function (event, data) {
|
||
|
|
// `data.rslt.obj` is the jquery extended node that was clicked
|
||
|
|
alert(data.rslt.obj.attr("id"));
|
||
|
|
})
|
||
|
|
// 2) if not using the UI plugin - the Anchor tags work as expected
|
||
|
|
// so if the anchor has a HREF attirbute - the page will be changed
|
||
|
|
// you can actually prevent the default, etc (normal jquery usage)
|
||
|
|
.delegate("a", "click", function (event, data) { event.preventDefault(); })
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Using CSS to make nodes wrap</h2>
|
||
|
|
<div id="description">
|
||
|
|
<div id="demo4" class="demo" style="height:120px;">
|
||
|
|
<ul>
|
||
|
|
<li class="jstree-open">
|
||
|
|
<a href="#">Root node 1</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<a href="#">Child node 1 with a long text which would normally just cause a scrollbar, but with this line of CSS it will actually wrap, this is not really throughly tested but it works</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Child node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Root node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<style type="text/css" class="source below">
|
||
|
|
#demo4 a { white-space:normal !important; height: auto; padding:1px 2px; }
|
||
|
|
#demo4 li > ins { vertical-align:top; }
|
||
|
|
#demo4 .jstree-hovered, #demo4 .jstree-clicked { border:0; }
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$("#demo4")
|
||
|
|
.jstree({ "plugins" : ["themes","html_data","ui"] });
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Using CSS to make the nodes bigger</h2>
|
||
|
|
<div id="description">
|
||
|
|
<div id="demo5" class="demo" style="height:120px;">
|
||
|
|
<ul>
|
||
|
|
<li class="jstree-open">
|
||
|
|
<a href="#">Root node 1</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<a href="#">Child node 1 with a long text which would normally just cause a scrollbar, but with this line of CSS it will actually wrap, this is not really throughly tested but it works</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Child node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Root node 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<style type="text/css" class="source below">
|
||
|
|
#demo5 li { min-height:22px; line-height:22px; }
|
||
|
|
#demo5 a { line-height:20px; height:20px; font-size:10px; }
|
||
|
|
#demo5 a ins { height:20px; width:20px; background-position:-56px -17px; }
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$("#demo5")
|
||
|
|
.jstree({ "plugins" : ["themes","html_data","ui"] });
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>PHP & mySQL demo + event order</h2>
|
||
|
|
<div id="description">
|
||
|
|
<p>Here is a PHP & mySQL enabled demo. You can use the classes/DB structure included, but those are not thoroughly tested and not officially a part of jstree. In the log window you can also see all function calls as they happen on the instance.</p>
|
||
|
|
<div id="mmenu" style="height:30px; overflow:auto;">
|
||
|
|
<input type="button" id="add_folder" value="add folder" style="display:block; float:left;"/>
|
||
|
|
<input type="button" id="add_default" value="add file" style="display:block; float:left;"/>
|
||
|
|
<input type="button" id="rename" value="rename" style="display:block; float:left;"/>
|
||
|
|
<input type="button" id="remove" value="remove" style="display:block; float:left;"/>
|
||
|
|
<input type="button" id="cut" value="cut" style="display:block; float:left;"/>
|
||
|
|
<input type="button" id="copy" value="copy" style="display:block; float:left;"/>
|
||
|
|
<input type="button" id="paste" value="paste" style="display:block; float:left;"/>
|
||
|
|
<input type="button" id="clear_search" value="clear" style="display:block; float:right;"/>
|
||
|
|
<input type="button" id="search" value="search" style="display:block; float:right;"/>
|
||
|
|
<input type="text" id="text" value="" style="display:block; float:right;" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- the tree container (notice NOT an UL node) -->
|
||
|
|
<div id="demo" class="demo" style="height:200px;"></div>
|
||
|
|
<div style="height:30px; text-align:center;">
|
||
|
|
<input type="button" style='width:170px; height:24px; margin:5px auto;' value="reconstruct" onclick="$.get('./server.php?reconstruct', function () { $('#demo').jstree('refresh',-1); });" />
|
||
|
|
<input type="button" style='width:170px; height:24px; margin:5px auto;' id="analyze" value="analyze" onclick="$('#alog').load('./server.php?analyze');" />
|
||
|
|
<input type="button" style='width:170px; height:24px; margin:5px auto;' value="refresh" onclick="$('#demo').jstree('refresh',-1);" />
|
||
|
|
</div>
|
||
|
|
<div id='alog' style="border:1px solid gray; padding:5px; height:100px; margin-top:15px; overflow:auto; font-family:Monospace;"></div>
|
||
|
|
<!-- JavaScript neccessary for the tree -->
|
||
|
|
<script type="text/javascript" class="source below">
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
$("#demo")
|
||
|
|
.bind("before.jstree", function (e, data) {
|
||
|
|
$("#alog").append(data.func + "<br />");
|
||
|
|
})
|
||
|
|
.jstree({
|
||
|
|
// List of active plugins
|
||
|
|
"plugins" : [
|
||
|
|
"themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"
|
||
|
|
],
|
||
|
|
|
||
|
|
// I usually configure the plugin that handles the data first
|
||
|
|
// This example uses JSON as it is most common
|
||
|
|
"json_data" : {
|
||
|
|
// This tree is ajax enabled - as this is most common, and maybe a bit more complex
|
||
|
|
// All the options are almost the same as jQuery's AJAX (read the docs)
|
||
|
|
"ajax" : {
|
||
|
|
// the URL to fetch the data
|
||
|
|
"url" : "./server.php",
|
||
|
|
// the `data` function is executed in the instance's scope
|
||
|
|
// the parameter is the node being loaded
|
||
|
|
// (may be -1, 0, or undefined when loading the root nodes)
|
||
|
|
"data" : function (n) {
|
||
|
|
// the result is fed to the AJAX request `data` option
|
||
|
|
return {
|
||
|
|
"operation" : "get_children",
|
||
|
|
"id" : n.attr ? n.attr("id").replace("node_","") : 1
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// Configuring the search plugin
|
||
|
|
"search" : {
|
||
|
|
// As this has been a common question - async search
|
||
|
|
// Same as above - the `ajax` config option is actually jQuery's AJAX object
|
||
|
|
"ajax" : {
|
||
|
|
"url" : "./server.php",
|
||
|
|
// You get the search string as a parameter
|
||
|
|
"data" : function (str) {
|
||
|
|
return {
|
||
|
|
"operation" : "search",
|
||
|
|
"search_str" : str
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// Using types - most of the time this is an overkill
|
||
|
|
// read the docs carefully to decide whether you need types
|
||
|
|
"types" : {
|
||
|
|
// I set both options to -2, as I do not need depth and children count checking
|
||
|
|
// Those two checks may slow jstree a lot, so use only when needed
|
||
|
|
"max_depth" : -2,
|
||
|
|
"max_children" : -2,
|
||
|
|
// I want only `drive` nodes to be root nodes
|
||
|
|
// This will prevent moving or creating any other type as a root node
|
||
|
|
"valid_children" : [ "drive" ],
|
||
|
|
"types" : {
|
||
|
|
// The default type
|
||
|
|
"default" : {
|
||
|
|
// I want this type to have no children (so only leaf nodes)
|
||
|
|
// In my case - those are files
|
||
|
|
"valid_children" : "none",
|
||
|
|
// If we specify an icon for the default type it WILL OVERRIDE the theme icons
|
||
|
|
"icon" : {
|
||
|
|
"image" : "./file.png"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// The `folder` type
|
||
|
|
"folder" : {
|
||
|
|
// can have files and other folders inside of it, but NOT `drive` nodes
|
||
|
|
"valid_children" : [ "default", "folder" ],
|
||
|
|
"icon" : {
|
||
|
|
"image" : "./folder.png"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// The `drive` nodes
|
||
|
|
"drive" : {
|
||
|
|
// can have files and folders inside, but NOT other `drive` nodes
|
||
|
|
"valid_children" : [ "default", "folder" ],
|
||
|
|
"icon" : {
|
||
|
|
"image" : "./root.png"
|
||
|
|
},
|
||
|
|
// those prevent the functions with the same name to be used on `drive` nodes
|
||
|
|
// internally the `before` event is used
|
||
|
|
"start_drag" : false,
|
||
|
|
"move_node" : false,
|
||
|
|
"delete_node" : false,
|
||
|
|
"remove" : false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// UI & core - the nodes to initially select and open will be overwritten by the cookie plugin
|
||
|
|
|
||
|
|
// the UI plugin - it handles selecting/deselecting/hovering nodes
|
||
|
|
"ui" : {
|
||
|
|
// this makes the node with ID node_4 selected onload
|
||
|
|
"initially_select" : [ "node_4" ]
|
||
|
|
},
|
||
|
|
// the core plugin - not many options here
|
||
|
|
"core" : {
|
||
|
|
// just open those two nodes up
|
||
|
|
// as this is an AJAX enabled tree, both will be downloaded from the server
|
||
|
|
"initially_open" : [ "node_2" , "node_3" ]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.bind("create.jstree", function (e, data) {
|
||
|
|
$.post(
|
||
|
|
"./server.php",
|
||
|
|
{
|
||
|
|
"operation" : "create_node",
|
||
|
|
"id" : data.rslt.parent.attr("id").replace("node_",""),
|
||
|
|
"position" : data.rslt.position,
|
||
|
|
"title" : data.rslt.name,
|
||
|
|
"type" : data.rslt.obj.attr("rel")
|
||
|
|
},
|
||
|
|
function (r) {
|
||
|
|
if(r.status) {
|
||
|
|
$(data.rslt.obj).attr("id", "node_" + r.id);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.jstree.rollback(data.rlbk);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
})
|
||
|
|
.bind("remove.jstree", function (e, data) {
|
||
|
|
data.rslt.obj.each(function () {
|
||
|
|
$.ajax({
|
||
|
|
async : false,
|
||
|
|
type: 'POST',
|
||
|
|
url: "./server.php",
|
||
|
|
data : {
|
||
|
|
"operation" : "remove_node",
|
||
|
|
"id" : this.id.replace("node_","")
|
||
|
|
},
|
||
|
|
success : function (r) {
|
||
|
|
if(!r.status) {
|
||
|
|
data.inst.refresh();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.bind("rename.jstree", function (e, data) {
|
||
|
|
$.post(
|
||
|
|
"./server.php",
|
||
|
|
{
|
||
|
|
"operation" : "rename_node",
|
||
|
|
"id" : data.rslt.obj.attr("id").replace("node_",""),
|
||
|
|
"title" : data.rslt.new_name
|
||
|
|
},
|
||
|
|
function (r) {
|
||
|
|
if(!r.status) {
|
||
|
|
$.jstree.rollback(data.rlbk);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
})
|
||
|
|
.bind("move_node.jstree", function (e, data) {
|
||
|
|
data.rslt.o.each(function (i) {
|
||
|
|
$.ajax({
|
||
|
|
async : false,
|
||
|
|
type: 'POST',
|
||
|
|
url: "./server.php",
|
||
|
|
data : {
|
||
|
|
"operation" : "move_node",
|
||
|
|
"id" : $(this).attr("id").replace("node_",""),
|
||
|
|
"ref" : data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_",""),
|
||
|
|
"position" : data.rslt.cp + i,
|
||
|
|
"title" : data.rslt.name,
|
||
|
|
"copy" : data.rslt.cy ? 1 : 0
|
||
|
|
},
|
||
|
|
success : function (r) {
|
||
|
|
if(!r.status) {
|
||
|
|
$.jstree.rollback(data.rlbk);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$(data.rslt.oc).attr("id", "node_" + r.id);
|
||
|
|
if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
|
||
|
|
data.inst.refresh(data.inst._get_parent(data.rslt.oc));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$("#analyze").click();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" class="source below">
|
||
|
|
// Code for the menu buttons
|
||
|
|
$(function () {
|
||
|
|
$("#mmenu input").click(function () {
|
||
|
|
switch(this.id) {
|
||
|
|
case "add_default":
|
||
|
|
case "add_folder":
|
||
|
|
$("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
|
||
|
|
break;
|
||
|
|
case "search":
|
||
|
|
$("#demo").jstree("search", document.getElementById("text").value);
|
||
|
|
break;
|
||
|
|
case "text": break;
|
||
|
|
default:
|
||
|
|
$("#demo").jstree(this.id);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|