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


Posted in Javascript onSeptember 03, 2010

效果如下:

选择:
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
拖拽:
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
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代码;
前台代码如下:

<!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>区域选择</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)”,是因为特殊原因,稍后可以得到解释.如果你仅仅需要取文字,这里可以不取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>区域选择</span> 
<ul> 
<li id="root0" class="open"><span>中国</span> 
<ul class="ajax"> 
<li id='0'>{url:/common/GetGroupHtmlByPid.ashx?pid=0}</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>

后台响应代码:
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 += "<ul>"; 
foreach (Base_group item in subAg) 
{ 
resultStr += "<li id=\"" + item.GroupId + "\"><span id=\"1_" + item.GroupId + "\">" + item.GroupName + "</span>";//这里可以解释前台代码为何要.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; 
} 
} 
}

后台看起来有点别扭,因为这个插件本身只支持HTML节点加载的,不过网上有人进行扩展了,用了JSON,不过个人感觉这对速度影响实在微乎其微,还是直接封装出HTML代码的。
总结一下jquery.simple.tree插件的优缺点:
优点:体积小,兼容性高,可异步,支持拖拽。
缺点:如果初始化的时候就需要异步加载,则需要手动更改它的几行代码。例如我的例子中。
本插件还有一个特别的功能,支持拖拽,可以用于后台维护无限分类,非常方便,有待读者自己去发掘,希望本文能够抛砖引玉,对你有所帮助!
源插件下载地址:http://plugins.jquery.com/project/SimpleTree
我的修改后的下载地址:simpletree.rar
我只修改了2行代码,以便在第一次初始化时就加载异步的内容。
Javascript 相关文章推荐
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
Vue-Router的使用方法
Sep 05 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 #Javascript
Jquery中dialog属性小记
Sep 03 #Javascript
javascript中使用css需要注意的地方小结
Sep 01 #Javascript
js截取函数(indexOf,join等)
Sep 01 #Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 #Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 #Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 #Javascript
You might like
session 加入redis的实现代码
2016/07/15 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python中的迭代器漫谈
2015/02/03 Python
快速入门python学习笔记
2017/12/06 Python
Python制作词云的方法
2018/01/03 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python global全局变量函数详解
2018/09/18 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Django实现内容缓存实例方法
2020/06/30 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
中学生评语大全
2014/04/18 职场文书
小学一年级评语大全
2014/04/22 职场文书
留学推荐信范文
2014/05/10 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
2014年人事科工作总结
2014/11/19 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
英语读书笔记
2015/07/02 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL