web-dev-qa-db-ja.com

jstreeの行要素のクリックイベントを取得する方法

Jstreeの行要素のクリックイベントの取得方法を教えてください。私はフィドルでjstreeのデモを作成します。パネルで作成されます。「パネルを開く」ボタンを押してパネルを確認する必要があります

Jstree要素のイベントをクリックして、クリック時にIDを取得したいですか？ツリーを準備するには、「テストケースの追加ボタン」を何度も押してから、「パネルを開く」ボタンを押す必要があります。

これが私のフィドルです http://jsfiddle.net/ZLe2R/6/

function addMenuItemsOfTestSuit(id){

 var menuid = "menu_" + id;
       var ref = $('#tree').jstree(true);
        alert('thank')
    ref.create_node("#", {"id" : menuid, "text" : id});

        ref.deselect_all();

}
javascriptjqueryjstree
13
user3530755

このイベントリスナーを使用します。

$('#tree').on("select_node.jstree", function (e, data) { alert("node_id: " + data.node.id); });

イベントのリストについては jsTree APIイベント を参照してください。

編集：フィドルを作成しました： http://jsfiddle.net/y7ar9/4/

25
oerl

使用できます

$(document).on('click', '.jstree-anchor', function(e) {...});

クリックハンドラーを独自の関数に移動して、アンカーの親からidを取得することができます。

$(document).on('click', '.jstree-anchor', function(e) {
    var anchorId = $(this).parent().attr('id');
    var clickId = anchorId.substring(anchorId.indexOf('_') + 1, anchorId.length);
    onMenuItemClick(clickId, e);
});
$(document).on('click', '.clickTestCaseRow', function (e) {
    onMenuItemClick(this.id, e);
});
function onMenuItemClick(clickId, e) {
    hideDisplayView();
    displayNewView(clickId);
    e.stopPropagation();
}

これがフィドルです

5
Trevin Avery

個人的には、代わりに「activate_node」イベントが好きです。ノード選択の変更でポストバックを実行してもページがリロードされ、ノードがまだ選択されている場合は、別のイベントが発生して無限のポストバックループが発生することはありません。

$('#jstree').on('activate_node.jstree', function (e, data) {
     if (data == undefined || data.node == undefined || data.node.id == undefined)
                return;
    alert('clicked node: ' + data.node.id);
});
1
JJ_Coder4Hire