用jstree重命名之前双击编辑节点答案

【问题标题】：Double click to edit node before rename with jstree用jstree重命名之前双击编辑节点
【发布时间】：2014-01-26 19:39:33
【问题描述】：

我设置了一个 jstree（在 div id="surveyManager" 上）。我已经将 dbclick 和 rename 函数绑定到它，如下所示：

 .bind("rename.jstree", function (node, data) {
            edit_node(node,data);
}),

.bind("dblclick.jstree", function (event) {
            //Double Click to Rename
                    jQuery("#surveyManager").jstree("rename");
    })

这里 edit_node 是一个必须实现的函数，以通过 ajax 调用传递所有节点信息。

是否可以设置树，以便在 dbclick 上，而不是重命名节点，我可以触发 edit_node(node,data)。也许是另一个 jstree 函数，或者我可以定义它的其他地方。请帮忙

【问题讨论】：

嗯，双击事件中调用edit_node？span>
我认为他可能缺少节点和数据变量。

标签： javascript jquery jstree

【解决方案1】：

您可以使用 jQuery'a trigger 方法触发定义的事件。

这可以在下面实现。

.bind("rename.jstree", function (node, data) {
  edit_node(node,data);
}),

.bind("dblclick.jstree", function (event) {
  //Double Click to Rename
  //jQuery("#surveyManager").jstree("rename");
  jQuery.trigger("rename.jstree");
})

【讨论】：

当我尝试这样做时，我收到错误 TypeError: jQuery.trigger is not a function
您之前是否遇到过与jQuery("#surveyManager").jstree("rename"); 相同的问题？如果您收到该错误，那么我会假设 jQuery 不包括在内。在您的控制台中，尝试输入 jQuery 或 $ 以查看其中一个变量是否全局存在。

【解决方案2】：

我在这里回答我自己的问题，我通过尝试其他一些事情来解决这个问题。我们几乎可以拥有一个 select_node 和编辑项，而不是双击重命名功能进行编辑。

传递的参数是事件和数据。我们可以通过event.target获取节点信息，数据已经提供，方便我们调用其他函数。

.bind("select_node.jstree", function (e,data) {
    var node = $(e.target).closest("li");
       edit_node(node,data);
   });

感谢您的帮助

【讨论】：

【解决方案3】：

我不确定我是否理解您的问题，但如果您想双击重命名，请尝试：

    tree.off('dblclick').on('dblclick','.jstree-anchor', renameNode);               

    function renameNode() {
        var instance = $.jstree.reference(this),
        node = instance.get_node(this);
        var old = node.text.replace(/\s+$/, ''); // trim right spaces

        inst.edit(node, null, function(node, success, cancelled) {
            if (!success || cancelled) return;
            if (node.text.replace(/\s+$/, '')==old) return;

            // all good, your rename code here
        });
    }

.off('dblclick') 用于防止双击时默认的jstree打开节点

请注意，如果您还在某处绑定了树的“点击”事件，它也会触发 dblclick。将 'click' 更改为 'singleclick' 并使用 jquery.singleclick.js

【讨论】：

我认为我们可以通过以下方式获取节点，而不是使用实例：var node = $("#divtree").jstree("get_selected")

【解决方案4】：

致任何阅读此答案的人。我不知道这个答案是否适用于旧的 jstree 或其他东西，但它对我不起作用。我在这个jsfiddle 上实现了点击编辑。

这是有效的代码：

$('#jstree_demo_div2')
  // listen for event
  .on('select_node.jstree', function (e, data) {
    var node = data.instance.get_node(data.selected[0]);
    data.instance.edit(node);
});

【讨论】：