修改jquery.checktree的BUG，顺便牢骚一下jquery插件的质量令人担忧哇！！

以前没用过jquery，据说挺火的，我也看了一下下，发现真的挺不错的，而且网站上插件巨多

 

然后我需要一个带CheckBox的树，jquery的网站有现成的CheckTree v 0.2，虽然比较简单，但是完全满足我需求了，用起来也比较方便。 

开始我是通过FireFox浏览CheckTree的网站的，然后我用IE调试程序的发现节点有排挤现象，开始以为是自己程序的问题，但是排除一切可能性才发现是这个插件提供的CSS本身就有问题。如图，IE显示本来就不正常： 


 

我也不想改我的程序了，发现修改checktree.css的ul.tree li .arrow和ul.tree li .checkbox的CSS设置即可 

Css代码 

ul.tree li .arrow {  

    width: 20px;  

    height: 20px;  

    padding: 0;  

    margin: 0;  

    cursor: pointer;  

    float: left;  

    background: transparent no-repeat 0 4px;  

    margin-left:-40px;  

    position:absolute;  

}  

  

ul.tree li .checkbox {  

    width: 20px;  

    height: 18px;  

    padding: 0;  

    margin: 0;  

    cursor: pointer;  

    float: left;  

    background: url(/Content/Images/check0.gif) no-repeat 0 0px;  

    margin-left:-20px;  

    position:absolute;  

}  

继续完成的我功能，我发现没有办法设定节点checkbox的选中状态，总是未选中的状态，我的这个功能都快写完了，不想换插件了，帮他改BUG吧。 
首先，我要通过设置<input type="checkbox" checked="checked">input checked属性来设置状态。 

Html代码 

<li>  

    <input type="checkbox" checked="checked">  

    <label>United States</label>  

    <ul>  

        <li>  

        <input type="checkbox" name="geo" value="pennsylvania"  checked="checked">  

        <label>Pennsylvania</label>  

        </li>  

  

    </ul>  

</li>  

分析他的代码 

Js代码 

//.attr("checked", "")  

    .hide()  

.end()  

首先他把所有的checked的状态全设定为未选中的状态，我把这行注销，保留状态信息。 
然后在最后加了段代码 

Js代码 

.end()  

.find(":checkbox")  

.change()  

在初始化的最后，执行change()方法，设置节点状态。 
然后我还修改了change()方法 

Js代码 

.change(function() {  

    // Fired when the children of this checkbox have changed.  

    // Children can change the state of a parent based on what they do as a group.  

    var $all = jQuery(this).siblings("ul").find(":checkbox");  

    var $checked = $all.filter(":checked");  

  

    // All children are checked  

    if ($all.length == $checked.length && jQuery(this).attr("checked")) {  

        jQuery(this)  

            .attr("checked", "checked")  

            .siblings(".checkbox")  

                .removeClass("half_checked")  

                .addClass("checked")  

        ;  

        // Fire parent's onCheck callback  

        if (settings.onCheck) settings.onCheck(jQuery(this).parent());  

    }  

  

    // All children are unchecked  

    else if ($checked.length == 0) {  

        jQuery(this)  

            .attr("checked", "")  

            .siblings(".checkbox")  

                .removeClass("checked")  

                .removeClass("half_checked")  

        ;  

        // Fire parent's onUnCheck callback  

        if (settings.onUnCheck) settings.onUnCheck(jQuery(this).parent());  

    }  

  

    // Some children are checked, makes the parent in a half checked state.  

    else {  

        // Fire parent's onHalfCheck callback only if it's going to change  

        if (settings.onHalfCheck && !jQuery(this).siblings(".checkbox").hasClass("half_checked"))  

            settings.onHalfCheck(jQuery(this).parent());  

  

        jQuery(this)  

            .attr("checked", "checked")  

            .siblings(".checkbox")  

                .removeClass("checked")  

                .addClass("half_checked")  

        ;  

    }  

})  

附件是我需改后的checktree。 

jquery.checktree.zip (2.6 KB)

下载次数: 683

查看图片附件

引用：
http://www.javaeye.com/topic/309483