如何将数据关联到jstree中的节点?

$("#ifTree").jstree({ "plugins" : ["themes","html_data","ui","crrm"], "themes" : { "theme" : "apple", "dots" : true, "icons" : false } }); $("#createIf_c").click(function () { $("#ifTree").jstree("create",null,"inside", { "data" :{ title:"if",value:"expression"} }, function() {}, true); }); $("#display").click(function(){ var a = $.jstree._focused().get_selected(); alert(a.attr("value")); }); 

在上面这段代码中,我创建了一个jstree,点击了一个id为#createIf_c的按钮,我添加了一个标题为“if”的节点,但由于我想要更多的数据与这个节点相关联,我为它添加了更多的属性在创建节点时。 接下来,当我尝试访问此关联数据时,此处为“值”,然后我收到警报“未定义”。 那么将数据与节点关联有不同的方法吗? 或者以不同的方式访问节点的关联数据是jstree?..请帮助….

您可以将您的额外数据放在JSON node.data中, 但这没有记录
在此处输入图像描述

Plz参考作者的答案 。

您可以通过$('#tree').jstree(true).get_node("some_node_id")编辑信息,并将额外数据作为json发布$('#tree').jstree(true).get_json("some_node_id")

 You can add anything you want to the data object. Like: { "id" : "some_node_id" "text" : "some node", ... "data" : { "foo" : "bar", "example_array" : ["1",2,true], "obj" : {"asdf":"asdf1"} } ... And later on you can retrieve it like so: $('#tree').jstree(true).get_node("some_node_id").data.obj.asdf; // this would equal "asdf1" $('#tree').jstree(true).get_node("some_node_id").data.example_array; // this would be an array: ["1",2,true] Setting other values is just as simple - you are working with a normal object: $('#tree').jstree(true).get_node("some_node_id").data.obj.asdf = "some other value"; $('#tree').jstree(true).get_node("some_node_id").data.example_array = "I do not want this an array anymore"; $('#tree').jstree(true).get_node("some_node_id").data.obj.new_property = 1024; 

最简单的方法就像向html元素添加属性,即

  var node = $.jstree._focused().get_selected(); //get the selected node or which ever you want the data to be associated with node.attr("expression","xyz"); //add an attribute (name,value) here, name-expression and value-xyz 

将数据与节点关联的正确方法如下:

如果要添加更多数据,即属性,则在“attr”属性下提及所有属性(名称,值)

attr ”:{attributeName1:“attributeValue1”,attributeName2:“attributeValue2”……}

  $("#createIf_c").click(function () { $("#ifTree").jstree("create",null,"inside", { "data" : "testNodeName", "attr": { title:"if",value:"expression"} }, function() {}, true); }); 

要关联HTML定义中的数据:

如果要使用树的HTML定义关联数据,请使用:

 
  • Stato del server
  • 当前所选节点的“data”属性为:

     {"jstree":{"icon":"glyphicons glyphicons-server"},"ic":{"form":"site.serverstatus"}} 

    请参见结果 – 所选节点的“数据”属性

    使用jstree v3,您可以使用插件关联属性,如下所示: –

     // create instance var inst = $("#tree-id").jstree(); // create node definition var node = { id: "new_node_id", text: "New Node", li_attr: { "data-files": "false" }, a_attr: { "data-url": "some_url" } }; // create node var newNodeId = inst.create_node("#", node); 

    节点参数的预期格式(来自源注释):

     // Expected format of the node (there are no required fields) //{ // id: "string" // will be autogenerated if omitted // text: "string" // node text // icon: "string" // string for custom // state: { // opened: boolean // is the node open // disabled: boolean // is the node disabled // selected: boolean // is the node selected // }, // children: [] // array of strings or objects // li_attr: { } // attributes for the generated LI node // a_attr: { } // attributes for the generated A node //} 

    create_node参数的预期格式:

     // create_node(par, node, pos, callback, is_loaded) // par (object) - the parent node (to create a root node use "#" (string) or `null`) // node (object) - the data for new node (valid JSON object, or a simple string with the name) // pos (object) - index to insert the node, "first" and "last" are supported, default is "last" // callback (function) - a function to be called once the node is created // is_loaded (boolean) - internal argument indicating if the parent node was succesfully loaded // returns (string) - the ID of the newly create node 
     div id="tree_1" class="tree-demo"> 
    • Sıcak İçecekler
      • Çay
      • Fincan Çay
    • Soğuk İçecekler
      • Ayran
      • Kola
      • Meyveli Gazoz

    如果你想通过

    • 元素解决它,这个html非常适合自定义ID。