快捷導(dǎo)航

jquery.simple.tree插件更簡(jiǎn)單，兼容性更好的無(wú)限樹(shù)插件

更新時(shí)間：2010年09月03日 15:11:53 作者：

在這里介紹一款小巧，功能強(qiáng)大，能拖拽，支持異步，且兼容性更高的jquery Tree插件

效果如下：

選擇：

拖拽：

jquery.simple.tree.官網(wǎng)地址： http://news.kg/wp-content/uploads/tree/（貌似已經(jīng)打不開(kāi)），不過(guò)因?yàn)椴僮鞅容^簡(jiǎn)單，所以我們暫且用之。
前面講過(guò)jquery EasyUI Tree插件，簡(jiǎn)單易用，但經(jīng)過(guò)測(cè)試仍有諸多缺點(diǎn)，
　　例如：
　　1、兼容IE8的AJAX有問(wèn)題。
　　2、如果異步返回?cái)?shù)據(jù)較慢，將可能導(dǎo)致加載失敗。
　　3、我們只使用其中的Tree功能，但其體積實(shí)在有點(diǎn)龐大。...
而我們需要的是，兼容性好，異步，體積?。ㄓ肨ree的場(chǎng)景實(shí)在比較少，所以還是專用的代碼文件比較好。）
好了，我們開(kāi)始jquery.simple.tree之旅：
首先，要加載文件，一共三個(gè)：CSS、Jquery主文件、還有其本身的js文件；
然后，是定義Tree的代碼；
最后，寫出這根樹(shù)的根節(jié)點(diǎn)HTML代碼；
前臺(tái)代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>區(qū)域選擇</title> 
<link rel="stylesheet" href="/js/simpletree/jquery.simple.tree.css" /> 
<script type="text/javascript" src="/js/jquery1.4.2.min.js"></script> 
<script type="text/javascript" src="/js/simpletree/jquery.simple.tree.js"></script> 
<script type="text/javascript"> 
var simpleTreeCollection; 
$(document).ready(function(){ 
simpleTreeCollection = $('.simpleTree').simpleTree({ 
autoclose: true, 
afterClick:function(node){ 
alert("您選擇了：" + $('span:first',node).text() + "id為：" + $('span:first',node).attr("id").substr(2));//此處為何要“.substr(2)”，是因?yàn)樘厥庠?，稍后可以得到解?如果你僅僅需要取文字，這里可以不取ID。 
}, 
afterDblClick:function(node){ 
//alert("text-"+$('span:first',node).text());//雙擊事件 
}, 
afterMove:function(destination, source, pos){ 
//alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);//拖拽事件 
}, 
afterAjax:function() 
{ 
//alert('Loaded'); 
}, 
animate:true 
//,docToFolderConvert:true 
}); 
}); 
</script> 
</head> 
<body> 
<ul class="simpleTree"> 
<li class="root"><span>區(qū)域選擇</span> 
<ul> 
<li id="root0" class="open"><span>中國(guó)</span> 
<ul class="ajax"> 
<li id='0'>{url:/common/GetGroupHtmlByPid.ashx?pid=0}</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html> 

后臺(tái)響應(yīng)代碼：
GetGroupHtmlByPid.ashx.cs

復(fù)制代碼代碼如下:

 
public class GetGroupHtmlByPid : IHttpHandler 
{ 
GroupManager group; 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
int parentId = -1; 
int type = 0; 
string resultStr = string.Empty; 
if (!context.Request.QueryString["pid"].IsNullOrEmpty()) 
{ 
Int32.TryParse(context.Request.QueryString["pid"], out parentId); 
} 
if (!context.Request.QueryString["type"].IsNullOrEmpty()) 
{ 
Int32.TryParse(context.Request.QueryString["type"], out type); 
} 
if (parentId >= 0) 
{ 
try 
{ 
group = new GroupManager((GroupType)type); 
var subAg = group.AllGroups.Where(c => c.ParentId == parentId); 
resultStr += "<ul>"; 
foreach (Base_group item in subAg) 
{ 
resultStr += "<li id=\"" + item.GroupId + "\"><span id=\"1_" + item.GroupId + "\">" + item.GroupName + "</span>";//這里可以解釋前臺(tái)代碼為何要.substr(2); 
resultStr += "<ul class='ajax'><li>{url:/common/GetGroupHtmlByPid.ashx?pid=" + item.GroupId + "}</li></ul>"; 
resultStr += "</li>"; 
} 
resultStr += "</ul>"; 
} 
catch (Exception ex) 
{ 
} 
} 
context.Response.Write(resultStr); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 

后臺(tái)看起來(lái)有點(diǎn)別扭，因?yàn)檫@個(gè)插件本身只支持HTML節(jié)點(diǎn)加載的，不過(guò)網(wǎng)上有人進(jìn)行擴(kuò)展了，用了JSON，不過(guò)個(gè)人感覺(jué)這對(duì)速度影響實(shí)在微乎其微，還是直接封裝出HTML代碼的。
總結(jié)一下jquery.simple.tree插件的優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：體積小，兼容性高，可異步，支持拖拽。
缺點(diǎn)：如果初始化的時(shí)候就需要異步加載，則需要手動(dòng)更改它的幾行代碼。例如我的例子中。
本插件還有一個(gè)特別的功能，支持拖拽，可以用于后臺(tái)維護(hù)無(wú)限分類，非常方便，有待讀者自己去發(fā)掘，希望本文能夠拋磚引玉，對(duì)你有所幫助！
源插件下載地址：http://plugins.jquery.com/project/SimpleTree
我的修改后的下載地址：simpletree.rar
我只修改了2行代碼，以便在第一次初始化時(shí)就加載異步的內(nèi)容。

您可能感興趣的文章: