jQuery写的一棵动态加载的树

一个棵自己写的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);

//这里定义一个对象，把我们用的到的方法封装以来

varTreeFn={

    //将ajax动态加载好的子节点展开出来

    childShow:function(thisObj){

        var childNodes=thisObj.parent().next();

        childNodes.show(); 

        if(thisObj.attr("src").indexOf("top")>=0){

           thisObj.attr("src","image/topminus.gif"); 

        }elseif(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"); 

        }elseif(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"}

    }