aCollapTable.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /*
  2. * jQuery Alvaro's Collaptable 1.0.2
  3. *
  4. * Copyright (c) 2010 Alvaro Véliz Marín - yo@alvaroveliz.cl
  5. *
  6. * Licensed under the MIT license:
  7. * http://www.opensource.org/licenses/mit-license.php
  8. *
  9. * More info in http://github.com/alvaroveliz/aCollapTable
  10. */
  11. (function($){
  12. $.fn.extend({
  13. aCollapTable: function(options) {
  14. var defaults = {
  15. startCollapsed : true,
  16. addColumn: true,
  17. plusButton: '+',
  18. minusButton: '-'
  19. };
  20. var options = $.extend(defaults, options);
  21. var self = this;
  22. var parents = [];
  23. var _collaptable = function($element, $parent, $display)
  24. {
  25. parent = (typeof($parent) == 'undefined') ? $element.parents('tr').data('id') : $parent;
  26. display = (typeof($display) == 'undefined') ? ( ($element.hasClass('act-expanded')) ? 'none' : 'table-row' ) : $display;
  27. table = self;
  28. $('tr[data-parent='+parent+']', table).each(function(key, item){
  29. $(item).css('display', display);
  30. if ($(item).hasClass('act-tr-expanded')) {
  31. _collaptable($element, $(item).data('id'), display);
  32. }
  33. });
  34. spacer = _getSpacer($element.parents('tr'));
  35. if (display == 'none') {
  36. $element.html(spacer + options.plusButton).removeClass('act-expanded').addClass('act-collapsed');
  37. $element.parents('tr').addClass('act-tr-collapsed').removeClass('act-tr-expanded');
  38. }
  39. else {
  40. $element.html(spacer + options.minusButton).removeClass('act-collapsed').addClass('act-expanded');
  41. $element.parents('tr').addClass('act-tr-expanded').removeClass('act-tr-collapsed');
  42. }
  43. };
  44. var _levelsAndParents = function(obj)
  45. {
  46. $('tr', obj).each(function(k, item){
  47. if ($(item).data('id')) {
  48. parent = { id : $(item).data('id'), parent : $(item).data('parent') };
  49. parents.push(parent);
  50. }
  51. });
  52. $('tr', obj).each(function(k, item){
  53. if ($(item).data('id')) {
  54. level = _getLevel($(item));
  55. $(item).attr('data-level', level);
  56. }
  57. });
  58. };
  59. var _getLevel = function($item, $level)
  60. {
  61. $level = (typeof($level) == 'undefined') ? 0 : $level;
  62. if ( $item.data('parent') == '' ) {
  63. return $level;
  64. }
  65. else {
  66. $parent = $('tr[data-id='+$item.data('parent')+']');
  67. return _getLevel($parent, $level+1);
  68. }
  69. };
  70. var _getSpacer = function($item)
  71. {
  72. spacer = '';
  73. for (i = 0; i < $item.data('level') ; i++) {
  74. spacer += '&nbsp;&nbsp;';
  75. }
  76. return spacer;
  77. };
  78. var _bindButtons = function()
  79. {
  80. $(document).on('click', '.act-button-expand', function(){
  81. if ( $('tr', self).length > 0 ) {
  82. expands = [];
  83. $('tr', self).each(function(k, item){
  84. if ($(item).hasClass('act-tr-collapsed') && $(item).css('display') != 'none') {
  85. expands.push($(item));
  86. }
  87. });
  88. $.each(expands, function(k, $item){
  89. _collaptable($('.act-more', $item));
  90. });
  91. }
  92. });
  93. $(document).on('click', '.act-button-collapse', function(){
  94. if ( $('tr', self).length > 0 ) {
  95. }
  96. });
  97. $(document).on('click', '.act-button-expand-all', function(){
  98. if ( $('tr', self).length > 0 ) {
  99. collapseds = [];
  100. $('tr', self).each(function(k, item){
  101. if ($(item).hasClass('act-tr-collapsed')) {
  102. _collaptable($('.act-more', $(item)));
  103. }
  104. });
  105. }
  106. });
  107. $(document).on('click', '.act-button-collapse-all', function(){
  108. if ( $('tr', self).length > 0 ) {
  109. collapseds = [];
  110. $('tr', self).each(function(k, item){
  111. if ($(item).hasClass('act-tr-expanded')) {
  112. _collaptable($('.act-more', $(item)));
  113. }
  114. });
  115. }
  116. });
  117. }
  118. return this.each(function() {
  119. var o = options;
  120. var obj = $(this);
  121. _levelsAndParents(obj);
  122. _bindButtons();
  123. // adding minus
  124. if ( $('tr', obj).length > 0) {
  125. $('tr', obj).each(function(k, item){
  126. spacer = _getSpacer($(item));
  127. $minus = $('<a />').attr('href', 'javascript:void(0)')
  128. .addClass('act-more act-expanded')
  129. .html(spacer + o.minusButton)
  130. .bind('click', function(){
  131. _collaptable($(this));
  132. })
  133. ;
  134. if ($('tr[data-parent='+$(item).data('id')+']').length > 0) {
  135. $button = (o.addColumn == true) ? $('<td />').html($minus) : $minus;
  136. itemClass = (o.startCollapsed) ? 'act-tr-collapsed' : 'act-tr-expanded';
  137. $(item).addClass(itemClass);
  138. }
  139. else {
  140. $button = (o.addColumn == true) ? $('<td />').html(spacer+'&nbsp;&nbsp;') : spacer+'&nbsp;&nbsp;';
  141. }
  142. if (o.addColumn == true) {
  143. $(item).prepend($button);
  144. }
  145. else {
  146. $(item).children(':first').prepend($button);
  147. }
  148. // level class
  149. $(item).addClass('act-tr-level-'+$(item).data('level'));
  150. });
  151. // start collapsed
  152. if (o.startCollapsed) {
  153. $('.act-more').each(function(k, item){
  154. $(item).click();
  155. });
  156. }
  157. }
  158. });
  159. }
  160. });
  161. })(jQuery);