$("#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?..请帮助....
6 个解决方案
#1
13
you can put your extra data in the JSON node.data this is not documented
您可以将您的额外数据放在JSON node.data中,但这没有记录
#2
12
Plz refer to the Author's answer.
Plz参考作者的答案。
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;
#3
4
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
#4
2
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);
});
#5
0
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:
当前所选节点的“data”属性为:
{"jstree":{"icon":"glyphicons glyphicons-server"},"ic":{"form":"site.serverstatus"}}
See result - "data" property of selected node
请参见结果 - 所选节点的“数据”属性
#6
0
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_node
parameters:
和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
#1
13
you can put your extra data in the JSON node.data this is not documented
您可以将您的额外数据放在JSON node.data中,但这没有记录
#2
12
Plz refer to the Author's answer.
Plz参考作者的答案。
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;
#3
4
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
#4
2
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);
});
#5
0
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:
当前所选节点的“data”属性为:
{"jstree":{"icon":"glyphicons glyphicons-server"},"ic":{"form":"site.serverstatus"}}
See result - "data" property of selected node
请参见结果 - 所选节点的“数据”属性
#6
0
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_node
parameters:
和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