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的更多相关文章

  1. 微服务探索之路04篇k8s增加子节点,metrics资源监控,ingress-nginx域名配置及https配置

    1 k8s增加子节点 1.1 子节点服务器安装docker,使用脚本自动安装 curl -fsSL https://get.docker.com | bash -s docker --mirror A ...

  2. [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)

    Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...

  3. 【总文档】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 ...

  4. c# winform结合数据库动态生成treeview的父节点和子节点方法和思路

    tb_food表的结构如图一: tb_foodtype表的结构如图二: //获取tb_foodtype表中的所有数据 private void InitDataTable() { SqlConnect ...

  5. JS获取父、兄、子节点

    一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...

  6. jQuery获取父级、兄弟节点的方法

    一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...

  7. 遍历DOM树,获取子节点

    获取子节点的方法有:  方法  说明  children()  选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点.  find()  选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...

  8. jQuery树形菜单(1)jquery.treeview

    jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...

  9. DOM基础之“寻找”子节点

    今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Obj ...

随机推荐

  1. FusionCharts

    上一篇已经介绍了一款免费的JS图表插件,这一篇再介绍另一款图表插件,同样是免费的,同样是基于JS的,使用依然很简单.该插件的官方网站,貌似也是收费的,我们可以下载对应的免费版FusionCharts ...

  2. SliverLight(how to show data point on the column series)

    You should know that Silverlight comes with win form drawing software is different, it has no the la ...

  3. 你一定能用的上的iOS第三方库

    点国内程序员不常用的热门iOS第三方库:看完,还敢自称"精通iOS开发"吗? 综合github上各个项目的关注度与具体使用情况,涵盖功能,UI,数据库,自动化测试,编程工具等类型, ...

  4. js正则表达式的验证示例

    //验证邮箱的JS正则 <script type="text/javascript"> $(function() { $("#inputemail" ...

  5. JQuery自定义属性的设置和获取

    Jquery操作自定义属性的方法,很简洁: $("#test").attr("test","aaa") // 设置 $("#tes ...

  6. 4月12日学习笔记——jQuery操作属性和样式

    区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...

  7. AnyCAD脚本模型

    采用AnyCAD建立的模型, 基于AnyCAD.Net SDK在C#中展示模型:

  8. mysql数据库的简单操作

    首先进入mysql:mysql -u root -p 1.建库: create database 库名称; 例如:create database mydata;(创建一个名为“mydata”的库): ...

  9. ARP协议详解

    ARP协议:地址解析协议,将IP地址映射到MAC地址. ARP缓存:每个主机都有存储IP地址和MAC地址的缓冲区.每条记录最长生存时间为10分钟,如果一条记录2分钟没有使用,则会被删除.如果始终在使用 ...

  10. JAVA多线程学习1

    一.进程与线程 线程是指进程内的一个执行单元(可理解为程序内的一条执行路径),也是进程内的可调度实体. 线程与进程的区别: 1.线程是进程的一个执行单元,一个进程可以拥有多个线程,线程之间共享进程的地 ...