修复jquery.treeview的增加子节点的方法的bug

时间：2024-01-09 08:42:50

　　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也搜索到了。

略加猜测，便在这里加上了几行代码。。

修复jquery.treeview的增加子节点的方法的bug

居然人品爆发，一次成功了！

　　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;

        });

相关文章