diff --git a/js/jquery.treegrid.js b/js/jquery.treegrid.js index f605f13..ad5efb6 100644 --- a/js/jquery.treegrid.js +++ b/js/jquery.treegrid.js @@ -117,7 +117,7 @@ if (expander) { expander.remove(); } - $(tpl).prependTo(cell).click(function() { + $(tpl).prependTo(cell).addClass($this.treegrid('getSetting', 'expanderLeafClass')).click(function() { $($(this).closest('tr')).treegrid('toggle'); }); return $this; @@ -513,11 +513,21 @@ render: function() { return $(this).each(function() { var $this = $(this); + var anim = ($this.treegrid('getSetting', 'animate') === true); + // If we want to be able have our rows slide, we need to wrap all cell contents in a new DIV + if (anim && !$this.data('tree-grid-init-done')) { + $this.find('td').wrapInner('
'); + $this.data('tree-grid-init-done', 1); + } //if parent colapsed we hidden if ($this.treegrid('isOneOfParentsCollapsed')) { - $this.hide(); + if (anim) $this.find('div.tree-grid-anim').slideUp(400, function() { + $this.hide(); + }); + else $this.hide(); } else { $this.show(); + if (anim) $this.find('div.tree-grid-anim').slideDown(); } if (!$this.treegrid('isLeaf')) { $this.treegrid('renderExpander'); @@ -535,7 +545,7 @@ var $this = $(this); var expander = $this.treegrid('getSetting', 'getExpander').apply(this); if (expander) { - + expander.removeClass($this.treegrid('getSetting', 'expanderLeafClass')); if (!$this.treegrid('isCollapsed')) { expander.removeClass($this.treegrid('getSetting', 'expanderCollapsedClass')); expander.addClass($this.treegrid('getSetting', 'expanderExpandedClass')); @@ -563,6 +573,7 @@ * Plugin's default options */ $.fn.treegrid.defaults = { + animate: false, initialState: 'expanded', saveState: false, saveStateMethod: 'cookie', @@ -571,6 +582,7 @@ indentTemplate: '', expanderExpandedClass: 'treegrid-expander-expanded', expanderCollapsedClass: 'treegrid-expander-collapsed', + expanderLeafClass: 'tree-grid-expander-leaf', treeColumn: 0, getExpander: function() { return $(this).find('.treegrid-expander');