Question

jstree和jquery的新手，正在寻找一个可以创建，重命名和删除节点的简单教程，但是即使有一些很好的教程（不在我的环境中工作或者不在＆＃），也找不到它。 39;解决需要）。

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

快照：
enter image description here

http://jsfiddle.net/ba75Y/2/
要做ajax，你可以参考下面的代码片段，注意＆＃34; url＆＃34;领域。您的响应处理程序应返回类似

的内容

["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”插件可以在这里提供确切的帮助。可以找到一个如何使用contextmenu插件的简单示例。 https://everyething.com/jsTree-with-Context-Menu

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

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

1 个答案: