请教JS高手

你用的是dtree吧！
如果太多的话建议你不要用它找其他的异步再入的XML的树

我用的正是dtree,这个界面很不错,能否在不换的情况下优化呀,如果非得换,请各位推荐一下界面类似效率高一点的树。

用profile工具检查出哪段代码是执行时间最长的，然后优化之。seamonkey浏览器有profile功能。

里面就两段js运行比较长dTree.prototype.node = function(node, nodeId)
dTree.prototype.indent = function(node, nodeId)
我也遇到这样的问题不过没有解决

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;
}

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>

谢谢wuxinlangman,难道就只有换树吗,有谁优化过Dtree代码呀,帮兄弟一把呀!

是呀,我自已也觉得很奇怪,象tree.add("113","11","A-4","/.jsp","","mainFrame");这样循环动态加入也才1200来行,怎么到document.write(tree);的时候就会提示:该页上的脚本造成internet explorer运行速度减慢.如果继续运行,您的计算机将变得更慢.是否取消该脚本? 是否,但选否后又能成功开树,总的开树时间也不过几秒钟,就是不明白为什么就是有这个提示!

这种 add() 的做法在节点比较多的时候效率是很差的，你别看它只是一个 add 操作，其实它还有把数据转换成节点对象和维护节点对象之间的树关系等一系列操作，这种操作在量少的时候没有太大影响，但量一多之后，效率就变得很差，同样这样的做法，阿信是在此基础之上做了优化，因此阿信的树可以支撑到五千节点，我用另外一套模式，http://www.meizz.com/web/demo/treeview/50000.htm 这是五万节点的树，你测试一下看看速度如何？

老大,你帮我看一下那个Dtree.js有没有优化的可能呀!

当第一次加载时,您可以先只显示顶极目录.当用户点击某个节点时,再用Ajax加载其下一极目录

这是我开树时的源码,我如果去掉最后显示的那一句document.write(d);IE没有提示报错,这说明前面的add操作没有报错,怎么会再最后document.write(d);才出现提示.搞不懂!
<script type="text/javascript">

</script>

dtree我用过！这个东西是不能解决的
赞是不可以除非你该两把它改成异步载入
那样的话还不如再寻找一个或是再网络搜索一个
梅雪花老大的树就不错你去看看！
你也可以加28878407到里面去讨论
如果你要是解决了麻烦你告诉我一下！

解决方案 »