带“checkbox”的树型人员选择JS，请meizz，fason，hbhbhbhbhb1021在完善一下！谢谢！

Question

从昨晚开始研究“部门人员选择树”，在网上找到的树很多，都不符合要求，要么仅仅是树，不带"checkbox"的，要么带的也不知道如何得到这些被选的值！！！所以发此贴，在线等待各位高手完善！！！谢谢！

Answer 1

meizz，fason，hbhbhbhbhb1021? 各位高手不在？闲麻烦？还是什么啊？希望给改进一下！

Answer 2

按照你的需求改了下，js文件为menutree.js
代码太长，分开回复
/*********************************** /
目录树代码 V1.21
  .无限分类
  .以"-"数目表示层数,清晰明了
  .动态展开&收缩
  天窗 http://www.faisun.com
  暖阳 [email protected]
  2004 年 11 月
/ **********************************/var faisunMenu_openedfolderimage_src="menutree/openedfolder.gif";
var faisunMenu_closedfolderimage_src="menutree/closedfolder.gif";
var faisunMenu_menufileimage_src="menutree/menufile.gif";var faisunMenu_treetext=new Array();
var faisunMenu_treeurl=new Array();
var faisunMenu_treeurltarget=new Array();var faisunMenu_treeNum=0;document.write("<style type='text/css'>.blockhide{display:none;} .blockmove{overflow: hidden;height:1px;display:block;} .blockshow{overflow: visible;height:1px;display:block;} .hideme{overflow: visible;display:none;} .showme{overflow: visible;display:block;} .faisunMenu td{font-size:12px;} </style>");function outinit(itemNo,dir,blockheight){ //缩小一个div的高度
  var subfiles=document.all["item"+itemNo];
  if(blockheight==0){
subfiles.className="blockshow";
    blockheight=parseInt(subfiles.offsetHeight);
if(dir>0)subfiles.className="blockmove";
  }
  var outinspeed=blockheight/5;
  var nowheight=parseInt(subfiles.offsetHeight)+outinspeed*dir;
  if(nowheight<=0){
    subfiles.className="blockhide";
return;
  }else{
    subfiles.className="blockmove";
  }
  if(nowheight>=blockheight && dir>0){
    subfiles.className="blockshow";
return;
  }
  subfiles.style.height=nowheight;
  subfiles.scrollTop=blockheight;
  parentsresize(subfiles);
  setTimeout("outinit("+itemNo+","+dir+","+blockheight+")",15);
}function parentsresize(obj){ //缩小父类div的高度
do{
if(obj.className=="faisunMenu"){
break;
}
if(obj.className=="blockshow"){
obj.style.height="1px";
}
}while(obj=obj.parentElement);
}function showhideit(itemNo){
  var showfolder=document.images["openedfolderimage"+itemNo];
  var hidefolder=document.images["closedfolderimage"+itemNo];
  var subfiles=document.all["item"+itemNo];
  if(subfiles.className=="blockmove") return;  if(showfolder.className=="hideme") {
hidefolder.className="hideme";
    showfolder.className="showme";
outinit(itemNo,1,0);
  }
  else {
showfolder.className="hideme";
    hidefolder.className="showme";
outinit(itemNo,-1,0);
  }
}function addtree(text,url,target){
  faisunMenu_treetext.push(text);
  faisunMenu_treeurl.push(url?url:"");
  faisunMenu_treeurltarget.push(target?target:"mainframe");
}function getsubnum(text){ //算出前面有几个"-"号
  var newtext=text.replace(/^-*/,"");
  return text.length-newtext.length;
}
function createtree(){  faisunMenu_treeNum++;
  var treestatus=new Array();
  var treeendlayer=new Array();
  var openedlayer=new Array();  var next_subnum=0;
  for(i=faisunMenu_treetext.length-1;i>=0;i--){ //从后面分析起,是否有为结束位置或有子树枝
    var subnum=getsubnum(faisunMenu_treetext[i]);
treestatus[i]=0;
if(subnum<next_subnum){  //有子目录
   treeendlayer[next_subnum]=0;
   treestatus[i]+=1;
}
if(!treeendlayer[subnum]){ //结束位置
   treeendlayer[subnum]=1;
   treestatus[i]+=2;
}
//显然地,既有子目录又是结束位置时 treestatus[i]=3;
next_subnum=subnum;
  }
  
  var echo="<div class='faisunMenu'>";
  for(i=0;i<faisunMenu_treetext.length;i++){
     if(!faisunMenu_treetext[i]) continue;
 var subnum=getsubnum(faisunMenu_treetext[i]);
 var newtext=faisunMenu_treetext[i].replace(/^-*\*?/,"");
 
 if(treestatus[i]==1||treestatus[i]==3){
   var havechild=1;
 }else{
   var havechild=0;
 }  if(treestatus[i]==2||treestatus[i]==3){
   openedlayer[subnum]=0;
   var barstatus=2;
 }else{
   openedlayer[subnum]=1;
   var barstatus=1;  
 }  var showme=faisunMenu_treetext[i].match(/^-*\*/);
 var openfold=(i==faisunMenu_treetext.length-1?0:faisunMenu_treetext[i+1].match(/^-*\*/));
 var li=i-1;
     if(i>0&&(treestatus[li]==1||treestatus[li]==3)){
   echo += "<div id='item"+faisunMenu_treeNum+li+"' class='"+(showme?"blockshow":"blockhide")+"'>";
 }
 echo += "<table border='0' cellspacing='0' cellpadding='0' "+(subnum==0?"height=25":"")+"><tr>\n";
for(j=1;j<subnum;j++){
  echo += "<td width='20' valign=bottom><img src='menutree/"+(openedlayer[j]?"bar3.gif":"spacer.gif")+"' width='20' height='20'></td>\n";
}
if(subnum>0){
  echo += "<td width='20' valign=bottom><img src='menutree/bar"+barstatus+".gif' width='20' height='20'></td>";
}
var clicktoshowhide=(havechild?"onclick='showhideit("+faisunMenu_treeNum+""+i+")' style='cursor:hand' ":"");
    echo += "<td width='22' valign=bottom "+clicktoshowhide+"><img name='openedfolderimage"+faisunMenu_treeNum+""+i+"' src='"+(havechild?faisunMenu_openedfolderimage_src:faisunMenu_menufileimage_src)+"' class='"+(openfold?"showme":"hideme")+"' width='20' height='20'><img name='closedfolderimage"+faisunMenu_treeNum+""+i+"' src='"+(havechild?faisunMenu_closedfolderimage_src:faisunMenu_menufileimage_src)+"' class='"+(openfold?"hideme":"showme")+"' width='20' height='20'></td>";
echo += "<td nowrap valign=bottom><input type=checkbox onclick='checkAll("+faisunMenu_treeNum+i+",this)'><a "+clicktoshowhide+" "+(faisunMenu_treeurl[i]?"href='"+faisunMenu_treeurl[i]+"'":"name='#'")+" target='"+faisunMenu_treeurltarget[i]+"'>"+newtext+"</a></td></tr></table>\n\n";      if(barstatus==2&&!havechild){
   for(j=subnum;j>=0;j--){
     if(!openedlayer[j]) echo += "</div>";else break;
   }
 }
  }
  echo += "</div>";
  document.write(echo);  //清空列表以接受下一个菜单
  faisunMenu_treetext=new Array();
  faisunMenu_treeurl=new Array();
  faisunMenu_treeurltarget=new Array();}
