javascript 在 json_data 加载后更改 jsTree 节点 css 类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5813042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change jsTree node css class after json_data loads?
提问by iHaveacomputer
i load my jsTree via json_data whenever the user clicks the [+] next to a folder. What i want to do is apply css classes to some of the nodes to highlight them for the user. Not talking about mouse-hover or the currently selected node here, but multiple nodes some human has to review later. The appropriate css class is already inside the JSON response from the server:
每当用户单击文件夹旁边的 [+] 时，我都会通过 json_data 加载我的 jsTree。我想要做的是将 css 类应用到一些节点以向用户突出显示它们。不是在这里谈论鼠标悬停或当前选择的节点，而是一些人稍后必须查看的多个节点。相应的 css 类已经在来自服务器的 JSON 响应中：
[
{"attr":{"id":"node_5","rel":"document","page_id":"4"},"data":"Test123","csscl":"ui-state-error","state":""},
{"attr":{"id":"node_6","rel":"folder","page_id":"6"},"data":"Services","csscl":"","state":"closed"}
]
my "Test123" node should get class "ui-state-error" later in the tree. Here is my jsTree:
我的“Test123”节点稍后应该在树中获得“ui-state-error”类。这是我的 jsTree：
$(function () {
// Settings up the tree. note to self: dont use the cookie plugin here, this will always overwrite pre-selected nodes
$("#jstree").jstree({
"plugins" : [ "themes", "json_data", "ui", "types", "hotkeys",],
"json_data" : {
"ajax" : {
"url" : "inc/tree_server.php",
"data" : function (n) {
return {
"operation" : "get_children",
"id" : n.attr ? n.attr("id").replace("node_","") : 1
};
},
success: function(n) {
for (var i in n)
{
jqid = "#"+n[i].attr["id"]+" a";
$(jqid).addClass(n[i].csscl);
}
}
}
},
// the UI plugin
"ui" : {
// selected onload
"initially_select" : [ "node_<?=$p->oTopic->iId;?>" ]
},
// the core plugin
"core" : {
"initially_open" : [ <?=$p->oTopic->sJstreeOpenSeq;?> ],
"animation" : 0
}
})
This won't work. What i think happens is that "success: function(n)" is called after the tree is loaded, but before it is drawn or ready for JQuery to find the selected node and apply my class. Anyone knows how to solve this, or maybe there is a better way to apply a css class to $("#node5 a") in that case...?
这行不通。我认为发生的是“成功：函数（n）”在树加载之后被调用，但在它被绘制或准备好让 JQuery 找到所选节点并应用我的类之前。任何人都知道如何解决这个问题，或者在这种情况下可能有更好的方法将 css 类应用于 $("#node5 a") ......？
采纳答案by ink
I think I found a workaround.
我想我找到了解决方法。
success: function(n) {
for (var i in n)
{
some_global_array_id.push(n[i].attr["id"]);
some_global_array_data.push(n[i].csscl);
}
}
And then after loading and drawing you can call function like this:
然后在加载和绘制之后，您可以像这样调用函数：
$("#jstree").jstree({
// ... code you posted
}).bind("reopen.jstree", function (e, data) {
for (var i in some_global_array_id) {
$("#"+some_global_array_id[i]+" a").addClass(some_global_array_data[i]);
}
});
回答by Alex Belozerov
It can be done easier. Replace successfunction with this:
它可以更容易地完成。用这个替换成功函数：
success: function(n)
{
for(var i = 0; i < n.length; i++)
{
n[i].data.attr['class'] = n[i].csscl;
}
return n;
}
