jquery - 一个简单的jstree示例，可以创建/重命名/删除节点

Question

刚接触 jstree 和 jquery，一直在寻找一个可以创建、重命名和删除节点的简单教程，但找不到它，尽管有一些很好的教程(要么在我的环境中不起作用，要么没有解决需求)。

看到一个有趣的例子http://www.jstree.com/demo/ ，但由于其他示例和所有 html 格式的混合，它变得复杂。花了一些时间并将其降低到最低水平。希望它能对您的项目有所帮助!

快照:

http://jsfiddle.net/ba75Y/2/
要进行ajax，您可以引用以下代码片段，注意“url”字段。 您的响应处理程序应该返回类似的内容

["Child 1", { "id" : "demo_child_1", "text" : "Child 2", "children" : [ { "id" : "demo_child_2", "text" : "One more", "type" : "file" }] }]

Ajax 片段

$(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

不确定确切的要求，但似乎 jsTree“Contextmenu”插件可以在这里提供确切的帮助。可以找到如何使用上下文菜单插件的简单示例 https://everyething.com/jsTree-with-Context-Menu

但是如果您想根据您的要求自定义[创建、重命名、删除等]菜单，您可以在 https://everyething.com/jsTree-with-Custom-Context-Menu 找到类似的简单示例