当前位置: 代码迷 >> Web前端 >> SimpleTree扩张:支持checkbox节点选择(半选、全选、不选)
  详细解决方案

SimpleTree扩张:支持checkbox节点选择(半选、全选、不选)

热度:240   发布时间:2012-11-09 10:18:48.0
SimpleTree扩展:支持checkbox节点选择(半选、全选、不选)

由于公司项目的需要,现需要一棵带有复选框的树形结构,但项目里头已经运用了JquerySimpleTree组件来做树形展现,可是猴子用的版本不支持复选框勾选,也不想重新去找一个树形结构来用,于是乎就想对它进行扩展,现在来展示一下结果。呵呵,如果发现了啥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 //多选框事件 ........ 

?

?

?

完整代码请查看附件。

?

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

?

?

?

?

?

?

?

?

?

?

1 楼 silent_hacker 2010-04-27  
试着做了一下。发现checkbox的value值不好放进去? 因为服务端都是foreach出来的 这个怎么解决?
2 楼 zhengchao860730 2010-04-28  
silent_hacker 写道
试着做了一下。发现checkbox的value值不好放进去? 因为服务端都是foreach出来的 这个怎么解决?

服务端肯定默认要能够传出当前节点的状态呀, 数据也是遍历出来的,这个状态可以自己定义,我有提供定义接口 默认是 ck=n  ,我想问一下 你遍历出来的是什么样子的东西,是HTML片段还是 XML或者JSON ?  发来看看~
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里。
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标记。我这么说你明白吗?
5 楼 silent_hacker 2010-05-05  
你理解错了。ck标记是代表全选还是半选还是没选吧。还有我这个代码是写的是radio单选框的做法(比较笨)^_^。

言归正传,就拿你的例子来说。
我传到前台一个list集合(比如是复数的人员信息),每人都有一个id(人员编号)。 怎么获得选择了哪些人员,使用checkbox。
6 楼 zhengchao860730 2010-05-06  
silent_hacker 写道
你理解错了。ck标记是代表全选还是半选还是没选吧。还有我这个代码是写的是radio单选框的做法(比较笨)^_^。

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


单选框 - -!!  那我的这个可能不支持。 我后台是去获取input[type=checkbox]的dom对象.
7 楼 silent_hacker 2010-05-07  
zhengchao860730 写道
silent_hacker 写道
你理解错了。ck标记是代表全选还是半选还是没选吧。还有我这个代码是写的是radio单选框的做法(比较笨)^_^。

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


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

那你这个用途何在?
checkbox的tree都是用来做权限、产品主档选择的吧- -。。。
8 楼 zhengchao860730 2010-05-07  
silent_hacker 写道
zhengchao860730 写道
silent_hacker 写道
你理解错了。ck标记是代表全选还是半选还是没选吧。还有我这个代码是写的是radio单选框的做法(比较笨)^_^。

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


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

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

你用单选框的话 你这个树还有什么用途呀? 树里头用单选框的话和你点击一个树节点有啥区别呀 。。 呵呵 估计你这个要自己去扩展了
9 楼 silent_hacker 2010-05-17  
看来兄弟错会了我的意思。
我做了个小DEMO 你看下。现在后台的数据不知道该如何填充到checkbox里
jdk1.5 eclipse的

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


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> 标签上
你的例子我已经弄好了  ~ 的确是我漏了! 文档也没说明 ~~
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我试过 好像不好用? 如何获取选中的节点值?
12 楼 zhengchao860730 2010-05-25  
关于值的获取,SimpleTree本身就有自带的方法。我这里就不多做介绍老  呵呵~
13 楼 clixiang 2010-06-28  
如果要form提交到服务器PHP脚本获取被勾选的值,现有版本应该不行吧??

我改了一下,终于可以成功获取.
14 楼 zhengchao860730 2010-06-29  
clixiang 写道
如果要form提交到服务器PHP脚本获取被勾选的值,现有版本应该不行吧??

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

哈哈~  发现高手了~  前一段时间没来这里 比较忙。呵呵
  相关解决方案