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>