jquery封装多棵并列树

起因：当前的树都是在一棵树上，应产品需求，现在需要将一级菜单并列开，然后往下铺，这样只好自己写了。

demo图：

我直接封在了jquery上，此外还加了获取勾选数据的一些简单API。

思路:先把一级菜单摘出来，然后批量渲染每一列数据。

核心代码：

1.递归算法

画树必须有递归，回顾一下递归三要素：{a:递归结束条件,b:递归结束后的操作,c：提取公共逻辑}

 fn.recursive = function(data){
             var that = this;
             var beginStr = '<ul>', oneDataStr = '';
             if(data.children.length > 0){
                 $.each(data.children,function(index,value){
                     beginStr += '<li id='+value.id+'>';
                     beginStr += '<input type="hidden" name="data" value='+JSON.stringify(value)+'>';
                     beginStr += '<input type="checkbox" name="checkOne"/>';
                     beginStr += '<span>'+value.name+'</span>'
                     beginStr += that.recursive(value);
                     beginStr += '</li>';
                 })
             }
             return beginStr += '</ul>';
         }

通过递归来拼每一列的dom

2.勾选的交互逻辑

a:只要孩子节点选中，他所有的长辈都必须选中，（此处又有递归）

 fn.setParentIsCheck = function(_this){
             if(_this.length == 0){
                 return false
             }
             var targetNode = _this.parent('li').parent('ul').siblings('input[name="checkOne"]');
             if(_this.prop('checked')){
                 targetNode.prop('checked',true);
             }else if(_this.parent('li').siblings('li').find('input[name="checkOne"]').prop('checked') == false){
                 targetNode.prop('checked',false);
             }
             this.setParentIsCheck(targetNode);
         }

b:节点选中，所有孩子节点全选中。（此处需要循环遍历）

$('#' + this.treeId).delegate('input[name="checkOne"]','click',function(){
                var _this = $(this);
                if(_this.prop('checked')){
                    _this.parent('li').find('input[name="checkOne"]').each(function(index){
                        $(this).prop('checked',true);
                    })
                    _this.children('input[name="checkOne"]').prop('checked',true);
                }else{
                    _this.parent('li').find('input[name="checkOne"]').each(function(index){
                        $(this).prop('checked',false);
                    })
                }
                that.setParentIsCheck(_this);
            })

c：注意，取消勾选 当前节点，如果兄弟节点还是选中的话，他们的长辈还是选中状态（易出的bug）

3.使用

html部分：<div id="myTree" class="tree"></div>

js部分: var myTree = $('#myTree').dafeiTree(options)

源码地址