[Summary view] [Print] [Text view]

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