修复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暂时尚未接触过。。)。,因此就采用了它的。html

  2.修复过程

在jquery.treeview中增长子节点的方法是:jquery

    var branch=$("<li><span>child1</span></li>").appendTo(parentLi);
        $("#tree").treeview({
            add:branch
        });
View Code

可是此方法有个很严重的问题,就是增长的节点必须只能是li。若是是在一个没有子节点的节点中插入子节点时,该节点的展开按钮是没有的,也就是父级的事件没有绑定上去。。android

因而乎照着这个思路写了几个hack的写法,都没有用,因而一狠心就上了源代码。。还好大神的代码很少,虽然以本身目前的水平看懂大神的代码还有几个地球到月球的距离,可是web

好在大神代码很少,用ctrl+F也搜索到了。api

略加猜想,便在这里加上了几行代码。。app

 

 

竟然人品爆发,一次成功了!ide

 

 

  3.补遗

  也许菜鸟的人品毕竟有限,在运气好的状况下对于增长节点的bug一次就修复了,可是在删除节点时,因为本人对jquery的事件机制只知其一;不知其二,结果浪费了不少时间。。直到查看文档才恍然大悟。。动画

 

 官网的demo都会有"所有删除"的bug,真是对开源项目太不认真了。。ui

缘由是jquery的冒泡事件致使的。this

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
相关文章
相关标签/搜索