修改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代码  

1. ul.tree li .arrow {  
2.     width: 20px;  
3.     height: 20px;  
4.     padding: 0;  
5.     margin: 0;  
6.     cursor: pointer;  
7.     float: left;  
8.     background: transparent no-repeat 0 4px;  
9.     margin-left:-40px;  
10.     position:absolute;  
11. }  
12.   
13. ul.tree li .checkbox {  
14.     width: 20px;  
15.     height: 18px;  
16.     padding: 0;  
17.     margin: 0;  
18.     cursor: pointer;  
19.     float: left;  
20.     background: url(/Content/Images/check0.gif) no-repeat 0 0px;  
21.     margin-left:-20px;  
22.     position:absolute;  
23. }  

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

Html代码  

1. <li>  
2.     <input type="checkbox" checked="checked">  
3.     <label>United States</label>  
4.     <ul>  
5.         <li>  
6.         <input type="checkbox" name="geo" value="pennsylvania"  checked="checked">  
7.         <label>Pennsylvania</label>  
8.         </li>  
9.   
10.     </ul>  
11. </li>  

分析他的代码  

Js代码  

1. //.attr("checked", "")  
2.     .hide()  
3. .end()  

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

Js代码  

1. .end()  
2. .find(":checkbox")  
3. .change()  

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

Js代码  

1. .change(function() {  
2.     // Fired when the children of this checkbox have changed.  
3.     // Children can change the state of a parent based on what they do as a group.  
4.     var $all = jQuery(this).siblings("ul").find(":checkbox");  
5.     var $checked = $all.filter(":checked");  
6.   
7.     // All children are checked  
8.     if ($all.length == $checked.length && jQuery(this).attr("checked")) {  
9.         jQuery(this)  
10.             .attr("checked", "checked")  
11.             .siblings(".checkbox")  
12.                 .removeClass("half_checked")  
13.                 .addClass("checked")  
14.         ;  
15.         // Fire parent's onCheck callback  
16.         if (settings.onCheck) settings.onCheck(jQuery(this).parent());  
17.     }  
18.   
19.     // All children are unchecked  
20.     else if ($checked.length == 0) {  
21.         jQuery(this)  
22.             .attr("checked", "")  
23.             .siblings(".checkbox")  
24.                 .removeClass("checked")  
25.                 .removeClass("half_checked")  
26.         ;  
27.         // Fire parent's onUnCheck callback  
28.         if (settings.onUnCheck) settings.onUnCheck(jQuery(this).parent());  
29.     }  
30.   
31.     // Some children are checked, makes the parent in a half checked state.  
32.     else {  
33.         // Fire parent's onHalfCheck callback only if it's going to change  
34.         if (settings.onHalfCheck && !jQuery(this).siblings(".checkbox").hasClass("half_checked"))  
35.             settings.onHalfCheck(jQuery(this).parent());  
36.   
37.         jQuery(this)  
38.             .attr("checked", "checked")  
39.             .siblings(".checkbox")  
40.                 .removeClass("checked")  
41.                 .addClass("half_checked")  
42.         ;  
43.     }  
44. })  

附件是我需改后的checktree。  

• jquery.checktree.zip (2.6 KB)
• 下载次数: 683

• 查看图片附件

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