jsTree onSelect 事件答案

【问题标题】：jsTree onSelect eventjsTree onSelect 事件
【发布时间】：2012-04-18 22:10:19
【问题描述】：

我一直在尝试获取在 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");
}

【问题讨论】：

标签： javascript jstree

【解决方案1】：

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
        }
);

【讨论】：

啊哈，这行得通。我发现的一个更短的版本是data.inst.get_text()。
这个事件似乎只在父节点被选中时触发，但不会为每个被选中的子节点触发。在我的情况下使用 $("#treeNode").jstree().get_selected(true);正如 mikus 提到的那样有帮助。
@JGeerWM 如果您只想要子元素而不想要父元素，那么您可以使用$("#treeNode").jstree().get_bottom_selected(true) 我知道它的回复较晚.. 但希望它可以帮助某人
我发现data.inst是未定义的，但是我只是通过data.node获得了节点。
jQuery bind 已弃用，请改用on。

【解决方案2】：

从节点获取文本的jstree新版本应该使用data.node.text

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

【讨论】：

【解决方案3】：

$("#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(', '));
           }
);

你必须试试这个。

【讨论】：

【解决方案4】：

对于当前版本，最好将get_selected 与full: true 一起使用，这意味着该方法将返回完整的对象，而不仅仅是id。

例如：

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

或：

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

数组中的每个元素都将具有文本或 id 形式的所有属性。

【讨论】：

【解决方案5】：

点击事件不传递任何数据，因此需要使用事件对象。

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

【讨论】：

无论如何这将是一个非常糟糕的解决方案