谁能给我一个梅花雪大侠的带checkbox功能的树的js？

它的我没有不过这里有个类似的
JKTree (folder/file/checkbox)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style re="[email protected]">
.treeItemJK {}
.treeTitleJK {}
.rootJK  {}
.commonClosedFolderJK {cursor:hand;}
.commonOpenFolderJK {cursor:hand;}
.lastClosedFolderJK {cursor:hand;}
.lastOpenFolderJK {cursor:hand;}
</style><script language=javascript>
/*
//var rootJKHtml ='<img src="root.gif"/>';
var commonClosedFolderJKHtml ='<img src="commonClosedFolder.gif" onclick="clickFolderImgFun(this);" class="commonClosedFolderJK"  align="absMiddle" />';
var commonOpenFolderJKHtml ='<img src="commonOpenFolder.gif" onclick="clickFolderImgFun(this);" class="commonOpenFolderJK"  align="absMiddle" />';
var lastClosedFolderJKHtml ='<img src="lastClosedFolder.gif" onclick="clickFolderImgFun(this);" class="lastClosedFolderJK"  align="absMiddle" />';
var lastOpenFolderJKHtml ='<img src="lastOpenFolder.gif" onclick="clickFolderImgFun(this);" class="lastOpenFolderJK"  align="absMiddle" />';
var commonFileJKHtml ='<img src="commonFile.gif"  align="absMiddle" />';
var lastFileJKHtml ='<img src="lastFile.gif"  align="absMiddle" />';
var fileJKHtml ='<img src="file.gif" />';
var folderJKHtml ='<img src="folder.gif" />';
var threadJKHtml ='<img src="thread1.gif" align="absMiddle" />';
var blankJKHtml ='<img src="blank.gif" align="absMiddle" />';
*/
//var rootJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/root.gif"/>';
var commonClosedFolderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/P1.gif" onclick="clickFolderImgFun(this);" class="commonClosedFolderJK" align="absMiddle" />';
var commonOpenFolderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/M1.gif" onclick="clickFolderImgFun(this);" class="commonOpenFolderJK" align="absMiddle" />';
var lastClosedFolderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/P2.gif" onclick="clickFolderImgFun(this);" class="lastClosedFolderJK" align="absMiddle" />';
var lastOpenFolderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/M2.gif" onclick="clickFolderImgFun(this);" class="lastOpenFolderJK" align="absMiddle" />';
var commonFileJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/L1.gif" align="absMiddle" />';
var lastFileJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/L2.gif" align="absMiddle" />';
var fileJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/file.gif" />';
var folderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/folder.gif" />';
var threadJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/L4.gif" align="absMiddle" />';
var blankJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/L5.gif" align="absMiddle" />';var currentTreeItem=null;
function mouseOverInTree(){
   if(event.srcElement.className=="treeItemJK") currentTreeItem=event.srcElement;
   else if (event.srcElement.parentElement.className=="treeItemJK") currentTreeItem=event.srcElement.parentElement;
   if(currentTreeItem!=null) currentTreeItem.style.setAttribute("backgroundColor","#D4D0C8");
}
function mouseOutInTree(){
  if(currentTreeItem==null) return;
  currentTreeItem.style.backgroundColor="";
  currentTreeItem=null;
}
function clickFolderImgFun(folderImgObj)
{
  var itemObj=folderImgObj.parentElement;
  var itemId=itemObj.id.replace(/treeItem_/ig,"");
  var treeTreeObj=document.getElementById("tree_tree_"+itemId);
  if(folderImgObj.className=="commonOpenFolderJK"){
    folderImgObj.outerHTML=commonClosedFolderJKHtml;
    treeTreeObj.style.display="none";;
  }
  else  if(folderImgObj.className=="lastOpenFolderJK"){
    folderImgObj.outerHTML=lastClosedFolderJKHtml;
    treeTreeObj.style.display="none";
  }
  else   if(folderImgObj.className=="commonClosedFolderJK"){
    folderImgObj.outerHTML=commonOpenFolderJKHtml;
    treeTreeObj.style.display="";
    if(treeTreeObj.innerHTML.length<20) treeTreeObj.innerHTML=getSubItemsHtml(itemObj);
  }
  else   if(folderImgObj.className=="lastClosedFolderJK"){
    folderImgObj.outerHTML=lastOpenFolderJKHtml;
    treeTreeObj.style.display="";
    if(treeTreeObj.innerHTML.length<20) treeTreeObj.innerHTML=getSubItemsHtml(itemObj);
  }
  else if (folderImgObj.className=="rootJK"){
    if(treeTreeObj.innerHTML.length<20) treeTreeObj.innerHTML=getSubItemsHtml(itemObj);
  }
}
function getSubItemsHtml(itemObj)//得到sub的HTML字符串
{
  var items= getSubItems(itemObj);
  var itemsHtml=new Array(items.length);
  var itemId=itemObj.id.replace(/treeItem_/ig,"");
  for(var i=0;i<items.length-1;i++){
    if("Folder"==items[i][0])   itemsHtml[i]='<DIV class=treeItemJK id="treeItem_'+items[i][1]+'" >'+getItemTreeImgsHtml(itemObj)+commonClosedFolderJKHtml+getItemHtml(itemObj,items[i]);
    else itemsHtml[i]='<DIV class=treeItemJK id="treeItem_'+items[i][1]+'" >'+getItemTreeImgsHtml(itemObj)+commonFileJKHtml+getItemHtml(itemObj,items[i]);
  }
  var lastItem=items[items.length-1];
  {
    if("Folder"==lastItem[0])   itemsHtml[items.length-1]='<DIV class=treeItemJK id="treeItem_'+items[i][1]+'" >'+getItemTreeImgsHtml(itemObj)+lastClosedFolderJKHtml+getItemHtml(itemObj,lastItem)+'</span>';
    else itemsHtml[items.length-1]='<DIV class=treeItemJK id="treeItem_'+items[i][1]+'" >'+getItemTreeImgsHtml(itemObj)+lastFileJKHtml+getItemHtml(itemObj,lastItem)+'</span>';
  }
  return "\n"+itemsHtml.join("\n");
}
function getItemTreeImgsHtml(itemObj)
{
  var itemObjElements=itemObj.children;
  var imgsHtml="";
  for(var i=0;i<itemObjElements.length;i++){
    if(itemObjElements[i].className=="rootJK") return "";
    if(itemObjElements[i].className=="lastOpenFolderJK"||itemObjElements[i].className=="lastClosedFolderJK" ){
      imgsHtml+=blankJKHtml;
      break;
    }
    else if (itemObjElements[i].className=="commonOpenFolderJK"||itemObjElements[i].className=="commonClosedFolderJK"){
      imgsHtml+=threadJKHtml;
      break;
    }
 else {
   imgsHtml+=itemObjElements[i].outerHTML;
 }
  }
  return imgsHtml;
}

