Изменить класс css узла jsTree после загрузки json_data?

я загружаю свое jsTree через json_data всякий раз, когда пользователь нажимает [+] рядом с папкой. Что я хочу сделать, так это применить классы 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"}
]

мой узел «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
    }
})

Это не сработает. Я думаю, что происходит то, что «успех: функция (n)» вызывается после загрузки дерева, но до того, как оно будет нарисовано или готово для JQuery, чтобы найти выбранный узел и применить мой класс. Кто-нибудь знает, как это решить, или, может быть, в этом случае есть лучший способ применить класс css к $("#node5 a")...?


javascript jquery jstree
person iHaveacomputer    schedule 28.04.2011    source источник
comment
Пробовали ли вы дискуссионную группу jsTree по адресу groups.google.com/group/jstree?   -  person Radek    schedule 27.07.2011
comment
Не могли бы вы установить его в объекте данных? атрибут: {класс: csscl}? Посмотрите на первое демо здесь. jstree.com/documentation/json_data   -  person Burke Holland    schedule 11.10.2011

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, что нашел обходной путь.

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

И затем после загрузки и рисования вы можете вызвать функцию следующим образом:

$("#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]);
       }
    });
person ink    schedule 22.11.2011

arrow_upward
1
arrow_downward

Можно сделать проще. Замените функцию success на это:

success: function(n) 
{
    for(var i = 0; i < n.length; i++)
    {
        n[i].data.attr['class'] = n[i].csscl;
    }
    return n;         
}
person Alex Belozerov    schedule 27.07.2012
comment
Синтаксис последней версии jstree изменился. См. этот документ: jstree.com/docs/json. Теперь это должно быть так: n[i].li_attr['class'] или n[i].a_attr['class']. - person Ring; 14.04.2014