一个棵自己写的jQuery的树。与大家分享一下。

主要用于动态加载子节点，避免大数据量加载页面慢的情况。

展示效果：

下面贴上源码：

css部分：

#TreeView
{
    width:100%;
    font-size:12px;
    float:left;
}
.nodes              /*节点*/
{
    width:100%;
    min-height:22px;
    float:left;
}
.parentNodes        /*父节点*/
{
    width:100%;
    height:22px;
    float:left;
}
.childNodes         /*子节点*/
{
    float:left;
    width:100%;
}
.plus               /*展开和收缩图片样式*/
{
    float:left;
    cursor:pointer;
    width:16px;
    height:22px;
}
/*  line 竖向虚线图片
    end  子节点最后拐角图片
    null 空白图片
    join 子节点相连图片
    lineh 横向虚线图片
    load  数据加载时等待图片
*/
.line,.end ,.null ,.join , .load
{
    float:left;
    width:16px;
    height:22px;
}
.checkbox
{
    float:left;
}
.text
{
    float:left;
    height:22px;
    line-height:22px;
}

js部分：

//将TreeView封装成插件的方式
(function($){
    $.fn.extend({
        TreeView:function(obj){
            if($.type(obj)==="object"){
                if(obj["Default"]!=undefined){
                    var objDiv=$("<div></div>");
                    $.each(obj["Default"],function(k,v){
                        var nodes=$("<div></div>").addClass("nodes");
                        var parentNodes=$("<div></div>").addClass("parentNodes");
                        var childNodes=$("<div></div>").addClass("childNodes").css("display","none");
                        var topplus=$("<img src=\"image/topplus.gif\"/>").addClass("plus").css({"width":"9px","height":"9px","margin":"5px 4px 8px 0"});;
                        var checkbox=$("<input type=\"checkbox\"/>").addClass("checkbox").css("display",obj["checkbox"]);
                        var a=$("<span class=\"text\"><a href=\""+v["url"]+"\">"+v["name"]+"</a></span>").addClass("text");
                        parentNodes.append(topplus.attr("id",v["ajaxData"])).append(checkbox).append(a);
                        nodes.append(parentNodes).append(childNodes);
                        objDiv.append(nodes);
                    });
                    $(this).append(objDiv.html());
                }else{
                    return false;
                }
                //对TreeView里面所以的收缩的图标进行监听
                $(this).delegate(".plus","click",function(){
                    var childNodes=$(this).parent().next(),thisObj=$(this);
                    if(childNodes.css("display")!="none"){
                       TreeFn.childHide(thisObj);
                    }else{
                        if(childNodes.html()==""){
                            TreeFn.GetData(thisObj,obj);
                        }else{
                            TreeFn.childShow(thisObj);
                        }
                    }
                    //同时对checkbox也进行监听
                }).delegate(".checkbox","click",function(){
                    var checkbox=$(this),childNodes=$(this).parent().next();
                    if(checkbox.attr("checked")){
                        childNodes.find(".checkbox").attr("checked",true);
                    }else{
                        childNodes.find(".checkbox").attr("checked",false);
                    }
                }) 
            }else{
                alert("111");
            }
            return this;
        }
    });
})(jQuery);
//这里定义一个对象，把我们用的到的方法封装以来
var TreeFn={
    //将ajax动态加载好的子节点展开出来
    childShow:function(thisObj){
        var childNodes=thisObj.parent().next();
        childNodes.show();
        if(thisObj.attr("src").indexOf("top")>=0){
            thisObj.attr("src","image/topminus.gif");
        }else if(thisObj.attr("src").indexOf("end")>=0){
            thisObj.attr("src","image/endminus.gif");
        }else{
            thisObj.attr("src","image/centerminus.gif");
        }
    },
    //将子节点收缩
    childHide:function(thisObj){
        var childNodes=thisObj.parent().next();
        childNodes.hide();
        if(thisObj.attr("src").indexOf("top")>=0){
            thisObj.attr("src","image/topplus.gif");
        }else if(thisObj.attr("src").indexOf("end")>=0){
            thisObj.attr("src","image/endplus.gif");
        }else{
            thisObj.attr("src","image/centerplus.gif");
        }
    },
    //利用父节点元素的个数，构造子节点元素的个数
    lineImage:function(thisobj){
        var objDiv=$("<div></div>");
        var p=thisobj.parent().children();
        p.each(function(index){
            if(index<p.size()-3){
                var line=$("<img src=\"image/line.gif\"/>").addClass("line");
                var nul=$("<img src=\"image/null.gif\"/>").addClass("null");
                if($(this).attr("class")=="line"||$(this).attr("class")=="join"||$(this).attr("src").indexOf("center")>=0){
                    objDiv.append(line);
                }else{
                    objDiv.append(nul); 
                }
            }
        });
        return objDiv;
    },
    //解析ajax过来的json数据，将其构造成子节点
    AnalyJSON:function(json,thisObj,obj){
        var objDiv=$("<div></div>");
        $.each(json,function(key,value){
            var nodes=$("<div></div>").addClass("nodes");
            var parentNodes=$("<div></div>").addClass("parentNodes");
            var childNodes=$("<div></div>").addClass("childNodes").css("display","none");
            var line=$("<img src=\"image/line.gif\"/>").addClass("line");
            var topplus=$("<img src=\"image/topplus.gif.gif\" />").addClass("plus");
            var centerplus=$("<img src=\"image/centerplus.gif\" />").addClass("plus").attr("id",value["id"]);
            var endplus=$("<img src=\"image/endplus.gif\"/>").addClass("plus").attr("id",value["id"]);
            var join=$("<img src=\"image/join.gif\"/>").addClass("join");
            var lineh=$("<img src=\"image/lineh.gif\"/>").addClass("end");
            var end=$("<img src=\"image/end.gif\"/>").addClass("end");
            var checkbox=$("<input type=\"checkbox\"/>").addClass("checkbox").css("display",obj["checkbox"]);
            var a=$("<span class=\"text\"><a href=\""+value["url"]+"\">"+value["name"]+"</a></span>").addClass("text");
             
            var commone=TreeFn.lineImage(thisObj);
            if(value["hasChild"]=="1"){
                if(value["last"]==undefined||value["last"]!="1")
                {
                    parentNodes.append(commone.html()).append(join).append(centerplus);
                    if(thisObj.next().attr("checked")){
                        parentNodes.append(checkbox.attr("checked",true)).append(a);
                    }else{
                        parentNodes.append(checkbox).append(a);
                    }
                }else{
                    parentNodes.append(commone.html()).append(end).append(endplus);
                    if(thisObj.next().attr("checked")){
                        parentNodes.append(checkbox.attr("checked",true)).append(a);
                    }else{
                        parentNodes.append(checkbox).append(a);
                    }
                }
                nodes.append(parentNodes);
                nodes.append(childNodes);
                objDiv.append(nodes);
            }else{
                if(value["last"]==undefined||value["last"]!="1"){
                    parentNodes.append(commone.html()).append(join).append(lineh);
                    if(thisObj.next().attr("checked")){
                        parentNodes.append(checkbox.attr("checked",true)).append(a);
                    }else{
                        parentNodes.append(checkbox).append(a);
                    }
                }else{
                    parentNodes.append(commone.html()).append(end).append(lineh);
                    if(thisObj.next().attr("checked")){
                        parentNodes.append(checkbox.attr("checked",true)).append(a);
                    }else{
                        parentNodes.append(checkbox).append(a);
                    }
                }
                nodes.append(parentNodes);
                nodes.append(childNodes);
                objDiv.append(nodes);
            }
        });
        return objDiv;
    },
    //点击父节点展开，进获取下面的子节点数据
    GetData:function(thisObj,obj){
        $.ajax({
            type:"GET",
            cache:false,
            async:false,
            url:obj["ajaxUrl"],
            dataType:"text",
            data:{Key:thisObj.attr("id")},
            beforeSend:function(){
                thisObj.parent().append("<img src=\"image/Loading.gif\" class=\"load\"/>");
            },
            success:function(json){
                thisObj.parent().next().html("").append(TreeFn.AnalyJSON($.parseJSON(json),thisObj,obj).html());
                TreeFn.childShow(thisObj);
            },
            complete:function(){
               thisObj.parent().children().remove(".load");
            }
        });
    }
};

