jquery.jstree は、node_jquery のダブルクリック イベント コードを追加します。

jsTree は、ドラッグ アンド ドロップ、コピー、削除、ショートカット キー、複数選択、カスタム ノード アイコン、カスタム右クリック メニュー、クロスページ保存ステータスなどをサポートする jquery ベースのツリー プラグインです。基本的に私が考えることができるすべてが備わっています。そして最も賞賛すべき点は、まったく遅いと感じないことです。

jsTree にはノード選択イベントがあります。つまり、

コードをコピーします コードは次のとおりです:

.bind("select_node.jstree", function(e, data) {
//alert(data.rslt.obj.attr("id") ":" data.rslt.obj .attr("rel" ));
})

実際には、ノードがクリックされるたびにトリガーされるため、ノードのクリックイベントに似ていると思います。ノードが選択されているかどうかに関係なく、クリックされます。

最近、ファイル管理をする際に、ノードをダブルクリックしてノードの編集ページを開くなど、ノードのダブルクリックイベントを使用する必要があります。

jstree にはダブルクリック イベントがありますが、ノードをターゲットとするのではなく、図に示すように、ツリーが配置されている領域をダブルクリックするとトリガーされます。上の写真。

ノードのダブルクリック イベントに最も近いのはノード選択イベントのはずなので、これもまた「ひょうたんの絵」です。

分析
833 行目で、this.get_container() の後にノードのクリック イベントが続きます

コードをコピー コードは次のとおりです。

.delegate("a", "click.jstree", $.proxy(function (event) {
event.preventDefault();
this.select_node(event.currentTarget, true,event);
}, this))

同様に、ここにノードのダブルクリック イベントを挿入します。

コードをコピーします コードは次のとおりです:

.delegate("a", "dblclick.jstree" , $.proxy(function(event) {
event.preventDefault();
this.dblclick_node(event.currentTarget, true,event);
}, this))

次に、dblclick_node を実装します。メソッドは問題ありません。

行 928 で select_node コードを見つけます。これはより複雑です。ただし、そのうちの 90% は、単一選択、複数選択の処理、選択結果の Cookie への保存など、ダブルクリックには役に立ちません。したがって、dblclick_node メソッドの実装は select_node よりもはるかに簡単です。

コードをコピー コードは次のとおりです。

dblclick_node: function(obj, check, e ) {
obj = this._get_node(obj);
if (obj == -1 || !obj || !obj.length) { return false }
this.__callback({ "obj ": obj });
},

OK、それだけです。

使用例
使用方法はselect_nodeと同じ

コードをコピー コードは以下の通り:

.bind("dblclick_node.jstree", function(e, data) {
//alert(data.rslt.obj.attr("id") ":" データ。 rslt.obj.attr(" rel"));
})

改良されたコードのダウンロード
/201007/yuanma/jquery.jstree.rarちなみに
jstree と別のプラグイン jquery validate は互換性がありません。この 2 つが共存すると、jstree もツリーを構築できますが、ゾンビのように展開することはできません。ここにマークを付けて、将来変更できるかどうかを確認してください。

著者: Bruce (The Art World of Programming)