mirror of
https://github.com/salesagility/SuiteCRM.git
synced 2025-02-21 20:56:08 +00:00
146 lines
No EOL
3.1 KiB
HTML
146 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>jstree basic demos</title>
|
|
<style>
|
|
html { margin:0; padding:0; font-size:62.5%; }
|
|
body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
|
|
h1 { font-size:1.8em; }
|
|
.demo { overflow:auto; border:1px solid silver; min-height:100px; }
|
|
</style>
|
|
<link rel="stylesheet" href="../../dist/themes/default/style.min.css" />
|
|
</head>
|
|
<body>
|
|
<h1>HTML demo</h1>
|
|
<div id="html" class="demo">
|
|
<ul>
|
|
<li data-jstree='{ "opened" : true }'>Root node
|
|
<ul>
|
|
<li data-jstree='{ "selected" : true }'>Child node 1</li>
|
|
<li>Child node 2</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h1>Inline data demo</h1>
|
|
<div id="data" class="demo"></div>
|
|
|
|
<h1>Data format demo</h1>
|
|
<div id="frmt" class="demo"></div>
|
|
|
|
<h1>AJAX demo</h1>
|
|
<div id="ajax" class="demo"></div>
|
|
|
|
<h1>Lazy loading demo</h1>
|
|
<div id="lazy" class="demo"></div>
|
|
|
|
<h1>Callback function data demo</h1>
|
|
<div id="clbk" class="demo"></div>
|
|
|
|
<h1>Interaction and events demo</h1>
|
|
<button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>
|
|
<div id="evts" class="demo"></div>
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
|
<script src="../../dist/jstree.min.js"></script>
|
|
|
|
<script>
|
|
// html demo
|
|
$('#html').jstree();
|
|
|
|
// inline data demo
|
|
$('#data').jstree({
|
|
'core' : {
|
|
'data' : [
|
|
{ "text" : "Root node", "children" : [
|
|
{ "text" : "Child node 1" },
|
|
{ "text" : "Child node 2" }
|
|
]}
|
|
]
|
|
}
|
|
});
|
|
|
|
// data format demo
|
|
$('#frmt').jstree({
|
|
'core' : {
|
|
'data' : [
|
|
{
|
|
"text" : "Root node",
|
|
"state" : { "opened" : true },
|
|
"children" : [
|
|
{
|
|
"text" : "Child node 1",
|
|
"state" : { "selected" : true },
|
|
"icon" : "jstree-file"
|
|
},
|
|
{ "text" : "Child node 2", "state" : { "disabled" : true } }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
});
|
|
|
|
// ajax demo
|
|
$('#ajax').jstree({
|
|
'core' : {
|
|
'data' : {
|
|
"url" : "./root.json",
|
|
"dataType" : "json" // needed only if you do not supply JSON headers
|
|
}
|
|
}
|
|
});
|
|
|
|
// lazy demo
|
|
$('#lazy').jstree({
|
|
'core' : {
|
|
'data' : {
|
|
"url" : "//www.jstree.com/fiddle/?lazy",
|
|
"data" : function (node) {
|
|
return { "id" : node.id };
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// data from callback
|
|
$('#clbk').jstree({
|
|
'core' : {
|
|
'data' : function (node, cb) {
|
|
if(node.id === "#") {
|
|
cb([{"text" : "Root", "id" : "1", "children" : true}]);
|
|
}
|
|
else {
|
|
cb(["Child"]);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// interaction and events
|
|
$('#evts_button').on("click", function () {
|
|
var instance = $('#evts').jstree(true);
|
|
instance.deselect_all();
|
|
instance.select_node('1');
|
|
});
|
|
$('#evts')
|
|
.on("changed.jstree", function (e, data) {
|
|
if(data.selected.length) {
|
|
alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
|
|
}
|
|
})
|
|
.jstree({
|
|
'core' : {
|
|
'multiple' : false,
|
|
'data' : [
|
|
{ "text" : "Root node", "children" : [
|
|
{ "text" : "Child node 1", "id" : 1 },
|
|
{ "text" : "Child node 2" }
|
|
]}
|
|
]
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |