****哪位有带复选框的树状结构的源代码？？？

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>CheckBox</title>
<script language=javascript defer>
var n=document.getElementsByTagName("INPUT");
var CheckBoxNum=n.length;
var tf,SearchNodeName,SearchParentNodeName,SameNodeNum,SubNodeCheckedNum,SameNodeCheckedNum,SubNodeNum,SubNodeCheckedTF;function FindParentNode(SubNodeName)    //获取上级结点名，并判断是否被选中
{
  tf=false;                //初始化选中状态
  SearchNodeName=SubNodeName;
  t=SubNodeName.lastIndexOf("_");    //判断是否存在上级结点
  if(t!=-1)SearchNodeName=SubNodeName.substring(0,t);//如果存在上级结点，取得上级结点名
  if(document.all(SubNodeName).checked)tf=true;//判断结点是否被选中
  return SearchNodeName;
}
function CheckSubNode(NodeName)    //获取结点名，并判断子结点是否选中
{
  SubNodeCheckedTF=false;    //初始化子结点选中状态
  SubNodeNum=0;            //初始化子结点数目
  SameNodeNum=0;        //初始化同级结点数目
  SubNodeCheckedNum=0;        //初始化子结点被选中的数目
  SameNodeCheckedNum=0;        //初始化同级结点被选中的数目
  ParentNodeName=FindParentNode(NodeName);//上级结点名
  SearchParentNodeName=NodeName;//当前结点名
  d=NodeName.lastIndexOf("_");    //判断是否存在上级结点
  if(d!=-1)SearchParentNodeName=SearchParentNodeName.substring(0,d);//如果存在上级结点，取得上级结点名
  for(i=0;i<CheckBoxNum;i++)
  {
    if(n[i].name.length==NodeName.length&&ParentNodeName==FindParentNode(n[i].name))
    {
      SameNodeNum+=1;        //同级结点数目加一
      if(n[i].checked)SameNodeCheckedNum+=1;//同级结点被选中的数目加一
    }    if(n[i].name.substring(0,NodeName.length)==NodeName&&n[i].name!=NodeName&&n[i].type=="checkbox")
    {
      SubNodeNum+=1;        //子结点数数目加一
      if(n[i].checked)SubNodeCheckedNum+=1;//子结点被选中的数目加一
    }
  }
  if((SameNodeNum==1||SameNodeCheckedNum==0)&&(SubNodeCheckedNum==0)&&!document.all(NodeName).checked)
  {
      SubNodeCheckedTF=true;    //判断子结点是否被选中
  }
  return SearchParentNodeName;
}
function CheckAll(BoxName)
{
  SearchNodeName=BoxName;
  SearchParentNodeName=BoxName
  SubNodeLength=BoxName.split("_").length;  for(i=0;i<CheckBoxNum;i++)
  {
    if(n[i].name.substring(0,BoxName.length)==BoxName&&n[i].name!=BoxName&&n[i].type=="checkbox")
    n[i].checked=document.all(BoxName).checked?true:false;    //选中所有子结点
  }  for(j=1;j<SubNodeLength;j++)
  {
    document.all(FindParentNode(SearchNodeName)).checked=tf?true:false;
    document.all(CheckSubNode(SearchParentNodeName)).checked=SubNodeCheckedTF?false:true;
  } }
