修复jquery.treeview的增加子节点的方法的bug
1.修复理由
在一个android项目中用到了treeview控件(本来自己通过android的原生api实现了一个http://www.cnblogs.com/Mr-Nobody/p/3527688.html,但是动画效果总是有点小问题,实在是击碎我那小小的自信心,于是果断转用webview+js插件实现了。)。本来js插件里优秀的tree控件很多,比如国内著名的ztree,还有各大ui控件的自带tree。不过要数最简单易用就要数最为经典的jquery.treeview了。而且动画效果也还行,我就是看中了其轻便,动画效果好,而且也比较容易用。。(其它的tree暂时还没有接触过。。)。,所以就采用了它的。
2.修复过程
在jquery.treeview中增加子节点的方法是:
var branch=$("<li><span>child1</span></li>").appendTo(parentLi);
$("#tree").treeview({
add:branch
});
但是此方法有个很严重的问题,就是增加的节点必须只能是li。如果是在一个没有子节点的节点中插入子节点时,该节点的展开按钮是没有的,也就是父级的事件没有绑定上去。。
于是乎照着这个思路写了几个hack的写法,都没有用,于是一狠心就上了源代码。。还好大神的代码不多,虽然以自己目前的水平看懂大神的代码还有几个地球到月球的距离,但是
好在大神代码不多,用ctrl+F也搜索到了。
略加猜测,便在这里加上了几行代码。。

居然人品爆发,一次成功了!
3.补遗
也许菜鸟的人品毕竟有限,在运气好的情况下对于增加节点的bug一次就修复了,但是在删除节点时,由于本人对jquery的事件机制一知半解,结果浪费了很多时间。。直到查看文档才恍然大悟。。
官网的demo都会有"全部删除"的bug,真是对开源项目太不认真了。。
原因是jquery的冒泡事件导致的。
return proxied.apply(this, arguments).bind("add", function(event, branches) {
$(branches).prev()
.removeClass(CLASSES.last)
.removeClass(CLASSES.lastCollapsable)
.removeClass(CLASSES.lastExpandable)
.find(">.hitarea")
.removeClass(CLASSES.lastCollapsableHitarea)
.removeClass(CLASSES.lastExpandableHitarea);
$(branches).find("li").andSelf().prepareBranches(settings).applyClasses(settings, $(this).data("toggler"));
/*修复增加ul的bug*/
if(branches.is("ul")){
$(branches).parent().prepareBranches(settings).applyClasses(settings, $(this).data("toggler"));
}
return false;
}).bind("remove", function(event, branches) {
var prev = $(branches).prev();
var parent = $(branches).parent();
$(branches).remove();
prev.filter(":last-child").addClass(CLASSES.last)
.filter("." + CLASSES.expandable).replaceClass(CLASSES.last, CLASSES.lastExpandable).end()
.find(">.hitarea").replaceClass(CLASSES.expandableHitarea, CLASSES.lastExpandableHitarea).end()
.filter("." + CLASSES.collapsable).replaceClass(CLASSES.last, CLASSES.lastCollapsable).end()
.find(">.hitarea").replaceClass(CLASSES.collapsableHitarea, CLASSES.lastCollapsableHitarea);
/*修复全部删除的bug*/
if(parent.children().length==0){
parent.parent().removeClass(CLASSES.collapsable).removeClass(CLASSES.expandable)
parent.siblings(".hitarea").andSelf().remove();
}
//返回false,终止冒泡,就不会把整棵树都删除了。。
return false;
//throw 1;
});
修复jquery.treeview的增加子节点的方法的bug的更多相关文章
- 微服务探索之路04篇k8s增加子节点,metrics资源监控,ingress-nginx域名配置及https配置
1 k8s增加子节点 1.1 子节点服务器安装docker,使用脚本自动安装 curl -fsSL https://get.docker.com | bash -s docker --mirror A ...
- [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)
Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...
- 【总文档】rac增加新节点的方法步骤 How to Add Node/Instance or Remove Node/Instance in 10gR2, 11gR1, 11gR2 and 12c Oracle Clusterware and RAC
[总文档]How to Add Node/Instance or Remove Node/Instance in 10gR2, 11gR1, 11gR2 and 12c Oracle Clusterw ...
- c# winform结合数据库动态生成treeview的父节点和子节点方法和思路
tb_food表的结构如图一: tb_foodtype表的结构如图二: //获取tb_foodtype表中的所有数据 private void InitDataTable() { SqlConnect ...
- JS获取父、兄、子节点
一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...
- jQuery获取父级、兄弟节点的方法
一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...
- 遍历DOM树,获取子节点
获取子节点的方法有: 方法 说明 children() 选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点. find() 选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...
- jQuery树形菜单(1)jquery.treeview
jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...
- DOM基础之“寻找”子节点
今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Obj ...
随机推荐
- [CAMCOCO][C#]我的系统架构.服务器端.(三)----Model层
我估计一片帖子写不完这个,慢慢来吧... 先上个图,按照图来说明应该容易说清楚一些. 在Model Core核心代码中,老胡创建了一个类 CAMCOCO.Model.Core,要求今后在Model L ...
- SQL Server 添加登录账户配置权限
一.新建登录名 1. 在登录名右侧的文本框中输入新建的管理员账号名称:2. 一对单选按钮组中,选择Sql Server 身份验证,并输入登录密码:3. 勾选强制实施密码策略复选框:(密码策略一般是指加 ...
- 图解SQL的inner join(join)、left join、right join、full outer join、union、union all的区别
对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...
- windows下mysql增量备份与全备份批处理
win下的全备批处理 批处理用于游戏服务器,经过严格测试,且正式使用,主要用来完全备份数据库,当然.这只是将数备份出来 ,至于如何将备份出来的数据远程传送的远程服务器上可以调用ftp的功能,此脚本并未 ...
- 20150301—ASP.NET的Repeater
Repeater与GridView等数据列表一样,都是用来显示数据库的信息的,其中Repeater是最基本的列表形式,其用法也比较灵活. 一.Repeater的位置: 工具箱-数据-Repeater ...
- 编程Tips
三元运算符 Vb中的iif(expr,truepart,falsepart)和C#中的expr?truepart:falsepart. 无论expr的结果是true还是false,true/false ...
- ThinkPHP快速入门
ThinkPHP快速入门 1.ThinkPHP自动生成 当我们部署完ThinkPHP框架后,其会自动生成Application文件夹,如下图所示: 2.自动生成细节分析 问题1:Application ...
- conditon监视器接口
conditon监视器接口的实例对象必须通过Lock.newCondition()建立 立
- OpenGL1-6讲小结
首先是第一讲,GL窗体的搭建,依葫芦画瓢,很多代码虽然解释了,最后看起来还是比较生涩.一开始按照上一篇的链接去敲的代码,结果最后while死循环了,我也不知道问题出哪儿,后来去找了个源码,还附带了更加 ...
- HDU 1165 Eddy's research II
题意:已知,求A(m, n). 分析:根据样例模拟一下过程就可以找出递推关系. #include<cstdio> #include<cstring> #include<c ...