jstreetable
Version:
table plugin for jstree
152 lines (128 loc) • 4.76 kB
HTML
<html>
<head>
<title>jstreetable dynamic root node test</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet">
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript" src="../jstreetable.js"></script>
<style type="text/css">
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url('http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css');
</style>
<script type="text/javascript">
$(document).ready(function () {
// Will work fine with following added
//var data = [{id:"ded",text:"Works fine",type:"default"}];
// This will cause a bug when
var data = [{text:"abc"}],
types = {
"#": {
"max_children": 1,
"max_depth": 4,
"valid_children": ["root"]
},
"root": {
"icon": "/static/3.0.2/assets/images/tree_icon.png",
"valid_children": ["default"]
},
"default": {
"valid_children": ["default", "file"]
},
"file": {
"icon": "glyphicon glyphicon-file",
"valid_children": []
},
},
table = {
columns: [
{ width: 210, header: "Nodes", title: "_DATA_" },
{ cellClass: "col1", value: "price", width: 60, header: "Price", title: "price" },
{ cellClass: "col2", value: "size", header: "Qty", title: "size" }
],
resizable: false
};
//Display tree
$("#tree_good").jstree({
"core": {
data: data,
"check_callback": true
},
table: table,
"types": types,
plugins: ["themes", "json", "table", "dnd","contextmenu"]
// remove "table" from above and it works fine with empty data
});
$("#tree_only").jstree({
"core": {
data: [],
"check_callback": true
},
table: table,
"types": types,
plugins: ["themes", "json", "dnd","contextmenu"]
});
$("#tree_bad").jstree({
"core": {
data: [],
"check_callback": true
},
table: table,
"types": types,
plugins: ["themes", "json", "table", "dnd","contextmenu"]
// remove "table" from above and it works fine with empty data
});
//Add action on menu
$(".menu input").click(function () {
debugger;
var tree = $(this).closest(".wrapper").find(".mytree");
switch (this.id) {
case "remove":
var id = $("div#tree").jstree("get_selected");
tree.jstree("delete_node", id);
break;
case "add_folder":
tree.jstree("create_node", null, null, "last", "create_node", true);
break;
default: break;
}
});
});
</script>
</head>
<body>
<h2>Tree table Dynamic Root Test</h2>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="wrapper">
<div class="menu">
<input id="add_folder" type="button" value="add node"/>
<input id="remove" type="button" value="remove node"/>
</div>
<div>Tree with preset nodes (works)</div>
<div class="mytree" id="tree_good"></div>
</div>
<hr/>
<div class="wrapper">
<div class="menu">
<input id="add_folder" type="button" value="add node"/>
<input id="remove" type="button" value="remove node"/>
</div>
<div>Tree with no nodes (fails)</div>
<div class="mytree" id="tree_bad"></div>
</div>
<hr/>
<div class="wrapper">
<div class="menu">
<input id="add_folder" type="button" value="add node"/>
<input id="remove" type="button" value="remove node"/>
</div>
<div>Tree without table (works)</div>
<div class="mytree" id="tree_only"></div>
</div>
</div>
</div>
</div>
</body>
</html>