SimpleTree扩展：支持checkbox节点选择(半选、全选、不选)

由于公司项目的需要，现需要一棵带有复选框的树形结构，但项目里头已经运用了Jquery的SimpleTree组件来做树形展现，可是猴子用的版本不支持复选框勾选，也不想重新去找一个树形结构来用，于是乎就想对它进行扩展，现在来展示一下结果。呵呵，如果发现了啥BUG请及时给予回帖，猴子先谢谢啦~。。。。

该树形脚本需依赖 jquery1.2.6版本开发包。（高版本的我没试过，应该没啥影响！）

扩展内容：jquery.simple.tree.js

.... 
/** 
* added by zhengchao 2010-03-31 
*   beforeAjax : 展开AJAX之前的事件接口 
*/ 
var beforeAjax = false; 

/** 
*added by zhengchao 2010-04-05 
* nodeCheckBox : 多选框启用与否 
*/ 
var nodeCheckBox = false;

/** 
* added by zhengchao 2010-04-05 
* checkBoxClick : 多选框事件复写接口 
*/ 
var checkBoxClick = false; ........ 

/** 
* 复选框属性及状态标志 
* 默认属性，支持重新定义 
* by zhengchao 2010-04-05 
* 例： <span ck='a'>表示全选</span> 
*/ 
nodeCheckBox : false, ckFlag : 'ck', //标签中的元素 
allCheckFlag : 'a', //全选 
halfCheckFlag : 'h', //半选 
noCheckFlag : 'n', //没选 
checkBoxClick : false //多选框事件 ........ 

 

 

 

完整代码请查看附件。

 

算法上写的比较臭的地方。请大家见谅，欢迎拍砖^_^!!

 

 

 

 

 

 

 

 

 

 

评论

15 楼 xieguolun 2012-11-04  

请问左边为一个读取数据库的数据生成的tree，右边的操作向数据库写入数据时如何更新tree?

14 楼 zhengchao860730 2010-06-29  

clixiang 写道

如果要form提交到服务器PHP脚本获取被勾选的值,现有版本应该不行吧??

我改了一下,终于可以成功获取.

哈哈~  发现高手了~  前一段时间没来这里 比较忙。呵呵

13 楼 clixiang 2010-06-28  

如果要form提交到服务器PHP脚本获取被勾选的值,现有版本应该不行吧??

我改了一下,终于可以成功获取.

12 楼 zhengchao860730 2010-05-25  

关于值的获取，SimpleTree本身就有自带的方法。我这里就不多做介绍老  呵呵~

11 楼 silent_hacker 2010-05-25  

zhengchao860730 写道

silent_hacker 写道

看来兄弟错会了我的意思。
我做了个小DEMO 你看下。现在后台的数据不知道该如何填充到checkbox里
jdk1.5 eclipse的

http://dl.iteye.com/topics/download/444275ec-48fa-344d-8cb9-28bef17801d2

终于明白了！  真不好意思~ 
补充：标志位定义在 <span ww=”aa”>A-1-1</span> 标签上
你的例子我已经弄好了  ~ 的确是我漏了！ 文档也没说明 ~~

不容易啊 呵呵 jquery我是初学。
ckFlag我试过 好像不好用？ 如何获取选中的节点值？

10 楼 zhengchao860730 2010-05-19  

silent_hacker 写道

看来兄弟错会了我的意思。
我做了个小DEMO 你看下。现在后台的数据不知道该如何填充到checkbox里
jdk1.5 eclipse的

http://dl.iteye.com/topics/download/444275ec-48fa-344d-8cb9-28bef17801d2

终于明白了！  真不好意思~ 
补充：标志位定义在 <span ww=”aa”>A-1-1</span> 标签上
你的例子我已经弄好了  ~ 的确是我漏了！ 文档也没说明 ~~

9 楼 silent_hacker 2010-05-17  

看来兄弟错会了我的意思。
我做了个小DEMO 你看下。现在后台的数据不知道该如何填充到checkbox里
jdk1.5 eclipse的

http://dl.iteye.com/topics/download/444275ec-48fa-344d-8cb9-28bef17801d2

8 楼 zhengchao860730 2010-05-07  

silent_hacker 写道

zhengchao860730 写道

silent_hacker 写道

