jquery.treeTable.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. /*
  2. * jQuery treeTable Plugin 2.3.0
  3. * http://ludo.cubicphuse.nl/jquery-plugins/treeTable/
  4. *
  5. * Copyright 2010, Ludo van den Boom
  6. * Dual licensed under the MIT or GPL Version 2 licenses.
  7. */
  8. (function($) {
  9. // Helps to make options available to all functions
  10. // TODO: This gives problems when there are both expandable and non-expandable
  11. // trees on a page. The options shouldn't be global to all these instances!
  12. var options;
  13. var defaultPaddingLeft;
  14. $.fn.treeTable = function(opts) {
  15. options = $.extend({}, $.fn.treeTable.defaults, opts);
  16. return this.each(function() {
  17. $(this).addClass("treeTable").find("tbody tr").each(function() {
  18. // Initialize root nodes only if possible
  19. if(!options.expandable || $(this)[0].className.search(options.childPrefix) == -1) {
  20. // To optimize performance of indentation, I retrieve the padding-left
  21. // value of the first root node. This way I only have to call +css+
  22. // once.
  23. if (isNaN(defaultPaddingLeft)) {
  24. defaultPaddingLeft = parseInt($($(this).children("td")[options.treeColumn]).css('padding-left'), 10);
  25. }
  26. initialize($(this));
  27. } else if(options.initialState == "collapsed") {
  28. this.style.display = "none"; // Performance! $(this).hide() is slow...
  29. }
  30. });
  31. });
  32. };
  33. $.fn.treeTable.defaults = {
  34. childPrefix: "child-of-",
  35. clickableNodeNames: false,
  36. expandable: true,
  37. indent: 19,
  38. initialState: "collapsed",
  39. treeColumn: 0
  40. };
  41. // Recursively hide all node's children in a tree
  42. $.fn.collapse = function() {
  43. $(this).addClass("collapsed");
  44. childrenOf($(this)).each(function() {
  45. if(!$(this).hasClass("collapsed")) {
  46. $(this).collapse();
  47. }
  48. this.style.display = "none"; // Performance! $(this).hide() is slow...
  49. });
  50. return this;
  51. };
  52. // Recursively show all node's children in a tree
  53. $.fn.expand = function() {
  54. $(this).removeClass("collapsed").addClass("expanded");
  55. childrenOf($(this)).each(function() {
  56. initialize($(this));
  57. if($(this).is(".expanded.parent")) {
  58. $(this).expand();
  59. }
  60. // this.style.display = "table-row"; // Unfortunately this is not possible with IE :-(
  61. $(this).show();
  62. });
  63. return this;
  64. };
  65. // Reveal a node by expanding all ancestors
  66. $.fn.reveal = function() {
  67. $(ancestorsOf($(this)).reverse()).each(function() {
  68. initialize($(this));
  69. $(this).expand().show();
  70. });
  71. return this;
  72. };
  73. // Add an entire branch to +destination+
  74. $.fn.appendBranchTo = function(destination) {
  75. var node = $(this);
  76. var parent = parentOf(node);
  77. var ancestorNames = $.map(ancestorsOf($(destination)), function(a) { return a.id; });
  78. // Conditions:
  79. // 1: +node+ should not be inserted in a location in a branch if this would
  80. // result in +node+ being an ancestor of itself.
  81. // 2: +node+ should not have a parent OR the destination should not be the
  82. // same as +node+'s current parent (this last condition prevents +node+
  83. // from being moved to the same location where it already is).
  84. // 3: +node+ should not be inserted as a child of +node+ itself.
  85. if($.inArray(node[0].id, ancestorNames) == -1 && (!parent || (destination.id != parent[0].id)) && destination.id != node[0].id) {
  86. indent(node, ancestorsOf(node).length * options.indent * -1); // Remove indentation
  87. if(parent) { node.removeClass(options.childPrefix + parent[0].id); }
  88. node.addClass(options.childPrefix + destination.id);
  89. move(node, destination); // Recursively move nodes to new location
  90. indent(node, ancestorsOf(node).length * options.indent);
  91. }
  92. return this;
  93. };
  94. // Add reverse() function from JS Arrays
  95. $.fn.reverse = function() {
  96. return this.pushStack(this.get().reverse(), arguments);
  97. };
  98. // Toggle an entire branch
  99. $.fn.toggleBranch = function() {
  100. if($(this).hasClass("collapsed")) {
  101. $(this).expand();
  102. } else {
  103. $(this).removeClass("expanded").collapse();
  104. }
  105. return this;
  106. };
  107. // === Private functions
  108. function ancestorsOf(node) {
  109. var ancestors = [];
  110. while(node = parentOf(node)) {
  111. ancestors[ancestors.length] = node[0];
  112. }
  113. return ancestors;
  114. };
  115. function childrenOf(node) {
  116. return $(node).siblings("tr." + options.childPrefix + node[0].id);
  117. };
  118. function getPaddingLeft(node) {
  119. var paddingLeft = parseInt(node[0].style.paddingLeft, 10);
  120. return (isNaN(paddingLeft)) ? defaultPaddingLeft : paddingLeft;
  121. }
  122. function indent(node, value) {
  123. var cell = $(node.children("td")[options.treeColumn]);
  124. cell[0].style.paddingLeft = getPaddingLeft(cell) + value + "px";
  125. childrenOf(node).each(function() {
  126. indent($(this), value);
  127. });
  128. };
  129. function initialize(node) {
  130. if(!node.hasClass("initialized")) {
  131. node.addClass("initialized");
  132. var childNodes = childrenOf(node);
  133. if(!node.hasClass("parent") && childNodes.length > 0) {
  134. node.addClass("parent");
  135. }
  136. if(node.hasClass("parent")) {
  137. var cell = $(node.children("td")[options.treeColumn]);
  138. var padding = getPaddingLeft(cell) + options.indent;
  139. childNodes.each(function() {
  140. $(this).children("td")[options.treeColumn].style.paddingLeft = padding + "px";
  141. });
  142. if(options.expandable) {
  143. cell.prepend('<span style="margin-left: -' + options.indent + 'px; padding-left: ' + options.indent + 'px" class="expander"></span>');
  144. $(cell[0].firstChild).click(function() { node.toggleBranch(); });
  145. if(options.clickableNodeNames) {
  146. cell[0].style.cursor = "pointer";
  147. $(cell).click(function(e) {
  148. // Don't double-toggle if the click is on the existing expander icon
  149. if (e.target.className != 'expander') {
  150. node.toggleBranch();
  151. }
  152. });
  153. }
  154. // Check for a class set explicitly by the user, otherwise set the default class
  155. if(!(node.hasClass("expanded") || node.hasClass("collapsed"))) {
  156. node.addClass(options.initialState);
  157. }
  158. if(node.hasClass("expanded")) {
  159. node.expand();
  160. }
  161. }
  162. }
  163. }
  164. };
  165. function move(node, destination) {
  166. node.insertAfter(destination);
  167. childrenOf(node).reverse().each(function() { move($(this), node[0]); });
  168. };
  169. function parentOf(node) {
  170. var classNames = node[0].className.split(' ');
  171. for(key in classNames) {
  172. if(classNames[key].match(options.childPrefix)) {
  173. return $(node).siblings("#" + classNames[key].substring(options.childPrefix.length));
  174. }
  175. }
  176. };
  177. })(jQuery);