在json_data加載後更改jsTree節點css類？

無論何時用戶單擊文件夾旁邊的[+]，我都會通過json_data加載我的jsTree。我想要做的是將css類應用於某些節點，以便爲用戶突出顯示它們。不是在討論鼠標懸停或當前選定的節點，而是稍後人們必須查看的多個節點。相應的CSS類是已經從服務器JSON響應裏面：在json_data加載後更改jsTree節點css類？

[ 
{"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狀態錯誤」後面的樹。這裏是我的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 
    } 
})

這是行不通的。我認爲會發生的事情是，在樹加載之後調用「success：function（n）」，但在繪製或準備好讓JQuery找到所選節點並應用我的類之前調用它。任何人都知道如何解決這個問題，或者在這種情況下，有更好的方法將css類應用於$（「＃node5 a」）......？

來源

2011-04-28 iHaveacomputer

你試過jsTree討論組在http://groups.google.com/group/jstree？ – Radek 2011-07-27 07:46:06

你可以將它設置在「數據」對象嗎？「attr」：{「class」：「csscl」}？看看這裏的第一個演示。 http://www.jstree.com/documentation/json_data – 2011-10-11 13:51:23

我想我找到了解決方法。

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

來源

2011-11-22 10:32:06 ink

可以做得更容易，請看下面我的評論 – 2013-06-07 08:13:53

這是可以做到更容易。這種替換成功功能：

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

來源

2012-07-27 18:14:38

最新版本的jstree的語法已經改變。請參閱此文檔：http://www.jstree.com/docs/json/。它現在應該是：'n [i] .li_attr ['class']'或'n [i] .a_attr ['class']'。 – Ring 2014-04-14 15:57:52

在json_data加載後更改jsTree節點css類？

回答

相關問題