javascript - jsTree 创建文件夹 - 在用户输入名称之前创建的文件夹

Question

我有一棵树。

我可以创建一个文件夹。

但是这样做有一个问题。 jsTree 下载中包含的 filebrowser 演示中也存在此问题。

这是一个用户体验问题，所以我希望我能描述得足够好。

1) the user clicks on the node/folder where they want the new folder to be created.

2) they select "New->Folder" from the context menu.

3) at this time, in the background, jsTree triggers the "create_node.jstree" event with the default name "New node". create_node.jstree event does an ajax get back to the web api and a folder is created on the file system.

4) HOWEVER, on the page the user is looking at a field that is prompting the user to enter the custom name of the node/folder.

5) once the user enters a name the node on the page is updated but jsTree doesn't call the back end again to rename the folder.

结果是一个名为“的节点”和文件系统上一个名为“新节点”的文件夹。

什么更合适:

Only after the user enters the customer node/folder name does jsTree call for the create_node.jstree event.

这将允许我的后端代码执行、排除故障并报告按用户要求命名的文件夹的成功/失败。

代码片段create_node 事件

$('#mytree').on('create_node.jstree', function (e, dta) {
        $.get('/<whatever>/FolderBrowser?operation=create_node', { 'type': dta.node.type, 'id': dta.node.parent, 'text': dta.node.text })
            .done(function (d) {
                dta.instance.set_id(dta.node, d.id);
            })
            .fail(function () {
                dta.instance.refresh();
            });
    });

和树本身

$('#mytree').jstree(....
, 'contextmenu': {
    'items': function (node) {
        var tmp = $.jstree.defaults.contextmenu.items();
        delete tmp.rename;
        delete tmp.remove;
        delete tmp.ccp;
        tmp.create.label = "New Folder";
        tmp.create.action = function (dta) {
            // I have $10 for you if you can comprehensively explane everything going on in the following.
            var inst = $.jstree.reference(dta.reference)
            var obj = inst.get_node(dta.reference);
            inst.create_node(obj, { type: "default" }, "last", function (new_node) {
                setTimeout(function () { inst.edit(new_node); }, 0);
            });
        }
        return tmp;
    }

    , 'check_callback': function (o, n, p, i, m) {
        if (m && m.dnd && (m.pos !== 'i'))
            return false;
        /* not allowed options for this application
        if(o === "move_node" || o === "copy_node") {
            if(this.get_node(n).parent === this.get_node(p).id) { return false; }
        }
        */
        return true;
    }

Answer 1

jsTree 的工作方式与您所描述的非常相似。

1) Calls the back end to actually create the folder by the default name. At that point you can send success/fail returned to the page.

2) On success, calls the back end again to rename the folder to the user's desired name. At this point you can again send success/fail.

您的代码不包含根据需要重命名的功能。将 rename_node.jstree 事件添加到您的代码中。以及其他必要的部分。

但是，根据代码中的注释，您不必将“重命名”包含为上下文菜单选项。