jquery.simple.tree插件 一个更简单更兼容的无限树插件

效果如下：精选：。

男扮女装：

jquery.simple.tree .官网地址：http://新闻。kg/WP-内容/上传/树/貌似已经打不开),不过因为操作比较简单，所以我们暂且用之。前面讲过jquery易用户界面树插件，简单易用，但经过测试仍有诸多缺点，例如： 1、兼容IE8的创建交互式、快速动态网页应用的网页开发技术有问题。 2、如果异步返回数据较慢，将可能导致加载失败。 3、我们只使用其中的树功能，但其体积实在有点庞大。而我们需要的是，兼容性好，异步，体积小（用树的场景实在比较少，所以还是专用的代码文件比较好。) 好了，我们开始jquery.simple.tree之旅：首先，要加载文件，一共三个：CSS、Jquery主文件、还有其本身的射流研究…文件；然后，是定义树的代码；最后，写出这根树的根节点超文本标记语言代码；前台代码如下：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title区域选择/title link rel='样式表href='/js/simple tree/jquery。很简单。树。CSS '/脚本类型=' text/JAVAScript ' src=' http :/js/jquery 1。4 .2 .量滴js /脚本脚本类型=' text/JavaScript ' src=' http :/js/simple tree/jquery。很简单。树。js /脚本类型=' text/JavaScript ' var simple tree集合；$(文档)。ready(function(){ SimpleTreeCollection=$(').简单树').简单树({ autoclose: true，afterClick:function(节点){ alert('您选择了：' $('span:first '，节点)。文本()' id为：' $('span:first '，节点)。attr('id ').substr(2))；//此处为何要".substr(2)"，是因为特殊原因，稍后可以得到解释。如果你仅仅需要取文字，这里可以不取身份证。}，afterDblClick:function(节点){//alert(' text-' $(' span : first '，节点)。text())；//双击事件}，afterMove:function(目标，源，pos){//alert(' destination-' destination。attr(' id ')' source-' source。attr(' id ')' pos-' pos)；//拖拽事件}，在AJax :函数(){//alert(' Loaded ')之后；}，animate:true /，doctofolderconvert : true })；});/script/head body ul class=' SimpleTree ' Li class=' root ' span区域选择/span ul Li id=' root 0 ' class=' open ' span中国/span ul class=' Ajax ' Li id=' 0 ' { URL :/common/getgrouhtmlbypid。阿什克斯。PID=0 }/Li/ul/Li/ul/Li/ul/ul/body/html后台响应代码：getgrouhtmlbypid。阿什克斯。铯复制代码代码如下：公共类getgrouhtmlbypid : IHttpHandler { group manager group；公共无效进程请求(HttpContext上下文){上下文.响应。内容类型='文本/纯文本；int ParentId=-1；（同Internationalorganizations）国际组织类型=0;字符串结果字符串=字符串。空的；if(！语境。请求。查询字符串['pid'].IsNullOrEmpty()) { Int32 .（上下文请求。QueryString['pid']，out ParentID)；} if(！语境请求。QueryString['type'].IsNullOrEmpty()) { Int32 .（上下文请求。QueryString['type']，out类型);} if(ParentID=0){ 0尝试{ group=新的组管理器((GrouP TYPe)类型);var subAg=group .所有组。其中(c=c . ParentId==ParentId)；resultStr=' ulforeach(SuBag中的基本组项){ resultStr='li id=\ '项GroupId '\'span id=\'1_ '项GroupId .为"\"的项目组名'/span '；//这里可以解释前台代码为何要substr(2)；结果STr=' ul class=' Ajax ' Li { URL :/common/GetGroupHTML BYPid。阿什克斯。pid='项群组id ' }/Li/ul '；结果STr='/Li '；}结果STr='/ul '；}捕获(异常ex) { } }上下文。响应。写入（结果字符串);} public bool IsReuse { get { return false；} } } 后台看起来有点别扭，因为这个插件本身只支持超文本标记语言节点加载的，不过网上有人进行扩展了，用了JSON，不过个人感觉这对速度影响实在微乎其微，还是直接封装出超文本标记语言代码的。总结一下jquery.simple.tree插件的优缺点：优点：体积小，兼容性高，可异步，支持拖拽。缺点：如果初始化的时候就需要异步加载，则需要手动更改它的几行代码。例如我的例子中。

这个插件还有一个特殊的功能，支持拖拽。可以用来在后台维护无限分类，非常方便，需要读者自己去发现。希望这篇文章能吸引到有价值的建议，帮助到你！来源插件下载地址：http://plugins.jquery.com/project/SimpleTree我修改的下载地址：simpletree.rar我第一次初始化时只修改了2行代码加载异步内容。