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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
JsRender实用入门教程
Oct 31 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue的滚动条插件实现代码
Sep 07 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
python访问系统环境变量的方法
2015/04/29 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python 求10个数的平均数实例
2019/12/16 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
python 自动识别并连接串口的实现
2021/01/19 Python
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
Python文件操作的面试题
2013/06/22 面试题
大学毕业生自荐书怎么写?
2014/01/06 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
幼儿学前班评语
2014/12/29 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
贷款工资证明范本
2015/06/12 职场文书
红色故事汇观后感
2015/06/18 职场文书
2016情人节宣传语
2015/07/14 职场文书
争做文明公民倡议书
2019/06/24 职场文书
了解Redis常见应用场景
2021/06/23 Redis
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
Django中celery的使用项目实例
2022/07/07 Python