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

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)

源码地址

jquery封装多棵并列树的更多相关文章

  1. ajx技术解析以及模拟jQuery封装

    1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  2. jquery封装常用方法

    var git = { //true表示格式正确 checkEmail: function (str) { -]{,})(\S*)/g) == null) { return false; } else ...

  3. 不借助jquery封装好的ajax,你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  4. jquery封装的选项卡

    ul,li,div{ margin:; padding:;} ul,li{ list-style:none;} .tab_wrap{ width:450px; margin: auto 50px; o ...

  5. 自己使用Jquery封装各种功能分享

    自己使用Jquery封装各种功能分享: 左右滚动图片 瀑布流 流动显示列表 广告切换 头像切换And广告切换 获取搜索引擎的来源关键字 上面列表中展示的功能都是使用jquery进行封装实现的,希望大家 ...

  6. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  7. InnoDB一棵B+树可以存放多少行数据?

    一个问题? InnoDB一棵B+树可以存放多少行数据?这个问题的简单回答是:约2千万.为什么是这么多呢?因为这是可以算出来的,要搞清楚这个问题,我们先从InnoDB索引数据结构.数据组织方式说起. 我 ...

  8. cf276E 两棵线段树分别维护dfs序和bfs序,好题回头再做

    搞了一晚上,错了,以后回头再来看 /* 对于每次更新,先处理其儿子方向,再处理其父亲方向 处理父亲方向时无法达到根,那么直接更新 如果能达到根,那么到兄弟链中去更新,使用bfs序 最后,查询结点v的结 ...

  9. Jquery封装(学习)01

    1.在开发过程中,我们有时候会经常用到重复的jquey代码,最常见的是我们那里需要就再哪里复制粘贴,这样大大增加了冗余代码,维护起来也不方便.我们何不把共同的jquery代码封装起来,哪里需要就哪里调 ...

随机推荐

  1. Linux-NoSQL之Redis(二)

    一.Redis配置文件详解 1.通用配置 daemonize no  # 默认情况下,redis并不是以daemon形式来运行的.通过daemonize配置项可以控制redis的运行形式 pidfil ...

  2. 【ACM-ICPC 2018 徐州赛区网络预赛】D.Easy Math 杜教筛

    代码 #include <bits/stdc++.h> using namespace std; typedef long long ll; const int N = 20000000; ...

  3. linux命令学习笔记(17):whereis 命令

    whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和 源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度 ...

  4. JAVA中的优化技巧(适用Android)

    最近的机器内存又爆满了,除了新增机器内存外,还应该好好review一下我们的代码,有很多代码编写过于随意化,这些不好的习惯或对程序语言的不了解是应该好好打压打压了. 下面是参考网络资源总结的一些在Ja ...

  5. backbonejs学习

    文章: http://www.cnblogs.com/yexiaochai/archive/2013/07/27/3219402.html http://blog.csdn.net/cony100/a ...

  6. C# 表达式树(Expression)

    c#中有Expression,即表达式. 通过Expression可以动态构造代码,并编译执行.  比如: 1.  创建参数表达式 :ParameterExpression numParam = Ex ...

  7. IP 地址漂移

    1.概念 应用访问虚拟ip,当主服务器正常工作时,虚拟ip指向主服务器,当主服务器宕掉后,虚拟ip自动指向从服务器,当主服务器被人修好后,再自动指向主服务器, 这种虚拟ip的指向方式称为ip地址漂移. ...

  8. Logstash 2.0.0 beta2 发布,开源日志管理

    Logstash 是一个应用程序日志.事件的传输.处理.管理和搜索的平台.你可以用它来统一对应用程序日志进行收集管理,提供 Web 接口用于查询和统计. Logstash 现在是 ElasticSea ...

  9. Java程序打包成exe可执行文件

    前言: 我们都知道Java可以将二进制程序打包成可执行jar文件,双击这个jar和双击exe效果是一样一样的,但感觉还是不同.其实将java程序打包成exe也需要这个可执行jar文件. 准备: ecl ...

  10. JUST第二界算法设计大赛题解

    1.问题描述: 悠悠假期同叔叔一起去书店,他选中了六本书,每本书的单价(单位:元)分别为:3.1,1.7,2,5.3,0.9 和7.2.不巧的是,叔叔只带了十几块钱,为了让悠悠高兴,叔叔同意买书,但提 ...