[英]Change jsTree node css class after json_data loads?
i load my jsTree via json_data whenever the user clicks the [+] next to a folder.每当用户单击文件夹旁边的 [+] 时,我都会通过 json_data 加载我的 jsTree。 What i want to do is apply css classes to some of the nodes to highlight them for the user.我想要做的是将 css 类应用于某些节点,以便为用户突出显示它们。 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:相应的 css class 已经在来自服务器的 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.我的“Test123”节点稍后应该在树中获得 class“ui-state-error”。 Here is my jsTree:这是我的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.我认为发生的是在加载树之后调用“成功:函数(n)”,但在它被绘制或准备好 JQuery 找到所选节点并应用我的 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...?任何人都知道如何解决这个问题,或者在这种情况下可能有更好的方法将 css class 应用于 $("#node5 a") ......?
It can be done easier.它可以更容易地完成。 Replace success function with this:将成功的 function 替换为:
success: function(n)
{
for(var i = 0; i < n.length; i++)
{
n[i].data.attr['class'] = n[i].csscl;
}
return n;
}
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:然后在加载和绘图后,您可以像这样调用 function:
$("#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]);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.