前端调用js：

$(function(){
        $("#TreeView1").TreeView({
            checkbox:"block",               //是否显示checkbox
            ajaxUrl:"Tree.aspx",            //ajax动态获取相应父节点下面的子节点元素的地址（可以 换成需要获取数据的url地址）
            Default:[{                      //TreeView首次加载时默认顶级节点名称
                name:"测试跟节点1",         //名称
                url:"http://www.cnblogs.com/Suven/",    //节点上的url
                ajaxData:"1"                            //获取下面子元素的唯一标识
                },{
                name:"测试跟节点2",
                url:"http://www.baidu.com/",
                ajaxData:"0"
            }]
        });   
    });

下面再给出服务器端返回的json数据格式：

{
        "Test1":
            {
                "name":"测试子节点栏目1",   //节点名称
                "url":"http://test1",       //节点url
                "id":"1",                   //节点id，也用于获取下一子节点数据的id
                "hasChild":"0",             //是否存在子节点
                "last":"1"                  //是否是子节点中最后一个元素，如果不是，也可不写         
            },
        "Test2":
            {"name":"测试子节点栏目2","url":"http://test2","id":"2","hasChild":"1"},
        "Test3":
            {"name":"测试子节点栏目3","url":"http://test3","id":"3","hasChild":"1","last":"1"}
    }

