首页 > web前端 > js教程 > jquery.simple.tree插件 更简单,兼容性更好的无限树插件_jquery

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

WBOY
发布: 2016-05-16 18:20:29
原创
1147 人浏览过

效果如下:

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

复制代码 代码如下:




区域选择







  • 区域选择

    • 中国

      • {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行代码,以便在第一次初始化时就加载异步的内容。
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板