document.onclick=function(){if(event.srcElement.type=="checkbox")CheckAll(event.srcElement.name);}
</script>
</head><body >
<form name="f1" >
<input type="checkbox" name="bid"><br/>
　<input type="checkbox" name="bid_01"><br/>
　　<input type="checkbox" name="bid_01_01"><br/>
　　<input type="checkbox" name="bid_01_02"><br/>
　　　<input type="checkbox" name="bid_01_02_01"><br/>
　　　<input type="checkbox" name="bid_01_02_02"><br/>
　　　　<input type="checkbox" name="bid_01_02_02_01"><br/>
　　　　<input type="checkbox" name="bid_01_02_02_02"><br/>
　　　　<input type="checkbox" name="bid_01_02_02_03"><br/>
　　　　　<input type="checkbox" name="bid_01_02_02_03_01"><br/>
　　　　　<input type="checkbox" name="bid_01_02_02_03_02"><br/>
　　　　　<input type="checkbox" name="bid_01_02_02_03_03"><br/>
　　　　<input type="checkbox" name="bid_01_02_02_04"><br/>
　　　<input type="checkbox" name="bid_01_02_03"><br/>
　　<input type="checkbox" name="bid_01_03"><br/>
　　<input type="checkbox" name="bid_01_04"><br/>
　<input type="checkbox" name="bid_02"><br/>
　<input type="checkbox" name="bid_03"><br/>
　<input type="checkbox" name="bid_04"><br/>
<hr>
<input type="checkbox" name="ent" checkmain ><br/>
　<input type="checkbox" name="ent_01"><br/>
　　<input type="checkbox" name="ent_01_01"><br/>
　<input type="checkbox" name="ent_02"><br/>
　<input type="checkbox" name="ent_03"><br/>
　<input type="checkbox" name="ent_04"><br/>
</form>

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> DSTree </TITLE>
    <META NAME="Author" CONTENT="[email protected]" >
    <style>
    body,td{font:12px verdana}
    #treeBox{background-color:#fffffa;}
    #treeBox .ec{margin:0 5 0 5;}
    #treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}
    #treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}
    </style>
    <base href="http://vip.5d.cn/star/dstree/" />
    <script>
    //code by star 20003-4-7
    var HC = "color:#990000;border:1px solid #cccccc";
    var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000;";
    var IO = null;
    function initTree(){
    var rootn = document.all.menuXML.documentElement;
    var sd = 0;
    document.onselectstart = function(){return false;}
    document.all.treeBox.appendChild(createTree(rootn,sd));
    }
    function createTree(thisn,sd){
    var nodeObj = document.createElement("span");
    var upobj = document.createElement("span");
    with(upobj){
    style.marginLeft = sd*10;
    className = thisn.hasChildNodes()?"hasItems":"Items";
    innerHTML = "<img src=expand.gif class=ec>" + thisn.getAttribute("text") +"";

    onmousedown = function(){
    if(event.button != 1) return;
    if(this.getAttribute("cn")){
    this.setAttribute("open",!this.getAttribute("open"));
    this.cn.style.display = this.getAttribute("open")?"inline":"none";
    this.all.tags("img")[0].src = this.getAttribute("open")?"expand.gif":"contract.gif";
    }
    if(IO){
    IO.runtimeStyle.cssText = "";
    IO.setAttribute("selected",false);
    }
    IO = this;
    this.setAttribute("selected",true);
    this.runtimeStyle.cssText = SC;
    }
    onmouseover = function(){
    if(this.getAttribute("selected"))return;
    this.runtimeStyle.cssText = HC;
    }
    onmouseout = function(){
    if(this.getAttribute("selected"))return;
    this.runtimeStyle.cssText = "";
    }
    oncontextmenu = contextMenuHandle;
    onclick = clickHandle;
    } if(thisn.getAttribute("treeId") != null){
    upobj.setAttribute("treeId",thisn.getAttribute("treeId"));
    }
    if(thisn.getAttribute("href") != null){
    upobj.setAttribute("href",thisn.getAttribute("href"));
    }
    if(thisn.getAttribute("target") != null){
    upobj.setAttribute("target",thisn.getAttribute("target"));
    } nodeObj.appendChild(upobj);
    nodeObj.insertAdjacentHTML("beforeEnd","<br/>") if(thisn.hasChildNodes()){
    var i;
    var nodes = thisn.childNodes;
    var cn = document.createElement("span");
    upobj.setAttribute("cn",cn);
    if(thisn.getAttribute("open") != null){
    upobj.setAttribute("open",(thisn.getAttribute("open")=="true"));
    upobj.getAttribute("cn").style.display = upobj.getAttribute("open")?"inline":"none";
    if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="contract.gif";
    }

    for(i=0;i<nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
    nodeObj.appendChild(cn);
    }
    else{
    upobj.all.tags("img")[0].src ="endnode.gif";
    }
    return nodeObj;
    }
    window.onload = initTree;
    </script><script>
    function clickHandle(){
    // your code here 
    }
    function contextMenuHandle(){
    event.returnValue = false;
    var treeId = this.getAttribute("treeId");
    // your code here
    }
    </script>
    </HEAD>
    <BODY>
    <xml id=menuXML>
    <?xml version="1.0" encoding="GB2312"?>
    <DSTreeRoot text="根节点" open="true" href="http://" treeId="123">

    <DSTree text="技术论坛" open="false" treeId="">
    <DSTree text="5DMedia" open="false" href="http://" target="box" treeId="12">
    <DSTree text="网页编码" href="http://" target="box" treeId="4353" />
    <DSTree text="手绘" href="http://" target="box" treeId="543543" />
    <DSTree text="灌水" href="http://" target="box" treeId="543543" />
    </DSTree>
    <DSTree text="BlueIdea" open="false" href="http://" target="box" treeId="213">
    <DSTree text="DreamWeaver &amp; JS" href="http://" target="box" treeId="4353" />
    <DSTree text="FlashActionScript" href="http://" target="box" treeId="543543" />
    </DSTree>
    <DSTree text="CSDN" open="false" href="http://" target="box" treeId="432">
    <DSTree text="JS" href="http://" target="box" treeId="4353" />
    <DSTree text="XML" href="http://" target="box" treeId="543543" />
    </DSTree>
    </DSTree> <DSTree text="资源站点" open="false" treeId="">
    <DSTree text="素材屋" href="http://" target="box" treeId="12" />
    <DSTree text="桌面城市" open="false" href="http://" target="box" treeId="213">
    <DSTree text="壁纸" href="http://" target="box" treeId="4353" />
    <DSTree text="字体" href="http://" target="box" treeId="543543" />
    </DSTree>
    <DSTree text="MSDN" open="false" href="http://" target="box" treeId="432">
    <DSTree text="DHTML" href="http://" target="box" treeId="4353" />
    <DSTree text="HTC" href="http://" target="box" treeId="543543" />
    <DSTree text="XML" href="" target="box" treeId="2312" />
    </DSTree>
    </DSTree></DSTreeRoot>
    </xml>
    <table style="position:absolute;left:100;top:100;">
    <tr><td id=treeBox style="width:400px;height:200px;border:1px solid #cccccc;padding:5 3 3 5;" valign=top></td></tr>
    <tr><td style="font:10px verdana;color:#999999" align=right>by <font color=#660000>sTar</font><br/> 2003-4-8</td></tr>
    </table>
    </BODY>
    </HTML>
      

  2.   

    bananasmiling:您的树能不能实现将展开的树再收起来,另外,也可以通过点击展开带有子节点的父节点.
      

  3.   

    源代码下造
    http://dotnet.aspx.cc/Exam/t.zip效果http://sz.luohuedu.net/xml/tree
      

  4.   

    http://sz.luohuedu.net/xml/tree/tree.asp?type=checkbox
      

  5.   

    <HTML>
    <HEAD>
    <TITLE> emu's test of simple tree</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function checkSelect(){
    var elm = event.srcElement;
    checkChildrenRecurve(elm);
    checkRootRecurve(document.getElementById("root"));
    }
    function checkChildrenRecurve(elm){
    var li = elm.parentNode;
    var ul = li.lastChild;
    if (ul.tagName != "UL") return;
    var lis = ul.children;
    for (var i=0;i<lis.length;i++){
    lis[i].firstChild.checked=elm.checked;
    checkChildrenRecurve(lis[i].firstChild)
    }
    }
    function checkRootRecurve(ul){
    if (ul.tagName != "UL") {
    ul.parentNode.firstChild.allChecked = ul.parentNode.firstChild.checked;
    ul.parentNode.firstChild.allUnChecked = !ul.parentNode.firstChild.checked;
    return;
    }
    var lis = ul.children;
    var allChecked = true;
    var allUnChecked = true;
    for (var i=0;i<lis.length;i++){
    checkRootRecurve(lis[i].lastChild)
    allChecked = allChecked && lis[i].firstChild.checked && lis[i].firstChild.allChecked;
    allUnChecked = allUnChecked && !lis[i].firstChild.checked && lis[i].firstChild.allUnChecked;
    }
    ul.parentNode.firstChild.allChecked=allChecked;
    ul.parentNode.firstChild.allUnChecked=allUnChecked;
    if (allChecked || allUnChecked){
    ul.parentNode.firstChild.checked=allChecked;
    ul.parentNode.firstChild.style.backgroundColor="white";
    }else{
    ul.parentNode.firstChild.style.backgroundColor="gray";
    ul.parentNode.firstChild.checked=true; }
    }function init(){
    var elms = document.getElementsByTagName("INPUT");
    for (var i=0;i<elms.length;i++)
    elms[i].onclick=checkSelect;
    }
    //-->
    </SCRIPT>
    </HEAD><BODY onload="init()">
    <div>
    <input type=checkbox>
    <UL id=root>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    </UL>
    </div>
    </BODY>
    </HTML>
      

  6.   

    emu_ston：谢谢您的代码，它的选择功能非常完善，但我还要请教的一点是怎样进行一些修改，使它的初始状态为折叠的，点击后再逐级展开，这样就十分完美了！