[Summary view] [Print] [Text view]

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