Question

我有一棵树。

我可以创建一个文件夹。

然而，这样做存在问题。在jsTree下载中包含的filebrowser演示中也存在此问题。

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

1）用户单击他们想要新文件夹的节点/文件夹   要被创造。

2）他们选择＆＃34; New-＆gt; Folder＆＃34;从上下文菜单中。

3）此时，在后台，jsTree触发了   ＆＃34; create_node.jstree＆＃34;具有默认名称＆＃34;新节点＆＃34;的事件。   create_node.jstree事件让ajax回到web api和a   文件夹是在文件系统上创建的。

4）然而，在页面上，用户正在查看一个字段   提示用户输入节点/文件夹的自定义名称。

5）一旦用户输入名称，页面上的节点就会更新   jsTree不会再次调用后端来重命名文件夹。

结果是一个名为＆＃34的节点;和文件系统上的一个名为＆＃34; new node＆＃34;。

的文件夹

什么更合适：

只有在用户输入客户节点/文件夹名称后才会执行jsTree 调用create_node.jstree事件。

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

代码剪辑 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）默认情况下，调用后端实际创建文件夹   名称。此时，您可以将成功/失败发送回页面。

2）成功后，再次调用后端将文件夹重命名为   用户所需的名称。此时您可以再次发送成功/失败。

您的代码不包含根据需要重命名的工具。将rename_node.jstree事件添加到您的代码中。和其他位一样。

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

jsTree create folder - 用户

1 个答案: