js/jq基础（日常整理记录）-4-一个简单的自定义tree插件

一、一个简单的自定义tree插件

　　上一篇是之前自定义的table插件，这一篇也是之前同期尝试做的一个tree插件。

话不多说，先看看长什么样子哈！

现在来看确实不好看，以后在优化吧！

数据源：ajax请求的挡板数据

 [
{"id":"1","name":"安徽","url":"www.baidu.com","pid":"0"},
{"id":"2","name":"江苏","url":"","pid":"0"},
{"id":"3","name":"合肥","url":"","pid":"1"},
{"id":"4","name":"庐阳区","url":"","pid":"3"},
{"id":"5","name":"大杨镇","url":"","pid":"4"},
{"id":"6","name":"南京","url":"","pid":"2"},
{"id":"7","name":"玄武区","url":"","pid":"6"},
{"id":"8","name":"梅园新村街道","url":"","pid":"7"},
{"id":"9","name":"上海","url":"","pid":"0"},
{"id":"10","name":"黄浦区","url":"","pid":"9"},
{"id":"11","name":"外滩","url":"","pid":"10"},
{"id":"12","name":"安庆","url":"","pid":"1"},
{"id":"13","name":"阜阳","url":"","pid":"1"},
{"id":"14","name":"湖南","url":"","pid":"0"}
] 

js插件源码：还不完善，以后优化

 /**
  * JS自执行函数
  * @param {Object} $
  * @param {Object} undefined
  */
 ;(function($,undefined){

     /**
      * 设置tree默认属性
      */
     var MyTree=function(ele,opt){
         _defaults={
             id:'',
             data:null,
             url:null,
             params:null
         }
         //装配设置
         this.Property=$.extend({},_defaults,opt);
     }
     /**
      * 公共资源
      */
     var imgPublicDefault='<img class="lj-ul-li-img" src="./img/trees/tree-ul3.jpg">';
     var spacePulicDefault='<div class="lj-ul-li-space">-</div>';
     var spacePulicDefault2='<div class="lj-ul-li-space"><img class="lj-ul-li-img" src="./img/trees/tree-split1.jpg"></div>';

     /**
      * 设置tree原型
      */
     MyTree.prototype={
         //初始化tree
         init:function(){
            //初始化数据
            var datas=this.initData(this);
            //统一注册事件
            this.bindEvent(this,datas);
         },
         //初始化数据
         initData:function($this){
             var _data=$this.Property.data;
             //如果有数据，则直接使用，没有则根据url去获取数据    使用优先级：  data > url
             if(_data!=null){
                 $this.createTree(_data);
             }else{
                 $.ajax({
                     url:$this.Property.url,
                     data:$this.Property.params,
                     type:'get',
                     async:false,
                     dataType:'json',
                     success:function(responseData){
                         _data=responseData;
                       $this.createTree($this,responseData);
                     }
                 });
             }
             return _data;
         },
         //开始生成tree
         createTree:function($this,datas){
             var $ul=$('#'+$this.Property.id);
             var $lis='';
             $('<ul id="lj-tree-ul" class="lj-tree-ul-container"></ul>').appendTo($ul);
             //拿到处理之后的数据
             var dealedDatas=$this.sortTreeDatasFn($this,datas);
             //开始生产tree结构
             $.each(dealedDatas, function(index,node) {
                 //生成tree每个节点
                 $lis+=$this.creatTreeNodes($this,index,node);
             });
             $($lis).appendTo($('#lj-tree-ul'));
             return dealedDatas;
         },
         //递归生产父节点以及包含的子节点
         creatTreeNodes:function($tree,index,node){
             var $lis='';
             //只有父节点时：直接添加
             if(node.childs.length==0){
                 $lis='<li class="lj-tree-li" id="fold_'+node.id+'">'+spacePulicDefault+'<input id="fold_radio_'+node.id+'" type="checkbox"/>'+node.name+'</li>';
             }else{
             //含有子节点时：递归处理
                 $lis='<li class="lj-tree-li" id="fold_'+node.id+'"><img id="fold_img_'+node.id+'" class="lj-ul-li-img" src="./img/trees/tree-ul3.jpg"><input id="fold_ck_'+node.id+'" type="checkbox"/>'+node.name;
                 $lis+=$tree.creatNodesByChilds($tree,node);
             }
             return $lis;
         },
         //递归生成带有子节点的父节点
         creatNodesByChilds:function($tree,node){
             //递归处理:
             var $lis=$tree.forFnByChilds($tree,node,node.childs);
             return $lis;
         },
         forFnByChilds:function($tree,parentNode,childNodes){
             var $lis='<ul class="lj-tree-ul">';
             $.each(childNodes, function(index,node) {
                 if(node.childs.length==0){
                     $lis+='<li class="lj-tree-li" id="fold_'+node.id+'">'+spacePulicDefault+'<input id="fold_ck_'+node.id+'" type="checkbox"/>'+node.name+'</li>';
                 }else{
                     $lis+='<li class="lj-tree-li" id="fold_'+node.id+'"><img  id="fold_img_'+node.id+'" class="lj-ul-li-img" src="./img/trees/tree-ul3.jpg"><input  id="fold_ck_'+node.id+'" type="checkbox"/>'+node.name;
                     $lis+=$tree.forFnByChilds($tree,node,node.childs);
                 }
             });
             return $lis+='</ul></li>';
         },
         //递归处理json数据
         sortTreeDatasFn:function($this,arr){
             return $this.forFn($this,arr,'0');
         },
         forFn:function($this,arr,id){
             var temp=[];
             var count=0;
             for (var i = 0; i < arr.length; i++) {
                   var item = arr[i];
                   if (item.pid==id) {
                       temp[count]=item;
                       temp[count].childs=$this.forFn($this,arr,item.id);
                       count++;
                   }
             }
            return temp;
        },
        //统一注册事件
        bindEvent:function($this,$datas){
                //折叠选择更换
                $this.treeFoldChanged($datas);
                //全选、全消
                $this.treeSelectByNode($datas);

        },
        //折叠按钮触发事件
        treeFoldChanged:function($datas){
                $.each($datas,function(index,node){
                    var nodeId='fold_img_'+node.id;
                    $('#'+nodeId).bind('click',function(){
                        $('#fold_'+node.id+'>ul').toggle( function(){
                            if($(this).css('display')=='none'){
                                $('#'+nodeId).attr("src","img/trees/tree-ul2.jpg");
                            }else{
                                $('#'+nodeId).attr("src","img/trees/tree-ul3.jpg");
                            }
                        });
                    });
                });
        },
        //全选
        treeSelectByNode:function($datas){
                $.each($datas,function(index,node){
                    var radioId='fold_ck_'+node.id;
                    $('#'+radioId).bind('click',function(){
                        var radios=$(this).parent().find('input');
                        $.each(radios,function(i,node){
                            node.checked=radios[0].checked;
                        });
                    });
                });
        }

     }

     /**
      * 创建tree实例
      * @param {Object} options
      */
     $.fn.mytree=function(options){
         //实例化tree对象
         var tree=new MyTree(this,options);
         //初始化tree
         tree.init();
         //返回tree对象
         return tree;
     }

 })(jQuery);

看看如何使用：

 <script type="text/javascript">
         $(function() {
             $('#treeData').mytree({
                 id:'treeData',
                 data:null,
                 url:'json/tree_learn_02.json',
                 params:null
             });
         });
     </script>