对于梅花雪的树，想增加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="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.children[currentTreeItem.children.length-1].style.setAttribute("backgroundColor","#D4D0C8");
}function mouseOutInTree(){
  if(currentTreeItem==null) return;
  currentTreeItem.children[currentTreeItem.children.length-1].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;
}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");
  items[items.length]=new Array("EditableItem",parentItemId+"07");
  items[items.length]=new Array("NewItem",parentItemId+"00");
  return items;
}

解决方案 »

  1.   


    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>';
      else if("EditableItem"==item[0]) htmlStr='可编辑节点示例'+'<A class=treeTitleJK href="#" onclick="alert(\'弹出修改框，修改完后刷新本节点的父节点\');return false;">修改</A>&nbsp;<A class=treeTitleJK href="#" onclick="alert(\'删除本节点，并刷新本节点的父节点\');return false;">删除</A></DIV>';
      else if("NewItem"==item[0]) htmlStr=''+'<A class=treeTitleJK href="#" onclick="alert(\'弹出添加框，添加完后刷新本节点的父节点\');return false;">添加</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" width="16" height="16" /><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.   

    在"MzTreeView.prototype.nodeInit = function(sourceIndex, parentId)"中添加如下内容：
      var addicon = this.getAttribute(source, "addicon"); //由xuStanly_cn增加于2006.4.30
      var delicon = this.getAttribute(source, "delicon"); //由xuStanly_cn增加于2006.4.30
      var ctrl = this.getAttribute(source, "ctrl"); //由xuStanly_cn增加于2006.5.4
      var ctrlClick = this.getAttribute(source, "ctrlClick"); //由xuStanly_cn增加于2006.5.4
      var ctrlName = this.getAttribute(source, "ctrlName"); //由xuStanly_cn增加于2006.5.4
      var ctrlType = this.getAttribute(source, "ctrlType"); //由xuStanly_cn增加于2006.8.4
      if (ctrlType == "") ctrlType = "checkbox"; //由xuStanly_cn增加于2006.8.4还是在上面那个function中,在"this.node[this.index] ="部分再添加如下内容
    "addicon" : addicon, //由xuStanly_cn增加于2006.4.30
    "delicon" : delicon, //由xuStanly_cn增加于2006.4.30
    "ctrl" : ctrl, //由XuStanly_cn增加于2006.5.4
    "ctrlClick" : ctrlClick, //由XuStanly_cn增加于2006.5.4
    "ctrlName" : ctrlName, //由XuStanly_cn增加于2006.5.4
    "ctrlType" : ctrlType //由XuStanly_cn增加于2006.8.4在"MzTreeView.prototype.nodeToHTML = function(node, AtEnd)"中把带注释的两行加上
    HTML += "<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>"+ node.addicon; //由xuStanly_cn增加于2006.4.30
      if(!node.hasChild) HTML += node.delicon //由xuStanly_cn增加于2006.4.30
      HTML +=  "</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;调用：
    <script>
    window.tree = new MzTreeView("tree");
    tree.setIconPath("../images/");
    tree.nodes["-1_1"] = "text:产品分类;"
    <%
    rs.open "select 分类ID,上级分类ID,分类名称 from product_catalog where 分类ID>1 order by 分类ID",conn
    Do while not rs.Eof
    response.write " tree.nodes[""" & rs(1) & "_" & rs(0) & """] = ""text:" & rs(2) & ";ctrl:true;ctrlName:pc;""" & VBCrLf
    rs.movenext
    Loop
    %>
    tree.wordLine = false;
    </script>
    ctrl：是否显示控件；
    ctrlName：控件的name属性；
    ctrlType：默认为checkbox，可以指定为radio。
    以上生成带checkbox的梅花雪树。应该可以，有一段时间了，有些地方是不是改了不太记得，有问题发消息给我。
      

  3.   

    上面最后一个要改的地方有误，应为如下：
    在"MzTreeView.prototype.nodeToHTML = function(node, AtEnd)"中将HTML变量的赋值过程改成如下：
    HTML += "<IMG "+
        "align='absMiddle' "+
        "id='"+ this.name +"_icon_"+ id +"' "+
        "src='"+ this.icons[node.icon].src +"'>";
      if(node.ctrl) HTML += "<input type='"+ node.ctrlType +"' name='"+ node.ctrlName +"' value="+ dataId[1] +" onclick='"+ node.ctrlClick +"'>" //由xuStanly_cn增加于2006.5.4
      HTML += "<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>"+ node.addicon; //由xuStanly_cn增加于2006.4.30
      if(!node.hasChild) HTML += node.delicon //由xuStanly_cn增加于2006.4.30
      HTML +=  "</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;
      

  4.   

    xuStanly(黑金) 的好象不行 报错 dataId[1] 不存在
      

  5.   

    能给我发个2.0的树吗？[email protected] 小弟不胜感激