function checkAll(itemNo,obj)
{ 
if(obj.nextSibling.onclick!=null)
{
  var subfiles=document.all["item"+itemNo];
  var objs=subfiles.getElementsByTagName("INPUT")
  for(var i=0;i<objs.length;i++)
  {
   objs[i].checked=obj.checked
  }
}
}
function showAllChecked()
{
var returnResult=new Array();
var objs=document.getElementsByTagName("INPUT")
var tempId=""
for(var i=0;i<objs.length;i++)
{
if(objs[i].type=="checkbox")
{
if(objs[i].nextSibling.onclick==null)
{
if(objs[i].checked==true)
{
tempId=objs[i].parentNode.previousSibling.childNodes[0].name.replace(/^openedfolderimage/,"")
returnResult.push(tempId);
}
}
}
}
alert(returnResult)
}
/************************* /例:
addtree("标题一","title1.htm");
addtree("-子目录一","sunmenu1.htm");
addtree("-子目录二","sunmenu1.htm");
createtree();.可以建立多个目录树,重复上面的代码即可..addtree()三个参数: 
  (1) 显示的文本,有几个"-"号表位于几层,"-"号后紧跟"*"号表该层默认展开
  (2) URL;
  (3) target,URL的打开目标窗口,默认"forummainframe"
createtree();生成一个目录树,可以生成多个/ ************************/

Answer 3

tree.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0024)http://www.gses.cn/tree/ -->
<HTML><HEAD><TITLE>tree</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK 
href="css/style.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.3020" name=GENERATOR></HEAD>
<BODY bgColor=#eef0f2 leftMargin=5 topMargin=2><BR>
<SCRIPT language=JavaScript src="tree.files/menutree.js"></SCRIPT><SCRIPT language=JavaScript>
document.body.onselectstart=new Function('return false;');
addtree('<B>-=人员选择=-</B>');
addtree('-*软件部','1');
addtree('--张三','1');
addtree('--李四','2');
addtree('--王六','3');addtree('-市场部','2');
addtree('--王小虎','6');
addtree('--市场一部','4');
addtree('---张一','9');
addtree('---张二','10');
addtree('--市场二部','5');addtree('-广告管理','3');
addtree('--王六','4');
addtree('--王七','5');createtree();
</SCRIPT>
<INPUT type=button value=确定 onclick=showAllChecked()><BR><BR>说明： 
<BR>实现功能：点选部门，将该部门下面人员或该部门下的"子部门"选上？实现人员选择功能？点击确定，用“alert()”弹出所有被选人员ID即可。<BR><BR>部门后面的参数为:部门ID<BR><BR>人员后面的参数为:人员ID<BR><BR>addtree('-*软件部','1');<BR>addtree('--张三','1');<BR>addtree('--李四','2');<BR>addtree('--王六','3');<BR><BR>addtree('-市场部','2');<BR>addtree('--王小虎','6');<BR>addtree('--市场一部','4');<BR>addtree('---张一','9');<BR>addtree('---张二','10');<BR>addtree('--市场二部','5');<BR><BR>addtree('-广告管理','3');<BR>addtree('--王六','4');<BR>addtree('--王七','5');<BR></BODY></HTML>