jQuery写的一棵动态加载的树相关推荐

  1. 使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题

    使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 参考文章: (1)使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 ( ...

  2. 自己写的表格的动态加载，有些不足地方

    <html> <script type="text/javascript"> function onloads(){ } function $(id){ r ...

  3. HTML5动态加载资源方式,动态加载JavaScript文件的两种方法

    这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...

  4. nodejs动态加载路由

    Nodejs动态加载路由,Nodejs遍历目录,Nodejs路由工具 工具来源: Nodejs需要手动加载路由文件,如果一个个添加,项目逐渐扩大,比较麻烦. 尤其在项目route目录下,增加模块文件夹 ...

  5. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  6. jQuery动态加载select下拉列表

    需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 代码 ...

  7. 【jquery】Chosen.jquery.js 插件动态加载数据问题

    Chosen.jquery.js目前版本v1.6.2,官方文档链接https://harvesthq.github.io/chosen/ 插件有一个css文件和一个js文件,都命名为Chosen,引入 ...

  8. Flask+jQuery：AJAX技术动态加载网页

    hello,大家好,我是wangzirui32,今天我们来学习如何使用jQuery实现AJAX动态加载网页. 学习目录 1. 准备工作 1.1 搭建测试网站 1.2 数据文件 1.3 网页模板 1.4 ...

  9. 使用jquery的tmpl动态加载数据模板

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

最新文章

  1. Spring Cloud Ribbon(服务消费者)
  2. JavaScript权威Douglas Crockford：代码阅读和每个人都该学的编程
  3. CentOS各版本ISO下载地址
  4. shell脚本常用的4种流程控制语句
  5. 新手搭ssm要多久_如何快速学习ssm 框架？
  6. java web插件_javaweb项目插件实现机制
  7. Linux网络编程中tcp_server和tcp_client函数的封装
  8. springmvc+log4j操作日志记录,详细配置
  9. ssm插入数据时候栈溢出_程序员算法与数据结构基础中的基础，栈与递归
  10. python3 2.00gb怎么去掉单位_最值得期待的Python 3.9的新功能
  11. 【Flink】Flink 实时去重方案 四种方案 MapState 、SQL方式、HyperLogLog、Bitmap
  12. AndroidStudio_在android中使用定时器_异步定时实现心跳保活功能---Android原生开发工作笔记231
  13. 私有云中Kubernetes Cluster HA方案
  14. Java写txt—读txt—清空txt文件
  15. foxmail html模板,Foxmail“邮件模板”功能全攻略
  16. jdk chm右边文档打不开的问题
  17. 手机内存LPDDR4X、LPDDR4、LPDDR3的区别 ICMAX告诉你
  18. 《修C传》——初始C语言 ＜凝气篇＞
  19. Linux UART编程 驱动蓝牙芯片
  20. 【第五周】新蜂团体贡献分

热门文章

  1. 魅蓝note如何进行安卓开发调试
  2. Android系统软件卸载方法
  3. 搜索引擎优化的20/80法则_SEO吧
  4. win2003下安装不了Inter945g显卡驱动的问题解决
  5. android 打印机怎么拿到蓝牙地址,Android 商米蓝牙打印机的使用方式
  6. ABC 236 D（普通dfs，配对
  7. Windows 10 安装 Linux 子系统（Windows Subsystem for Linux）
  8. 2022HNCTF---Week4 crypto wp
  9. 用python做自我介绍_用python做个自我介绍（python入门教程）_逻辑教育
  10. shell变量之PS1 设置Shell命令提示符及颜色