你理解错了。ck标记是代表全选还是半选还是没选吧。还有我这个代码是写的是radio单选框的做法（比较笨）^_^。

言归正传，就拿你的例子来说。
我传到前台一个list集合（比如是复数的人员信息），每人都有一个id（人员编号）。 怎么获得选择了哪些人员，使用checkbox。

单选框 - -!!  那我的这个可能不支持。 我后台是去获取input[type=checkbox]的dom对象.

那你这个用途何在？
checkbox的tree都是用来做权限、产品主档选择的吧- -。。。

你用单选框的话 你这个树还有什么用途呀？ 树里头用单选框的话和你点击一个树节点有啥区别呀 。。 呵呵 估计你这个要自己去扩展了

7 楼 silent_hacker 2010-05-07  

zhengchao860730 写道

silent_hacker 写道

你理解错了。ck标记是代表全选还是半选还是没选吧。还有我这个代码是写的是radio单选框的做法（比较笨）^_^。

言归正传，就拿你的例子来说。
我传到前台一个list集合（比如是复数的人员信息），每人都有一个id（人员编号）。 怎么获得选择了哪些人员，使用checkbox。

单选框 - -!!  那我的这个可能不支持。 我后台是去获取input[type=checkbox]的dom对象.

那你这个用途何在？
checkbox的tree都是用来做权限、产品主档选择的吧- -。。。

6 楼 zhengchao860730 2010-05-06  

silent_hacker 写道

你理解错了。ck标记是代表全选还是半选还是没选吧。还有我这个代码是写的是radio单选框的做法（比较笨）^_^。

言归正传，就拿你的例子来说。
我传到前台一个list集合（比如是复数的人员信息），每人都有一个id（人员编号）。 怎么获得选择了哪些人员，使用checkbox。

单选框 - -!!  那我的这个可能不支持。 我后台是去获取input[type=checkbox]的dom对象.

5 楼 silent_hacker 2010-05-05  

你理解错了。ck标记是代表全选还是半选还是没选吧。还有我这个代码是写的是radio单选框的做法（比较笨）^_^。

言归正传，就拿你的例子来说。
我传到前台一个list集合（比如是复数的人员信息），每人都有一个id（人员编号）。 怎么获得选择了哪些人员，使用checkbox。

4 楼 zhengchao860730 2010-05-04  

silent_hacker 写道

<c:forEach items="${types}" var="tp">
<li class="close" id='${tp.typeId }'>
<span>
<input type='radio' name='myradio' value='${tp.typeId}' onclick='event.cancelBubble=true;'/>
${tp.title }
                        </span>
        </li>
</c:forEach>


博主看下。这是我实现单选框方法的前台。 你那个生成checkbox的脚本在JS里，我怎么把foreach出来的值填入到checkbox里。

为什么是 type="redio" ,不是应该是 type="checkbox" , 假设你此时为checkbox了，等待页面都完全画好以后，你将整个遍历结束的HTML进行树形化(例如:$("#treeId").simpleTree(....,在这里定义属性 “你的标记”=“你的值”)) 在你贴的这个片段中没有看到标记，说明默认采用CK标记。我这么说你明白吗？

3 楼 silent_hacker 2010-05-04  

<c:forEach items="${types}" var="tp">
<li class="close" id='${tp.typeId }'>
<span>
<input type='radio' name='myradio' value='${tp.typeId}' onclick='event.cancelBubble=true;'/>
${tp.title }
                        </span>
        </li>
</c:forEach>


博主看下。这是我实现单选框方法的前台。 你那个生成checkbox的脚本在JS里，我怎么把foreach出来的值填入到checkbox里。

2 楼 zhengchao860730 2010-04-28  

silent_hacker 写道

试着做了一下。发现checkbox的value值不好放进去？ 因为服务端都是foreach出来的 这个怎么解决？

服务端肯定默认要能够传出当前节点的状态呀, 数据也是遍历出来的,这个状态可以自己定义，我有提供定义接口 默认是 ck=n  ，我想问一下 你遍历出来的是什么样子的东西，是HTML片段还是 XML或者JSON ？  发来看看~

1 楼 silent_hacker 2010-04-27  

试着做了一下。发现checkbox的value值不好放进去？ 因为服务端都是foreach出来的 这个怎么解决？