解决方案 »

  1.   

    function getSubItems(parentItemObj) //此函数仅作示例,修改（或重载）此函数来自定义tree的节点数据类型。
    {
      var parentItemId=parentItemObj.id.replace(/treeItem_/ig,"");
      var items=new Array();
      items[items.length]=new Array("Folder",parentItemId+"01");
      items[items.length]=new Array("Folder",parentItemId+"02");
      items[items.length]=new Array("File",parentItemId+"03");
      items[items.length]=new Array("File",parentItemId+"04");
      items[items.length]=new Array("Checkbox",parentItemId+"05");
      items[items.length]=new Array("Checkbox",parentItemId+"06");
      return items;
    }
    function getItemHtml(parentItemObj,item)//此函数仅作示例,修改（或重载）此函数来自定义tree的节点HTML。
    {
      var htmlStr="";
      if("Folder"==item[0]) htmlStr=folderJKHtml+'<A class=treeTitleJK href="#" target="aaaa">目录'+item[1]+'</A></DIV><span id="tree_tree_'+item[1]+'"></span>';
      else if("File"==item[0]) htmlStr=fileJKHtml+'<A class=treeTitleJK href="#" target="aaaa">文件'+item[1]+'</A></DIV>';
      else if("Checkbox"==item[0]) htmlStr='<input type=checkbox name=abcdefg value="'+item[1]+'">'+'<A class=treeTitleJK href="#" target="aaaa">文件'+item[1]+'</A></DIV>';
      return htmlStr;
    }
    function showTreeItem(itemId)//此函数用来展开树，以显示所指定的treeItem
    {
     var itemObj=document.getElementById("treeItem_"+itemId);
     if(itemObj==null) {
       alert("该Item还没生成");
       return;
     }
     while(itemObj!=null && (/treeItem/ig).test(itemObj.id))
     {
       var itemFolderImg=getTreeItemFolderImg(itemObj);
       if(itemFolderImg!=null && ("commonClosedFolderJK"==itemFolderImg.className || "lastClosedFolderJK"==itemFolderImg.className))
         itemFolderImg.fireEvent("onclick");
       itemObj=document.getElementById(itemObj.parentElement.id.replace(/tree_tree/ig,"treeItem"));
     }
     if(true)//实现scrollIntoView（obj.scrollIntoWiew不够体贴）
     {
       itemObj=document.getElementById("treeItem_"+itemId);
       var tempInput=document.createElement("input");
       itemObj.appendChild(tempInput);
       tempInput.focus();
       tempInput.removeNode(true);
     }
    }
    function showMultipleTreeItems(itemIds)//此函数用来展开树，以显示所指定的一系列Item.
    {
     for(var i=0;i<itemIds.length;i++){
          var itemObj=document.getElementById("treeItem_"+itemIds[i]);
          if(itemObj==null){
         alert("该Item还没生成");
         return;
          }
          var itemFolderImg=getTreeItemFolderImg(itemObj);
       if(itemFolderImg!=null && ("commonClosedFolderJK"==itemFolderImg.className || "lastClosedFolderJK"==itemFolderImg.className))
         itemFolderImg.fireEvent("onclick");
     }
     if(itemIds.length>0)//实现scrollIntoView（obj.scrollIntoWiew不够体贴）
     {
       var itemObj=document.getElementById("treeItem_"+itemIds[itemIds.length-1]);
       var tempInput=document.createElement("input");
       itemObj.appendChild(tempInput);
       tempInput.focus();
       tempInput.removeNode(true);
     }
    }function getTreeItemFolderImg(itemObj){
     var objs=itemObj.children;
     for(var i=0;i<objs.length;i++){
       var tempClassName=objs[i].className;
       if("commonClosedFolderJK"==tempClassName || "commonOpenFolderJK"==tempClassName || "lastClosedFolderJK"==tempClassName || "lastOpenFolderJK"==tempClassName )
         return objs[i];
     }
     return null;
    }
    </script>
    </head>
    <body >
    <div>
    注1：部分代码及所有图片来自csdn tree(csdn-tree的作者为Meizz) <br/><br/>   
    注2：使用时请将图片改成本公司图片，以免涉嫌侵权<br/><br/>    
    注3：function getSubItems(parentItemObj) //此函数仅作示例,修改（或重载）此函数来自定义tree的节点数据类型及数据来源。<br/><br/> 
    注4：function getItemHtml(parentItemObj,item)//此函数仅作示例,修改（或重载）此函数来自定义tree的节点HTML。<br/><br/> 
    注5：前三个函数可用于参照“本tree的html”来生成的tree状html页面<br/><br/> 
    注6：AJAX层开层生成树，参见注3<font color=#FFFFFF>（外行话，说给外行听）</font><br/><br/> 
    注7：Javascript层开层生成树，参见注3<br/><br/> 
    注8：function showTreeItem(itemId)用来打开某节点：请双击<input width=50 value="0101" ondblclick="showTreeItem(this.value);"> <br/><br/> 
    注9：function showMultipleTreeItems(items)//此函数用来展开树，以显示所指定的一系列Item.：请双击<input width=50 value="02,0202,020205" ondblclick="showMultipleTreeItems(this.value.split(','));"> <br/><br/> 
    注10：本页面只作代码示例，客户化时请自行封装。<br/><br/> 
    注11：本页面仅在IE6下测试过。<br/><br/> 
    注-----：作者JK：[email protected]<br/><br/> 
    </div>
    <DIV id=treeContainerDiv onmouseover="mouseOverInTree();" onmouseout="mouseOutInTree();" >
    <nobr>
    <DIV class=treeItemJK id="treeItem_"><img src="http://community.csdn.net/Tree/TreeImages/root.gif" onclick="clickFolderImgFun(this);" class="rootJK" align="absMiddle" /><A class=treeTitleJK href="#" target="aaaa">根目录</A></DIV><span id="tree_tree_"></span>
    </nobr>
    </DIV>
    <script >
    clickFolderImgFun(document.getElementById('treeItem_').children[0]);//这一句是为打开tree_root。如果页面没什么图片的话，也可以放到<body onload='...'>
    </script>
    </body>
    </html>
      

  2.   

    <script src="http://writeblog.csdn.net/scripts/jsframework.js"></script>
    调用http://writeblog.csdn.net/scripts/目录下的jsframework.js这个js
      

  3.   


    //当根节点为空的时候做的处理
    MzTreeView.prototype.atRootIsEmpty = function()
    {
      var RCN = this.node["0"].childNodes;
      for(var i=0; i<RCN.length; i++)
      {
        if(!RCN[i].isLoad) this.expand(RCN[i].id);
        if (RCN[i].text=="")
        {
          var node = RCN[i].childNodes[0], HCN  = node.hasChild;
          if(this.wordLine)
          {
            var span = this.getElementById(this.name +"_tree_"+ node.id);
            span = span.childNodes[0].childNodes[0].childNodes[0];
            span.innerHTML = RCN[i].childNodes.length>1 ? "┌" : "─";
          }
          else
          {
            node.iconExpand  =  RCN[i].childNodes.length>1 ? HCN ? "PM0" : "L0" : HCN ? "PM3" : "L3"
            this.getElementById(this.name +"_expand_"+ node.id).src = this.icons[node.iconExpand].src;
          }
        }
      }
    };//初始化数据源里的数据以便后面的快速检索
    MzTreeView.prototype.dataFormat = function()
    {
      var a = new Array();
      for (var id in this.nodes) a[a.length] = id;
      this.names = a.join(this._d + this._d);
      this.totalNode = a.length; a = null;
    };//在数据源检索所需的数据节点
    //id  客户端节点对应的id
    MzTreeView.prototype.load = function(id)
    {
      var node = this.node[id], d = this.divider, _d = this._d;
      var sid = node.sourceIndex.substr(node.sourceIndex.indexOf(d) + d.length);
      var reg = new RegExp("(^|"+_d+")"+ sid +d+"[^"+_d+d +"]+("+_d+"|$)", "g");
      var cns = this.names.match(reg), tcn = this.node[id].childNodes; if (cns){
      reg = new RegExp(_d, "g"); for (var i=0; i<cns.length; i++)
      tcn[tcn.length] = this.nodeInit(cns[i].replace(reg, ""), id); }
      node.isLoad = true;
    };//初始化节点信息, 根据 this.nodes 数据源生成节点的详细信息
    //sourceIndex 数据源中的父子节点组合的字符串 0_1
    //parentId    当前树节点在客户端的父节点的 id
    MzTreeView.prototype.nodeInit = function(sourceIndex, parentId)
    {
      this.index++;
      var source= this.nodes[sourceIndex], d = this.divider;
      var text  = this.getAttribute(source, "text");
      var hint  = this.getAttribute(source, "hint");
      var sid   = sourceIndex.substr(sourceIndex.indexOf(d) + d.length);
      this.node[this.index] =
      {
        "id"    : this.index,
        "text"  : text,
        "hint"  : hint ? hint : text,
        "icon"  : this.getAttribute(source, "icon"),
        "path"  : this.node[parentId].path + d + this.index,
        "isLoad": false,
        "isExpand": false,
        "parentId": parentId,
        "parentNode": this.node[parentId],
        "sourceIndex" : sourceIndex,
        "childAppend" : ""
      };
         this.nodes[sourceIndex] = "index:"+ this.index +";"+ source;
         this.node[this.index].hasChild = this.names.indexOf(this._d + sid + d)>-1;
      if(this.node[this.index].hasChild)  this.node[this.index].childNodes = [];
      return this.node[this.index];
    };//从XML格式字符串里提取信息
    //source 数据源里的节点信息字符串(以后可以扩展对XML的支持)
    //name   要提取的属性名
    MzTreeView.prototype.getAttribute = function(source, name)
    {
      var reg = new RegExp("(^|;|\\s)"+ name +"\\s*:\\s*([^;]*)(\\s|;|$)", "i");
      if (reg.test(source)) return RegExp.$2.replace(/[\x0f]/g, ";"); return "";
    };//根据节点的详细信息生成HTML
    //node   树在客户端的节点对象
    //AtEnd  布尔值  当前要转换的这个节点是否为父节点的子节点集中的最后一项
    MzTreeView.prototype.nodeToHTML = function(node, AtEnd)
    {
      var source = this.nodes[node.sourceIndex];
      var target = this.getAttribute(source, "target");
      var data = this.getAttribute(source, "data");
      var url  = this.getAttribute(source, "url");
      if(!url) url = this.url;
      if(data) url += (url.indexOf("?")==-1?"?":"&") + data;
      if(!target) target = this.target;  var id   = node.id;
      var HCN  = node.hasChild, isRoot = node.parentId=="0";
      if(isRoot && node.icon=="") node.icon = "root";
      if(node.icon=="" || typeof(this.icons[node.icon])=="undefined")
        node.icon = HCN ? "folder" : "file";
      node.iconExpand  = AtEnd ? "└" : "├";  var HTML = "<DIV noWrap='True'><NOBR>";
      if(!isRoot)
      {
        node.childAppend = node.parentNode.childAppend + (AtEnd ? "　" : "│");
        if(this.wordLine)
        {
          HTML += "<SPAN>"+ node.parentNode.childAppend + (AtEnd ? "└" : "├") +"</SPAN>";
          if(HCN) HTML += "<SPAN class='pm' id='"+ this.name +"_expand_"+ id +"'>+</SPAN>";
        }
        else
        {
          node.iconExpand  = HCN ? AtEnd ? "PM2" : "PM1" : AtEnd ? "L2" : "L1";
          HTML += "<SPAN>"+ this.word2image(node.parentNode.childAppend) +"<IMG "+
            "align='absmiddle' id='"+ this.name +"_expand_"+ id +"' "+
            "src='"+ this.icons[node.iconExpand].src +"' style='cursor: "+ (!node.hasChild ? "":
            (this.navigator=="msie"||this.navigator=="opera"? "hand" : "pointer")) +"'></SPAN>";
        }
      }
      HTML += "<IMG "+
        "align='absMiddle' "+
        "id='"+ this.name +"_icon_"+ id +"' "+
        "src='"+ this.icons[node.icon].src +"'><A "+
        "class='MzTreeview' hideFocus "+
        "id='"+ this.name +"_link_"+ id +"' "+
        "href='"+ url +"' "+
        "target='"+ target +"' "+
        "title='"+ node.hint +"' "+
        "onfocus=\""+ this.name +".focusLink('"+ id +"')\" "+
        "onclick=\"return "+ this.name +".nodeClick('"+ id +"')\">"+ node.text +
      "</A></NOBR></DIV>";
      if(isRoot && node.text=="") HTML = "";  HTML = "\r\n<SPAN id='"+ this.name +"_tree_"+ id +"'>"+ HTML 
      HTML +="<SPAN style='DISPLAY: none'></SPAN></SPAN>";
      return HTML;
    };//在使用图片的时候对 node.childAppend 的转换
    MzTreeView.prototype.word2image = function(word)
    {
      var str = "";
      for(var i=0; i<word.length; i++)
      {
        var img = "";
        switch (word.charAt(i))
        {
          case "│" : img = "L4"; break;
          case "└" : img = "L2"; break;
          case "　" : img = "empty"; break;
          case "├" : img = "L1"; break;
          case "─" : img = "L3"; break;
          case "┌" : img = "L0"; break;
        }
        if(img!="")
          str += "<IMG align='absMiddle' src='"+ this.icons[img].src +"' height='20'>";
      }
      return str;
    }
      

  4.   

    没试成功，给我发一个可用的来，我的email: [email protected]