2011-05-06 57 views
0

我需要在jsTreeGrid中使用jsTree 1.0rc2時將文本更改爲html中的一列。有人告訴我說:「你可能會想使用類選項來指定一個唯一的類(我知道如何做到這一點),然後找到類」用jsTree中的html替換文字

$("span.myClass") 

,然後改變其內容

$("span.myClass").each(function(i,elm) { 
    elm = $(elm); 
    var text = elm.text(); 
    elm.html('<a href="abc">'+text+'</a>'); 
}); 

有人可以幫我做剩下的事嗎?我想我需要把這個代碼 $("span.myClass").each(function(i,elm) { ......的地方,但我不知道在我的代碼完全在哪裏。

jsTree的作者在jsTree討論組中寫道:「您也可以爲此構建一個插件 - 檢出整合器插件源代碼。它爲類似的問題編寫了一個類似的問題 - 修改了每個加載的html/classes節點

<html> 
<head> 
<title> dashboard</title> 

<script type="text/javascript" src="_lib/jquery.js"></script> 
<script type="text/javascript" src="jquery.jstree.js"></script> 
<script type="text/javascript" src="_lib/jstreegrid.js"></script> 
<script type="text/javascript"> 
//<![CDATA[ 

$(document).ready(function(){ 

var data = [{ 
     data: "basics", 
     attr: {SOF: "<a href=\"http://www.w3schools.com\">Visit W3Schools.com!</a>"}, 
     children: [ 
     {data: "login", attr: {run: "run"}, 
      children: [     
      {data: "login", attr: {}} 
      ] 
     } , 
     {data: "Academic Year", attr: {run: "run"}, 
      children: [     
      {data: "login", attr: {}}, 
      {data: "Academic Year", attr: {filter: "mini", SOF: "<a href=\"http://www.w3schools.com\">Visit W3Schools.com!</a>"}} 
      ] 

     } 
     ] 
     }]; 
$("div#jstree").jstree({ 
plugins: ["themes","json_data","grid","dnd"], 
json_data: {data: data}, 
grid: { 
     columns: [ 
      {width: 220, header: "Group"}, 
         {cellClass: "col2", value: "run", width: 40, header: "run"}, 
         {cellClass: "col3", value: "filter", width: 40, header: "filter"}, 
         {cellClass: "col4", value: "SOF", width: 450, header: "SOF"} 
       ] 
      }, 
dnd: { 
drop_finish : function() { 
}, 
drag_finish : function() { 
}, 
drag_check : function (data) { 
return { 
after : true, 
before : true, 
inside : true 
}; 
} 
} 
}); 
}); 
//]]> 
</script> 
</head> 
<body> 
<div id="jstree"></div> 

</body> 
</html> 

回答

1

看結合 」loaded.jstree「 並運行你的邏輯在那裏,像這樣:

> jQuery("some-container") 
>  .bind("loaded.jstree", function (event, data) { 
>   alert("TREE IS LOADED"); 
>  }) 
>  .jstree({ /* configuration here */ }); 

欲瞭解更多信息,請看這裏:http://www.jstree.com/documentation/core。還有一個無恥的插件 - 如果你是jsTree的新手,你需要一個快速的概述,我最近寫了一個教程,在這裏http://tkgospodinov.com/jstree-part-1-introduction/。希望有所幫助。

+0

如果我把代碼放在你建議它不起作用的地方,因爲(IMO)jsTreeGrid插件沒有被解僱,所以'myClass'類不存在。它看起來像我。任何想法,我放置的功能,並確保插件jsTreeGrid完成其工作? – Radek 2011-05-06 06:42:37