jQuery 如何将自定义行为附加到 jsTree 中的双击?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3674625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:53:54  来源:igfitidea点击:

How can I attach custom behaviour to a double click in jsTree?

jquerymouseeventdouble-clickjstree

提问by GiddyUpHorsey

I'm using the jsTree jQuery plugin and want to execute code when the user double clicks a node.

我正在使用 jsTree jQuery 插件并希望在用户双击节点时执行代码。

I can't seem to get it to work. I found some documentation on a ondblclkevent but it doesn't fire.

我似乎无法让它工作。我找到了一些关于ondblclk事件的文档,但它没有触发。

    browser.jstree(
            {
                plugins: ["themes", "json_data", "ui", "cookies"],
                callback:
                {
                    ondblclk: function (node, tree) {
                        if (!thisReportBrowserthis._isFoldersOnly) {
                            var f = node;
                        }
                    }
                }
            }
        );

How can I handle double click events with jstree?

如何使用jstree处理双击事件?

回答by GiddyUpHorsey

It turns out I can do this:

事实证明我可以这样做:

jstree.bind("dblclick.jstree", function (event) {
   var node = $(event.target).closest("li");
   var data = node.data("jstree");
   // Do my action
});

nodecontains the lithat was clicked and datacontains the metadata with my info in it.

node包含li被点击的和data包含我的信息的元数据。

回答by bizauto

'dblclick.jstree' doesn't exist in last version jsTree 1.0.

'dblclick.jstree' 在最新版本的 jsTree 1.0 中不存在。

DoubleClick for node:

双击节点:

$("#yourtree").delegate("a","dblclick", function(e) {
  var idn = $(this).parent().attr("id").split("_")[1];
  alert(idn); //return NodeID    
});

Insert this if you want just dblclicked node

如果您只想要 dblclicked 节点,请插入此项

if (this.className.indexOf('icon') == -1) {  /* is the node clicked a leaf? */ }

回答by Quynh

It's a bit different to get the data out for me, but otherwise GiddyUpHorsey's answer was spot-on. Here is the code again:

为我获取数据有点不同,但否则 GiddyUpHorsey 的回答是准确的。这里又是代码:

        jstree.bind("dblclick.jstree", function (e, data) {
            var node = $(e.target).closest("li");
            var id = node[0].id; //id of the selected node
        });

回答by user1254723

The above answers do not work on the latest version of jstree (which is 3.3.4)
This cost me a day of mind bending work but I finally got it. Here is working doubleclick to Edit code:

以上答案不适用于最新版本的 jstree(即 3.3.4)
这让我费了一天的心思,但我终于明白了。这是工作双击编辑代码:

$('#tree1').bind("dblclick.jstree", function (event) {
  var tree = $(this).jstree();
  var node = tree.get_node(event.target);
  tree.edit(node);
});

and here is a working jsfiddle.

这是一个有效的jsfiddle

回答by Y. ?zdemir

as version 3.3.5, I'm using this one:

作为 3.3.5 版,我正在使用这个:

        $('#jstree').on("dblclick.jstree", function (e) {
            var instance = $.jstree.reference(this),
            node = instance.get_node(e.target);
            // Code
        });

回答by MaxEcho

It worked for me

它对我有用

$("#MyTree").on('dblclick','.jstree-anchor', function (e) {
    var instance = $.jstree.reference(this),
    node = instance.get_node(this);
    console.log(node);
});