web-dev-qa-db-ja.com

jsTreeのダブルクリックにカスタム動作をアタッチするにはどうすればよいですか?

JsTree jQueryプラグインを使用していて、ユーザーがノードをダブルクリックしたときにコードを実行したいと考えています。

私はそれを機能させることができないようです。 ondblclkイベントに関するドキュメントをいくつか見つけましたが、起動しません。

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

jstreeでダブルクリックイベントを処理するにはどうすればよいですか?

22
GiddyUpHorsey

私はこれを行うことができます:

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

nodeにはクリックされたliが含まれ、dataには私の情報を含むメタデータが含まれます。

25
GiddyUpHorsey

'dblclick.jstree'は、最新バージョンのjsTree1.0には存在しません。

DoubleClick for node:

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

Dblclickedノードだけが必要な場合はこれを挿入します

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

私のためにデータを取得するのは少し異なりますが、それ以外の点では、GiddyUpHorseyの答えは的を射たものでした。コードは次のとおりです。

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

上記の回答は、最新バージョンのjstree(3.3.4)では機能しません。
これは私に1日の心を曲げる作業を要しましたが、私はついにそれを手に入れました。ダブルクリックしてコードを編集しています。

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

そして、これが機能しています jsfiddle

2
user1254723

バージョン3.3.5として、私はこれを使用しています:

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