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代码;
前台代码如下:

复制代码 代码如下:

<!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行代码,以便在第一次初始化时就加载异步的内容。

时间: 2024-10-06 23:45:22

jquery.simple.tree插件 更简单,兼容性更好的无限树插件_jquery的相关文章

下载-json jquery simple tree 源码

问题描述 json jquery simple tree 源码 json jquery simple tree 源码 下载不了 积分已经扣除

【转】Spark 2.0 技术预览版:更简单、更快速、更智

       自两年前Spark 1.0发布以来,我们收到了很多意见,或褒或贬:而Spark 2.0正是基于我们过去两年来获得的经验总结来构建的,它着重加强了用户喜爱的功能,改善了大家不满的地方.本文总结了Spark2.0的三个主要改进方向:更简单.更快速.更智能        我们欣喜地宣布,从今天起大家可以在Databricks下载Apache Spark 2.0的技术预览版(社区版)了,该数据包使用upstream branch-2.0构建,使用起来非常简单,只要在启动集群时选择"2.0(

Spark 2.0 预览:更简单,更快,更智能

Apache Spark 2.0 技术预览在 Databricks Community Edition 发布.该预览包使用upstream branch-2.0构建,当启动Cluster时,使用预览包和选择"2.0 (Tech Preview)" 一样简单. 离最终的Apache Spark 2.0发布还有几个星期,现在先来看看有什么新特性: 更简单:SQL和简化的API Spark 2.0依然拥有标准的SQL支持和统一的DataFrame/Dataset API.但我们扩展了Spar

更简单、更快捷:探讨深度学习的未来发展步伐

机器学习是一门多领域交叉学科,专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能.它是人工智能的核心,是使计算机具有智能的根本途径. 如果论及哪一个机器学习的领域最为热门,非人工智能莫属,这就是深度学习.深度学习框架又名深度神经网络,一个复杂的模式识别系统,可以实现从自动语言翻译到图像识别的功能. 深度学习需要收集大量的数据,并且拥有处理这些数据的能力,做到这些并非易事,但深度学习技术正在蓬勃发展的道路上,并且已经突破了很多障碍.深度学

wps让更改图片更简单、省事

相信大家在日常工作和生活中,编辑和制作文档.电子表格或者幻灯片时都会有在文件里插入图片的经历.但是当您完成编辑与排版后,也许会发现某个图片并不怎么合适或与内容不协调.此时,您就需要更换所插入的图片. 对于更换图片您一般是怎么操作的呢?您是否会把原图片删掉,然后再在原处重新插入一张心仪的图片?也许当您忙完这一切之后,却发现大事不妙.原来,苦心调整好的版面被后来更换的那张图片搞得一塌糊涂.看着自己的功夫被毁,您是否特心痛呢?也许为了版面,您会放弃您所心仪的图片,而选择一张和原来图片大小差不多的图片:

更多的限制,更简单的设计

<简单法则>中曾经提到过一个如何简单的方法,SHE:缩小-->隐藏-->附加,然后把剩下的元素有组织的排列在一起.而简约就意味着用最简洁的方式获得最大的效果. 首先,写这篇文章的一个重要性的冲动诱因在于我这个刚入行的http://www.aliyun.com/zixun/aggregation/9363.html">移动互联网产品设计新手在查找资料的时候被太多的前辈恐吓了很久,我最终决定站出来反击一下. 我们看到无数的移动互联网前辈们说,移动互联网产品设计相对于We

jquery插件整理篇(一)导航类jq插件,菜单jq插件

(1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. (2)jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. (3)jQuery plugin: Accordion 用于创建 折叠菜单的jQuery插件. (4)Accordion Menu script 基于jQuery开发的可折叠菜单.  (5)模仿ext的tab选项卡 TabPanel(选项卡组件) 参数

利用JQuery实现更简单的Ajax跨域请求

前一阵发过一篇利用ExtJs的ScriptTagProxy实现Ajax跨域请求的文章(http://www.cnblogs.com/yjmyzz/archive/2008/09/14/1290789.html),这几天看了一下Jquery,发现如果用JQuery中的getScript其实更简单(jquery 1.2.6版本) 这里给出代码,希望对Ajax跨域感到棘手的朋友有所帮助: Code<html><head><title>JQuery学习</title>

Wolf Software jQuery Simple Tooltips 1.1.0发布 jQuery插件

jQuery Simple Tooltips是一个jQuery插件,以一种简单灵活的方式生成工具提示.它是高度可配置,采用多种方法来传送文字到工具提示发生器. 有关jQuery Jquery是一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容http://www.aliyun.com/zixun/aggregation/9445.html">CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+).