zoukankan      html  css  js  c++  java
  • 修复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
            });
    View Code

    但是此方法有个很严重的问题,就是增加的节点必须只能是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;
            });
    View Code
  • 相关阅读:
    一个使用 Python 的人工智能聊天机器人框架
    【TensorFlow 官网 可以直接访问】让中国开发者更容易地使用TensorFlow打造人工智能应用
    Object Relational Tutorial 对象关系教程
    Automap sqlalchemy.ext.automap 自动映射数据库表结构
    回溯法
    子集树和排列树
    平衡树
    二叉查找树
    graphviz使用
    linux进程内存布局
  • 原文地址:https://www.cnblogs.com/Mr-Nobody/p/3530526.html
Copyright © 2011-2022 走看看