以前没用过jquery,据说挺火的,我也看了一下下,发现真的挺不错的,而且网站上插件巨多
然后我需要一个带CheckBox的树,jquery的网站有现成的 CheckTree v 0.2,虽然比较简单,但是完全满足我需求了,用起来也比较方便。
开始我是通过FireFox浏览CheckTree的网站的,然后我用IE调试程序的发现节点有排挤现象,开始以为是自己程序的问题,但是排除一切可能性才发现是这个插件提供的CSS本身就有问题。如图,IE显示本来就不正常:
我也不想改我的程序了,发现修改checktree.css的ul.tree li .arrow和ul.tree li .checkbox的CSS设置即可
继续完成的我功能,我发现没有办法设定节点checkbox的选中状态,总是未选中的状态,我的这个功能都快写完了,不想换插件了,帮他改BUG吧。
首先,我要通过设置<input type="checkbox" checked="checked">input checked属性来设置状态。
分析他的代码
首先他把所有的checked的状态全设定为未选中的状态,我把这行注销,保留状态信息。
然后在最后加了段代码
在初始化的最后,执行change()方法,设置节点状态。
然后我还修改了change()方法
附件是我需改后的checktree。
![](http://writeblog.csdn.net/images/smiles/icon_biggrin.gif)
然后我需要一个带CheckBox的树,jquery的网站有现成的 CheckTree v 0.2,虽然比较简单,但是完全满足我需求了,用起来也比较方便。
开始我是通过FireFox浏览CheckTree的网站的,然后我用IE调试程序的发现节点有排挤现象,开始以为是自己程序的问题,但是排除一切可能性才发现是这个插件提供的CSS本身就有问题。如图,IE显示本来就不正常:
![](http://subwayline13.javaeye.com/upload/attachment/65551/de6ff7c6-8a8a-38d4-bbe9-ad1256602266.jpg)
我也不想改我的程序了,发现修改checktree.css的ul.tree li .arrow和ul.tree li .checkbox的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属性来设置状态。
- <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>
分析他的代码
- //.attr("checked", "")
- .hide()
- .end()
首先他把所有的checked的状态全设定为未选中的状态,我把这行注销,保留状态信息。
然后在最后加了段代码
- .end()
- .find(":checkbox")
- .change()
在初始化的最后,执行change()方法,设置节点状态。
然后我还修改了change()方法
- .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。