An simple jstree example that can create/rename/delete node

Question

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" ]
        });
});

Answer 1

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