jquery.simple.tree插件更简单，兼容性更好的无限树插件

jquery.simple.tree插件更简单，兼容性更好的无限树插件_jquery

php中文网

发布： 2016-05-16 18:20:29

原创

1272人浏览过

效果如下：

选择：
jquery.simple.tree插件更简单，兼容性更好的无限树插件_jquery
拖拽：

jquery.simple.tree.官网地址： http://news.kg/wp-content/uploads/tree/（貌似已经打不开），不过因为操作比较简单，所以我们暂且用之。
前面讲过jquery EasyUI Tree插件，简单易用，但经过测试仍有诸多缺点，
　　例如：
　　1、兼容IE8的AJAX有问题。
　　2、如果异步返回数据较慢，将可能导致加载失败。
　　3、我们只使用其中的Tree功能，但其体积实在有点庞大。...
而我们需要的是，兼容性好，异步，体积小（用Tree的场景实在比较少，所以还是专用的代码文件比较好。）
好了，我们开始jquery.simple.tree之旅：
首先，要加载文件，一共三个：CSS、Jquery主文件、还有其本身的js文件；
然后，是定义Tree的代码；
最后，写出这根树的根节点HTML代码；
前台代码如下：

好买卖商城

好买卖商城开源商城是基于Opencart网店系统,针对中文用户而改进的本地化分支,是真正的开源PHP中文网店系统，兼容Opencart的插件。该系统具有易于操作的可视化安装界面、完善的前台商品展示和户在线购物车功能、强大的后台管理和维护功能模块简单易用,灵活的插件机制，更易于扩展。另外，好买卖商城开源商城还集成集成了支付宝等支付和物流插件,更适合中文用户使用。好买卖商城2.0开源商城流程进行

查看详情

复制代码代码如下:

 
区域选择

区域选择 

中国 

{url:/common/GetGroupHtmlByPid.ashx?pid=0}

后台响应代码：
GetGroupHtmlByPid.ashx.cs

复制代码代码如下:

 
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 += ""; 
foreach (Base_group item in subAg) 
{ 
resultStr += "
" + item.GroupName + "";//这里可以解释前台代码为何要.substr(2); 
resultStr += "{url:/common/GetGroupHtmlByPid.ashx?pid=" + item.GroupId + "}
"; 
resultStr += "
"; 
} 
resultStr += ""; 
} 
catch (Exception ex) 
{ 
} 
} 
context.Response.Write(resultStr); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 

后台看起来有点别扭，因为这个插件本身只支持HTML节点加载的，不过网上有人进行扩展了，用了JSON，不过个人感觉这对速度影响实在微乎其微，还是直接封装出HTML代码的。
总结一下jquery.simple.tree插件的优缺点：
优点：体积小，兼容性高，可异步，支持拖拽。
缺点：如果初始化的时候就需要异步加载，则需要手动更改它的几行代码。例如我的例子中。
本插件还有一个特别的功能，支持拖拽，可以用于后台维护无限分类，非常方便，有待读者自己去发掘，希望本文能够抛砖引玉，对你有所帮助！
源插件下载地址：http://plugins.jquery.com/project/SimpleTree
我的修改后的下载地址：simpletree.rar
我只修改了2行代码，以便在第一次初始化时就加载异步的内容。