javascript - jstree中如何获取被点击的对象

Question

想在javascript中获取被点击的树对象值

我想要实现的是当用户点击一个树 Node 然后它的相关数据我想得到原始对象

这是我试过没有得到对象的方法:

$('#jstree').jstree({
        "json_data" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2" ]
                },
                {
                    "attr" : { "id" : "li.node.id1" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                }
            ]
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });
    
   $("#jstree").bind(
        "select_node.jstree", function(evt, data){
            //selected node object: data.node;
            console.log('data',data.inst.get_json());
            console.log('data.node.id',data);
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>

预期输出:

从上面的代码片段中，当我点击 Child 1 或 A Child 2 时，我应该会看到 object

   {
      "data" : "A node",
      "metadata" : { id : 23 },
      "children" : [ "Child 1", "A Child 2" ]
   }

当用户点击 Long format demo 时，我应该在 object 下方

 {
       "attr" : { "id" : "li.node.id1" },
       "data" : {
                   "title" : "Long format demo",
                    "attr" : { "href" : "#" }
                }
    }

请帮助我提前谢谢!!!

Answer 1

由于您的jstree版本较旧，建议您更新您的jstree版本。但是，对于 1.0v，如果用户单击子 Node ，您可以使用下面的代码获取父 Node 。

$('#jstree').jstree({
        "json_data" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2" ]
                },
                {
                    "attr" : { "id" : "li.node.id1" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                }
            ]
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });

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

          if(data.inst._get_parent().length <= 0 || data.inst._get_parent()===-1){
            console.log('data',data.inst.get_json());
            console.log('data.node.id',data);
          }else{
             var parent = data.inst._get_parent();
              console.log(data.inst.get_json(parent));
          }
            //selected node object: data.node;

      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>