New to jstree and jquery, was looking for a simple tutorial that can create, rename and delete nodes, but couldn't find it even though there are a few good tutorials (either not working in my environment or don't address the need).
Saw an interesting example http://www.jstree.com/demo/, but it's complicated by the mix of other examples and all the html formattings. Spent some time and reduced it to a minimum level. Hope it can help you in your project!
Snapshot:
http://jsfiddle.net/ba75Y/2/
To do the ajax, you can refer to the following snippet, pay attention to the "url" field.
Your response handler should return something like
["Child 1", { "id" : "demo_child_1", "text" : "Child 2", "children" : [ { "id" : "demo_child_2", "text" : "One more", "type" : "file" }] }]
Ajax snippet
$(function () {
var to = false;
$('#demo_q').keyup(function () {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#demo_q').val();
$('#jstree_demo').jstree(true).search(v);
}, 250);
});
$('#jstree_demo')
.jstree({
"core" : {
"animation" : 0,
"check_callback" : true,
"themes" : { "stripes" : true },
'data' : {
'url' : function (node) {
return 'handler.php';
},
'data' : function (node) {
return { 'id' : node.id };
}
}
},
"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" : [] }
},
"plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]
});
});
Not sure the exact requirement but seems like jsTree "Contextmenu" plugin can be exact help here. A simple example of how a contextmenu plugin can be used, can be found https://everyething.com/jsTree-with-Context-Menu
But if you want to customise [create, rename, delete etc.] the menu as per your requirement, you can find similar simple example at https://everyething.com/jsTree-with-Custom-Context-Menu