javascript - jsTreeonSelectイベント

Question

jsTreeで選択されているノードのテキストを取得しようとしています。ツリーにデータを入力してonSelectイベントをトリガーすることはできますが、クリックされたノードがわかりません。テキストをフェッチするために使用する例をネット上で見ましたがdata.rslt.obj.attr("data")、これは私にとって未定義を返しています。さらに、を使用して選択したノードを取得しようとすると.jstree('get_selected')、オブジェクト内のどこにもノードテキストが見つかりません。ノードテキストを取得するにはどうすればよいですか？

これが私のonSelectコールバック関数です：

function onSelect(event, data)
{
    // Get the name of the equipment that was selected.
    var selected_node = $("#equipment_tree").jstree('get_selected');
    var equipment_name = data.rslt.obj.attr("data");
}

score 52 · Accepted Answer

2018年に更新。

@ProfKのコメントのおかげで、新しいバージョンのjstreeでAPIが変更されました。jstree v3.1.0（またはそれ以前）では、APIは次のように変更されました。

$("#treeContainer").on(
        "select_node.jstree", function(evt, data){
            //selected node object: data.node;
        }
);

jstreeの古いバージョン（2013より前）の場合。

選択したノードオブジェクトとそのテキストは、次の方法で取得できます。

$("#treeContainer").bind(
        "select_node.jstree", function(evt, data){
            //selected node object: data.inst.get_json()[0];
            //selected node text: data.inst.get_json()[0].data
        }
);

score 18 · Accepted Answer

ノードからテキストを取得するためのjstreeの新しいバージョンでは、data.node.textを使用する必要があります

$("#treeContainer").on("select_node.jstree",
     function(evt, data){
          alert(data.node.text);
     }
);

score 1 · Accepted Answer

$("#equipment_tree").bind("select_node.jstree", function(evt, data){

             var i, j, r = [], ids=[];
                for(i = 0, j = data.selected.length; i < j; i++) {
                  r.push(data.instance.get_node(data.selected[i]).text);
                }
                alert('Selected: ' + r.join(', '));
           }
);

これを試してみる必要があります。

score 1 · Accepted Answer

現在のバージョンでは、で使用するのが最適get_selectedですfull: true。これは、メソッドがIDだけでなく完全なオブジェクトを返すことを意味します。

したがって、たとえば：

$("#treeNode").jstree('get_selected', true);

また：

$("#treeNode").jstree().get_selected(true);

配列内の各要素には、テキストまたはIDとしてすべてのプロパティがあります。

score -1 · Accepted Answer

クリックイベントはデータを渡さないため、イベントオブジェクトを使用する必要があります。

.bind("click.jstree", function (event) {
    alert($(event.currentTarget).parent("li:first").text().trim());
});

javascript - jsTreeonSelectイベント

5 に答える 5

Related

Reference