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);
//这里定义一个对象,把我们用的到的方法封装以来
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" }
     }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值