javascript - 如何用数组对象填充 jstree 子级并在单击时返回它

Question

如何填充子项并在单击每个子项时获取其内容

在下面的代码中我想要:

[{"cid":2091,"name":"name1","text":"Child 1"},{"cid":2095,"name":"name2","text":"A Child 2"},{"cid":2098,"name":"name3","text":"A Child 3"}]

而不是 [“ child 1”、“ child 2”、“ child 3”]

我的意思是说，如果我点击Child 1，我应该得到{"cid":2091,"name":"name1","text":"Child 1"}

这里是 jsfiddle:http://jsfiddle.net/2Jg3B/2102/

$('#jstree').jstree({
        "json_data" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2","A Child 3"] // replace with [{"cid":2091,"name":"name1","text":"Child 1"},{"cid":2095,"name":"name2","text":"A Child 2"},{"cid":2098,"name":"name3","text":"A Child 3"}]
                },
                {
                    "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>

请注意:如果点击{"cid":2091,"name":"name1","text":"Child 1"} Child 1 等等。插件版本可以是新版本，也可以是这个版本

请帮助我提前致谢!

Answer 1

我不能 100% 确定这是否是正确的解决方案，但它确实有效。基本上我所做的是将 "text" 替换为 "data"。

$('#jstree').jstree({
  "json_data": {
    "data": [
      {
        "data": "A node",
        "metadata": { id: 23 },
        "children": [
          {
            "data": "Child 1",
            "cid": 2091,
            "name": "name1",
            "metadata": { "id": 2091, "text": "Child 1" }
          },
          {
            "data": "A Child 2",
            "cid": 2095,
            "name": "name2",
            "metadata": { "id": 2095, "text": "A Child 2" }
          },
          {
            "data": "A Child 3",
            "cid": 2098,
            "name": "name3",
            "metadata": { "id": 2098, "text": "A Child 3" }
          }
        ]
      },
      {
        "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 {
      console.log(data.inst.get_json());
    }
    //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>

更新

根据OP的评论，我们只需要跟踪哪个元素被点击了？在本例中，我只是从 console.log(data.inst.get_json(parent));

中删除了 parent