javascript - Change jsTree node css class after json_data loads? - Stack Overflow

admin管理员组

文章数量:1332896

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:

[
{"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:

$(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...?

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:

[
{"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:

$(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...?

• javascript
• jquery
• jstree

Share Improve this question Follow edited Apr 28, 2011 at 22:54 iHaveaputer asked Apr 28, 2011 at 2:48 iHaveaputeriHaveaputer 1,43744 gold badges1515 silver badges3030 bronze badges 2

• 1 Have you tried jsTree discussion group at groups.google./group/jstree ? – Radek Commented Jul 27, 2011 at 7:46
• Could you possibly set it in the "data" object? "attr" : { "class" : "csscl" } ? Look at the first demo here. jstree./documentation/json_data – user244313 Commented Oct 11, 2011 at 13:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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]);
       }
    });

It can be done easier. Replace success function with this:

success: function(n) 
{
    for(var i = 0; i < n.length; i++)
    {
        n[i].data.attr['class'] = n[i].csscl;
    }
    return n;         
}

本文标签： javascriptChange jsTree node css class after jsondata loadsStack Overflow