TreeNode.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. var currentNode = null;
  2. function TreeNode(text, url, iconOpen, iconOpenHover, iconClosed, iconClosedHover) {
  3. var $ = this;
  4. this.level = 0;
  5. this.children = [];
  6. this.parent = null;
  7. this.status = "CLOSED";
  8. this.ancestor = [];
  9. this.isHover = false;
  10. this.PATH = "/image/admin/tree/";
  11. this.COLLAPSED = this.PATH + "arrow_collapsed.gif";
  12. this.EXPANDED = this.PATH + "arrow_expanded.gif";
  13. this.COLLAPSED_HOVER = this.PATH + "arrow_collapsed_hover.gif";
  14. this.EXPANDED_HOVER = this.PATH + "arrow_expanded_hover.gif";
  15. this.CATEGORYOPEN = this.PATH + (iconOpen ? iconOpen : "folder_open.gif");
  16. this.CATEGORYOPEN_HOVER = this.CATEGORYOPEN;
  17. this.CATEGORYCLOSED = this.PATH + (iconClosed ? iconClosed : "folder_closed.gif");
  18. this.CATEGORYCLOSED_HOVER = this.CATEGORYCLOSED;
  19. this.EMPTY = this.PATH + "empty.gif";
  20. this.container = document.createElement("DIV");
  21. this.content = document.createElement("DIV");
  22. this.indentSpace = document.createElement("SPAN");
  23. this.statusIcon = document.createElement("IMG");
  24. this.node = document.createElement("SPAN");
  25. this.nodeIcon = document.createElement("IMG");
  26. this.label = document.createElement("A");
  27. this.container.appendChild(this.content);
  28. this.content.appendChild(this.indentSpace);
  29. this.content.appendChild(this.statusIcon);
  30. this.content.appendChild(this.node);
  31. this.node.appendChild(this.nodeIcon);
  32. this.node.appendChild(this.label);
  33. this.container.style.display = "block";
  34. this.statusIcon.src = this.COLLAPSED;
  35. this.nodeIcon.src = this.CATEGORYCLOSED;
  36. this.nodeIcon.align = "absmiddle";
  37. this.statusIcon.align = "absmiddle";
  38. this.statusIcon.style.cursor = "default";
  39. this.node.style.cursor = "default";
  40. this.label.style.lineHeight = "20px";
  41. this.label.style.fontSize = "12px";
  42. this.label.style.display = "inline-block";
  43. this.label.style.backgroundImage = "url(" + this.BG + ")";
  44. this.label.style.backgroundRepeat = "repeat-x";
  45. this.label.innerHTML = text;
  46. if (url) {
  47. this.label.href = url;
  48. this.label.target = "mainFrame";
  49. }
  50. this.add = function(child) {
  51. this.container.appendChild(child.container);
  52. this.children.push(child);
  53. child.parent = this;
  54. }
  55. this.remove = function(child) {
  56. child.container.removeNode(true);
  57. var temp = [];
  58. for (var i = 0; i < this.children.length; i++) {
  59. if (this.children[i] != child) {
  60. temp.push(this.children[i]);
  61. } else {
  62. continue;
  63. }
  64. }
  65. this.children = temp;
  66. }
  67. this.hidden = function() {
  68. this.container.style.display = "none";
  69. }
  70. this.show = function() {
  71. this.container.style.display = "block";
  72. }
  73. this.getAncestor = function(level) {
  74. if (this.level == level)
  75. return this;
  76. for (var i = 0; i < $.ancestor.length; i++) {
  77. if ($.ancestor[i].level == level) {
  78. return $.ancestor[i];
  79. }
  80. }
  81. return null;
  82. }
  83. this.contains = function(node) {
  84. for (var i = 0; i < $.children.length; i++) {
  85. if ($.children[i] == node) {
  86. return true;
  87. }
  88. $.children[i].contains(node);
  89. }
  90. return false;
  91. }
  92. this.indent = function() {
  93. this.indentSpace.innerHTML = "";
  94. for (var i = 0; i < this.level; i++) {
  95. var indentImg = document.createElement("IMG");
  96. indentImg.src = this.EMPTY;
  97. indentImg.align = "absmiddle";
  98. this.indentSpace.appendChild(indentImg);
  99. }
  100. this.collapse();
  101. }
  102. this.setIcon = function() {
  103. this.nodeIcon = this.status == "CLOSED" ?
  104. ($.isHover ? $.CATEGORYCLOSED_HOVER : $.CATEGORYCLOSED) :
  105. ($.isHover ? $.CATEGORYOPEN_HOVER : $.CATEGORYOPEN);
  106. }
  107. this.collapse = function() {
  108. for (var i = 0; $.children && i < $.children.length; i++) {
  109. $.children[i].hidden();
  110. }
  111. $.statusIcon.src = $.COLLAPSED;
  112. $.nodeIcon.src = $.CATEGORYCLOSED;
  113. $.status = "CLOSED";
  114. }
  115. this.expand = function() {
  116. for (var i = 0; $.children && i < $.children.length; i++) {
  117. $.children[i].show();
  118. }
  119. $.statusIcon.src = $.EXPANDED;
  120. $.nodeIcon.src = $.CATEGORYOPEN;
  121. $.status = "OPEN";
  122. }
  123. this.expandOrCollapse = function() {
  124. if ($.status == "CLOSED") {
  125. if (currentNode) {
  126. var ancestor = currentNode.getAncestor(1);
  127. var myAncestor = $.getAncestor(1);
  128. if (ancestor && myAncestor && ancestor != myAncestor) {
  129. ancestor.collapse();
  130. }
  131. }
  132. currentNode = $;
  133. $.expand();
  134. } else {
  135. $.collapse();
  136. }
  137. }
  138. this.node.onmousedown = function() {
  139. if (currentNode) {
  140. currentNode.nodeIcon.src = (currentNode.status == "CLOSED" ? currentNode.CATEGORYCLOSED : currentNode.CATEGORYOPEN);
  141. }
  142. }
  143. this.node.onmouseup = function() {
  144. if (event.button == 2) {
  145. }
  146. }
  147. this.content.onselectstart = function() {
  148. return false;
  149. }
  150. this.statusIcon.onclick = this.expandOrCollapse;
  151. this.nodeIcon.ondblclick = this.expandOrCollapse;
  152. this.label.onclick = this.expandOrCollapse;
  153. this.statusIcon.onmouseover = function() {
  154. this.src = $.status == "CLOSED" ? $.COLLAPSED_HOVER : $.EXPANDED_HOVER;
  155. }
  156. this.statusIcon.onmouseout = function() {
  157. this.src = $.status == "CLOSED" ? $.COLLAPSED : $.EXPANDED;
  158. }
  159. }