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

How to associate a data to a node in jstree?

提问by Abhii

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

In this above code I have created a jstree and upon click of a button with id #createIf_c I am adding a node with title "if" but as I want some more data to be associated with this node , I have added more attributes to it while creating the node. Next when I am trying to access this associated data, here "value" then I am getting the alert 'undefined'. So is there a different way for associating data with a node? or a different way of accessing the associated data of a node is jstree?..please help....

在上面的代码中，我创建了一个 jstree，单击一个带有 id #createIf_c 的按钮后，我添加了一个标题为“if”的节点，但由于我希望有更多数据与该节点相关联，因此我向它添加了更多属性在创建节点时。接下来，当我尝试访问此关联数据时，此处为“值”，然后我收到警报“未定义”。那么有没有一种不同的方式将数据与节点相关联？或者访问节点关联数据的另一种方式是jstree？..请帮忙..

采纳答案by Abhii

The simplest way to do this is just like adding an attribute to an html element i.e.,

最简单的方法就是为 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

回答by mohammed barqawi

you can put your extra data in the JSON node.data this is not documented

你可以把你的额外数据放在 JSON 节点中。数据这没有记录

回答by Ace

Plz refer to the Author's answer.

请参考作者的回答。

You could edit info by $('#tree').jstree(true).get_node("some_node_id"), and post the extra data as json by $('#tree').jstree(true).get_json("some_node_id").

您可以通过 编辑信息$('#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;

回答by RickL

Using jstree v3, you can associate attributes using the plugin like so:-

使用 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);

The expected format of the node parameter (from the source comments):

节点参数的预期格式（来自源评论）：

// 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
//}

and the expected format of the create_nodeparameters:

以及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

回答by StackOverFlow

Proper way to associate a data to node is as follows:

将数据关联到节点的正确方法如下：

If you are adding more data i.e. attribute then mentioned all attributes (name, value) under "attr"property

如果您要添加更多数据，即属性，则在“attr”属性下提及所有属性（名称、值）

"attr":{ attributeName1:"attributeValue1", attributeName2:"attributeValue2"...... }

" attr":{ attributeName1:"attributeValue1", attributeName2:"attributeValue2"...... }

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

回答by Marco Balestra

To associate data from HTML definition:

关联来自 HTML 定义的数据：

If you want to associate data using HTML definition of the tree, use:

如果要使用树的 HTML 定义关联数据，请使用：

<li id="treesiteadmin-serverStatus" data-ic='{"form":"site.serverstatus"}' data-jstree='{"icon":"glyphicons glyphicons-server"}'>Stato del server</li>

The "data" property of currently selected node will be:

当前选定节点的“数据”属性将是：

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

See result - "data" property of selected node

查看结果 - 所选节点的“数据”属性

回答by Alp Altunel

div id="tree_1" class="tree-demo">
    <ul>
        <li data-jstree='{ "opened" : false }' id="c67"> S?cak ??ecekler
            <ul>
                <li data-jstree='{ "type" : "file", "selected" : false }' id="500">?ay</li>
                <li data-jstree='{ "type" : "file", "selected" : false }' id="501">Fincan ?ay</li>

            </ul>
        </li>
        <li data-jstree='{ "opened" : true }' id="c68"> So?uk ??ecekler
            <ul>
                <li data-jstree='{ "type" : "file", "selected" : true }' id="514">Ayran</li>
                <li data-jstree='{ "type" : "file", "selected" : true }' id="515">Kola</li>
                <li data-jstree='{ "type" : "file", "selected" : true }' id="516">Meyveli Gazoz</li>                    
            </ul>
        </li>
    </ul>
</div>

this html is very suitable for custom ids if you want to solve it by <ul>and <li>elements.

如果你想通过<ul>和<li>元素来解决它，这个html非常适合自定义id 。