问题描述
最近在做公司权限这一块，需要做一个带复选框(checkbox)的动态树形菜单！要求功能：当选择子节点(未全选)的时候父节点为半选，当选择子节点(全选)的时候父节点为全选！具体效果图如下图，请做过或了解这个功能的前辈将详细源码附件传给我，邮箱为：bjava2010@163.com非常感谢。邮件名(主题)请为用户名，我好给分！
解决方案
解决方案二：
这个用分解决不了问题......
解决方案三：
这个相对来讲比较复杂但是不是不能实现。
解决方案四：
jquery的checktree不错的：http://static.geewax.org/checktree/index.html你可以参考下
解决方案五：
免費給樓主送上一個：有用的話多給點分就是了：下載地址：我的CSDN下載http://trocp.download.csdn.net/
解决方案六：
快捷版本：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>实用的多级树级菜单</title><FCK:metahttp-equiv="content-type"content="text/html;charset=gb2312"/><!--把下面代码加到<head>与</head>之间--><styletype="text/css">body{margin:0;padding:0;font:12px/1.5Tahoma,Helvetica,Arial,sans-serif;}ul,li,{margin:0;padding:0;}ul{list-style:none;}#root{margin:10px;width:200px;overflow:hidden;}#rootli{line-height:25px;}#root.rem{padding-left:16px;}#root.add{background:url(201010122130_add.gif)-4px-31pxno-repeat;}#root.ren{background:url(201010122130_add.gif)-4px-7pxno-repeat;}#rootlia{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());}#rootliinput{vertical-align:middle;margin-left:5px;}#root.two{padding-left:20px;display:none;}</style></head><body><!--把下面代码加到<body>与</body>之间--><ulid="root"><li><label><ahref="javascript:;"_fcksavedurl="javascript:;">校讯通</a></label><ulclass="two"><li><label><ahref="javascript:;"_fcksavedurl="javascript:;">沈阳市</a></label><ulclass="two"><li><label><inputtype="checkbox"value="123456"><ahref="javascript:;"_fcksavedurl="javascript:;">二小</a></label><ulclass="two"><li><label><inputtype="checkbox"value="123456"><ahref="javascript:;"_fcksavedurl="javascript:;">二年级</a></label></li><li><label><inputtype="checkbox"value="123456"><ahref="javascript:;"_fcksavedurl="javascript:;">三年级</a></label><ulclass="two"><li><label><inputtype="checkbox"value="123456"><ahref="javascript:;"_fcksavedurl="javascript:;">一班</a></label><ulclass="two"><li><label><inputtype="checkbox"value="123456"><ahref="javascript:;"_fcksavedurl="javascript:;">张三</a></label></li><li><label><inputtype="checkbox"value="123456"><ahref="javascript:;"_fcksavedurl="javascript:;">王五</a></label></li></ul></li><li><label><inputtype="checkbox"value="123456"><ahref="javascript:;"_fcksavedurl="javascript:;">实验班</a></label></li></ul></li></ul></li></ul></li><li><label><ahref="javascript:;"_fcksavedurl="javascript:;">抚顺市</a></label><ulclass="two"><li><label><inputtype="checkbox"value="123456"><ahref="javascript:;"_fcksavedurl="javascript:;">二小</a></label></li><li><label><inputtype="checkbox"value="123456"><ahref="javascript:;"_fcksavedurl="javascript:;">一中</a></label></li></ul></li></ul></li></ul><scripttype="text/javascript">functionaddEvent(el,name,fn){//绑定事件if(el.addEventListener)returnel.addEventListener(name,fn,false);returnel.attachEvent('on'+name,fn);}functionnextnode(node){//寻找下一个兄弟并剔除空的文本节点if(!node)return;if(node.nodeType==1)returnnode;if(node.nextSibling)returnnextnode(node.nextSibling);}functionprevnode(node){//寻找上一个兄弟并剔除空的文本节点if(!node)return;if(node.nodeType==1)returnnode;if(node.previousSibling)returnprevnode(node.previousSibling);}functionparcheck(self,checked){//递归寻找父亲元素，并找到input元素进行操作varpar=prevnode(self.parentNode.parentNode.parentNode.previousSibling),parspar;if(par&&par.getElementsByTagName('input')[0]){par.getElementsByTagName('input')[0].checked=checked;parcheck(par.getElementsByTagName('input')[0],sibcheck(par.getElementsByTagName('input')[0]));}}functionsibcheck(self){//判断兄弟节点是否已经全部选中varsbi=self.parentNode.parentNode.parentNode.childNodes,n=0;for(vari=0;i<sbi.length;i++){if(sbi[i].nodeType!=1)//由于孩子结点中包括空的文本节点，所以这里累计长度的时候也要算上去n++;elseif(sbi[i].getElementsByTagName('input')[0].checked)n++;}returnn==sbi.length?true:false;}addEvent(document.getElementById('root'),'click',function(e){//绑定input点击事件，使用root根元素代理e=e||window.event;vartarget=e.target||e.srcElement;vartp=nextnode(target.parentNode.nextSibling);switch(target.nodeName){case'A'://点击A标签展开和收缩树形目录，并改变其样式会选中checkboxif(tp&&tp.nodeName=='UL'){if(tp.style.display!='block'){tp.style.display='block';prevnode(target.parentNode.previousSibling).className='ren'}else{tp.style.display='none';prevnode(target.parentNode.previousSibling).className='add'}}break;case'SPAN'://点击图标只展开或者收缩varap=nextnode(nextnode(target.nextSibling).nextSibling);if(ap.style.display!='block'){ap.style.display='block';target.className='ren'}else{ap.style.display='none';target.className='add'}break;case'INPUT'://点击checkbox，父亲元素选中，则孩子节点中的checkbox也同时选中，孩子结点取消父元素随之取消if(target.checked){if(tp){varcheckbox=tp.getElementsByTagName('input');for(vari=0;i<checkbox.length;i++)checkbox[i].checked=true;}}else{if(tp){varcheckbox=tp.getElementsByTagName('input');for(vari=0;i<checkbox.length;i++)checkbox[i].checked=false;}}parcheck(target,sibcheck(target));//当孩子结点取消选中的时候调用该方法递归其父节点的checkbox逐一取消选中break;}});window.onload=function(){//页面加载时给有孩子结点的元素动态添加图标varlabels=document.getElementById('root').getElementsByTagName('label');for(vari=0;i<labels.length;i++){varspan=document.createElement('span');span.style.cssText='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;';span.innerHTML=''span.className='add';if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName=='UL')labels[i].parentNode.insertBefore(span,labels[i]);elselabels[i].className='rem'}}</script></body></html>
1.copy2.savedashtml3.open.4.ok
解决方案七：
引用3楼ylz2007的回复:
jquery的checktree不错的：http://static.geewax.org/checktree/index.html你可以参考下
这个不错
解决方案八：
学习了~~~
解决方案九：
查查dhtmlxTree
解决方案十：
我刚自己做了一个类似的。不过我是用JS和HTML做的你这个，看样子是CS的吧？这个是tree.js的代码/***绘制树使用的对象*/functionTree2(){this.content='';this.append=function(str){this.content+=str;}this.getContent=function(){return"<tablestyle='border:0px'>"+this.content+"</table>";}}/***绘制树的入口方法*参数分别是：JSON格式的树的数据*处理中间节点绘制的方法*处理连接节点绘制的方法*/functiondrawTree2(rootId,jsonStr,drawMiddleNode,drawLinkNode){varnodeList=eval(jsonStr);vartree=newTree2();for(varindex=0,length=parseInt(nodeList.length);index<length;index++){varnode=nodeList[index];drawNode2(tree,node,drawMiddleNode,drawLinkNode);}document.getElementById(rootId).innerHTML=tree.getContent();}/***绘制节点的方法*/functiondrawNode2(tree,node,drawMiddleNode,drawLinkNode){if(node.typeCode=='0'){/*typeCode是0，说明这是个业务节点*/tree.append("<trid='middelNode_"+node.id+"'><td>");tree.append(drawMiddleNode(node));if(node.nodes.length>0){/*如果这个节点还有自节点，则先绘制一个table然后递归调用，把子节点绘制在这个table里*/tree.append("<tableid='subNodes_"+node.id+"'style='display:none;border:0px'>")for(varindex=0,length=node.nodes.length;index<length;index++){drawNode2(tree,node.nodes[index],drawMiddleNode,drawLinkNode);}tree.append("</table>");}tree.append("<td></tr>");}else{/*否则就是功能节点了*/tree.append("<tr><td>");tree.append(drawLinkNode(node));tree.append("</td></tr>");}}/***处理按钮或者中间节点被点击事件的方法*如果这个节点是打开的，则关闭这个节点*反之则打开这个节点*/functionclickNode2(id,path){varimg=document.getElementById('img_'+id);varsubNodes=document.getElementById('subNodes_'+id);if(subNodes.style.display=='none'){img.src=path+"/images/tree/opened.gif";subNodes.style.display='block';}else{img.src=path+"/images/tree/closed.gif";subNodes.style.display='none';}}/***获取一个节点前的空格个数的方法*根据当前节点的级别，绘制节点前空格的个数，使节点有一个缩进效果*/functiongetPrefixSpace2(node){varspaceStr='';for(varindex=0,length=(node.level);index<length;index++){spaceStr+=' ';}return"<label>"+spaceStr+"</label>";}
这个是使用到树控件的页面上的JSwindow.onload=function(){drawTree2("nodeTree",document.getElementById("treeVal").value,function(node){varinitImgSrc="<%=path%>/images/tree/closed.gif";if(node.nodes==null||node.nodes.length==0){initImgSrc="<%=path%>/images/tree/opened.gif";}returngetPrefixSpace2(node)+"<imgid='img_"+node.id+"'src='"+initImgSrc+"'onclick='clickNode2("+node.id+","<%=path%>")'/>"+getSelectedControlStr(node)+"<labelstyle='font-family:Verdana;font-size:14px;'onclick='clickNode2("+node.id+","<%=path%>")'>"+node.name+"</label>"},function(node){returngetPrefixSpace2(node)+"<imgsrc='<%=path%>/images/tree/linkNode.gif'/>"+getSelectedControlStr(node)+"<labelstyle='font-family:Verdana;font-size:14px;text-decoration:none'>"+node.name+"</label>";});}functiongetSelectedControlStr(node){varcheckConStr='';if(node.selected==true){checkConStr="<inputtype='checkbox'name='node_check'value='"+node.id+"'checked/>";}else{checkConStr="<inputtype='checkbox'name='node_check'value='"+node.id+"'/>";}returncheckConStr;}
解决方案十一：
treeVal这个是一个隐藏的input，用来放页面上树的JSON数据。nodeTree是一个DIV，把生成的树的html字符串放到这里面
解决方案十二：
哦，对了，这个只测试了IE6，FF3.0.5和Chrome我忘了自己的是什么版本了其他浏览器的兼容性我还木有测试