2004年时候写的，javascript出来的时间不久，没那么多框架和现成的模板，当时比较流行树形目录展现层级数据，但那棵目录树有几万个节点，而且层级不是固定的，并且要求点击叶子节点选中所有直接父节点，点击父节点选中所有子节点，当时完全基于javascript写的，每次点击节点进行遍历，响应一下需要1分钟，客户无法忍受要求优化。

曾经写过javaservlet代码，但服务端和客户端通信有问题，后来再次重新改写，在JSP服务端输出树形目录树，在js端进行响应优化，采用的是递归算法，花了三天时间研究节点和节点的HTML标签关系，最后写出来了，基本秒计响应，可以说超过了预期值。

十年以后申请专利，结果经过漫长的等待，被驳回来了。

仅此怀念过去的代码时光！


唉，很久以前写的代码，晒一晒，估计自己看都看不懂了，:(

代码示例

  1. var head = "display:''"

  2. img_close=new Image()

  3. img_close.src="/sysManage/images/f.gif"

  4. img_open=new Image()

  5. img_open.src="/sysManage/images/fo.gif"

  6. img3=new Image()

  7. img3.src="/sysManage/images/e.gif";


  9. var elment = img_close.src


  11. function onMouseDown()

  12. {

  13. if(!document.all)return

  14. var eventObj = event.srcElement;

  15. if(eventObj.tagName=="IMG" )

  16. {

  17. //判断是否存在子节点

  18. var sSrc = eventObj.src ;

  19. if(sSrc == null || sSrc.length<=0)return;

  20. if(sSrc.indexOf("e.gif") >= 0)return;


  22. if(sSrc.indexOf("f")<0 && sSrc.indexOf("tree-site")<0 )return;


  24. var nOffIndex = 2;

  25. var srcIndex = eventObj.sourceIndex;

  26. var nested = document.all[srcIndex + nOffIndex];

  27. if(nested.tagName!="DL")

  28. {

  29. nested = document.all[srcIndex + 1];

  30. }


  32. if (nested.style.display=="none")

  33. {

  34. nested.style.display='inline';

  35. if(sSrc.indexOf("f.gif")>0)

  36. eventObj.src = img_open.src;

  37. }

  38. else

  39. {

  40. nested.style.display="none";

  41. if(sSrc.indexOf("fo.gif")>0)

  42. eventObj.src = img_close.src;

  43. }

  44. }

  45. else if(eventObj.tagName == "A" )

  46. {//相应节点的点击

  47. var nChnlId = parseInt(eventObj.name);

  48. if(!isNaN(nChnlId))

  49. {

  50. onClickChannel(nChnlId);

  51. }

  52. }

  53. }

  54. /** 选中某个节点下的所有子节点(主要用于权限树的选择).

  55. * @param obj 节点选择框对象(checkbox对象)

  56. *根据所选节点的值，遍历整个树，从而选中满足条件的节点.

  57. */


  59. function checkNode(obj)

  60. {

  61. var elm = obj.parentNode;

  62. checkChildrenRecurve(elm);

  63. }


  65. function checkChildrenRecurve(elm)

  66. {

  67. var dd = elm;

  68. var dl = dd.lastChild;

  69. if (dl.tagName != "DL") return;

  70. var ddlist = dl.children;

  71. for (var i=0;i<ddlist.length;i++)

  72. {

  73. ddlist[i].firstChild.checked=elm.firstChild.checked;

  74. checkChildrenRecurve(ddlist[i].firstChild.parentNode)

  75. }

  76. }


  78. function checkRootRecurve(dl)

  79. {

  80. if (dl.tagName != "DD")

  81. {

  82. dl.parentNode.firstChild.firstChild.allChecked = dl.parentNode.firstChild.firstChild.checked;

  83. dl.parentNode.firstChild.firstChild.allUnChecked = !dl.parentNode.firstChild.firstChild.checked;

  84. return;

  85. }

  86. var lis = dl.children;

  87. var allChecked = true;

  88. var allUnChecked = true;

  89. for (var i=0;i<lis.length;i++)

  90. {

  91. checkRootRecurve(lis[i].lastChild);

  92. allChecked = allChecked && lis[i].firstChild.firstChild.checked && lis[i].firstChild.firstChild.allChecked;

  93. allUnChecked = allUnChecked && !lis[i].firstChild.firstChild.checked && lis[i].firstChild.firstChild.allUnChecked;

  94. }

  95. dl.parentNode.firstChild.firstChild.allChecked=allChecked;

  96. dl.parentNode.firstChild.firstChild.allUnChecked=allUnChecked;

  97. if (allChecked || allUnChecked)

  98. {

  99. dl.parentNode.firstChild.firstChild.checked=allChecked;

  100. dl.parentNode.firstChild.firstChild.disabled=false;

  101. dl.parentNode.firstChild.childStatus=false;

  102. }

  103. else

  104. {

  105. dl.parentNode.firstChild.firstChild.disabled=true;

  106. dl.parentNode.firstChild.childStatus=true;

  107. dl.parentNode.firstChild.firstChild.checked=true;

  108. }

  109. }


  111. document.οnclick=onMouseDown


  113. /**

  114. *如果所有子节点都被选中，然么父节点也要选中

  115. *output:无

  116. */

  117. function selParentNode(nodeIDStr,spltStr)

  118. {

  119. var nodeLen=nodeIDStr.length;

  120. var nodeList;


  122. if(nodeLen<1){

  123. return;

  124. }


  126. nodeIDList = nodeIDStr.split(spltStr);

  127. for (j=0;j<nodeIDList.length;j++)

  128. {

  129. if(checkSubNode(nodeIDList[j]))

  130. {

  131. for (var k=0;k<form1.chkID.length;k++)

  132. {

  133. if(form1.chkID[k].value == nodeIDList[j] )

  134. {

  135. form1.chkID[k].checked = true;

  136. break;

  137. }

  138. }

  139. }

  140. }

  141. }



  144. /**

  145. * 判断某个节点值下的所有子节点是否被选中(主要用于权限树的选择).

  146. * curNodeID 某个节点的值

  147. *output:true 或 false

  148. **/

  149. function checkSubNode(curNodeID)

  150. {

  151. for (var i=0;i<form1.chkID.length;i++)

  152. {

  153. if (form1.chkID[i].value.substring(0,curNodeID.length) == curNodeID && form1.chkID[i].value.length >= (curNodeID.length +2) )

  154. {

  155. if(!form1.chkID[i].checked )

  156. {

  157. return false;

  158. }

  159. }

  160. }

  161. return true;

  162. }


关于树形目录的一段javascript代码_i++