bootstrap-table-sticky-header.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define([], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory();
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory();
  11. global.bootstrapTableStickyHeader = mod.exports;
  12. }
  13. })(this, function () {
  14. 'use strict';
  15. function _classCallCheck(instance, Constructor) {
  16. if (!(instance instanceof Constructor)) {
  17. throw new TypeError("Cannot call a class as a function");
  18. }
  19. }
  20. var _createClass = function () {
  21. function defineProperties(target, props) {
  22. for (var i = 0; i < props.length; i++) {
  23. var descriptor = props[i];
  24. descriptor.enumerable = descriptor.enumerable || false;
  25. descriptor.configurable = true;
  26. if ("value" in descriptor) descriptor.writable = true;
  27. Object.defineProperty(target, descriptor.key, descriptor);
  28. }
  29. }
  30. return function (Constructor, protoProps, staticProps) {
  31. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  32. if (staticProps) defineProperties(Constructor, staticProps);
  33. return Constructor;
  34. };
  35. }();
  36. function _possibleConstructorReturn(self, call) {
  37. if (!self) {
  38. throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  39. }
  40. return call && (typeof call === "object" || typeof call === "function") ? call : self;
  41. }
  42. var _get = function get(object, property, receiver) {
  43. if (object === null) object = Function.prototype;
  44. var desc = Object.getOwnPropertyDescriptor(object, property);
  45. if (desc === undefined) {
  46. var parent = Object.getPrototypeOf(object);
  47. if (parent === null) {
  48. return undefined;
  49. } else {
  50. return get(parent, property, receiver);
  51. }
  52. } else if ("value" in desc) {
  53. return desc.value;
  54. } else {
  55. var getter = desc.get;
  56. if (getter === undefined) {
  57. return undefined;
  58. }
  59. return getter.call(receiver);
  60. }
  61. };
  62. function _inherits(subClass, superClass) {
  63. if (typeof superClass !== "function" && superClass !== null) {
  64. throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  65. }
  66. subClass.prototype = Object.create(superClass && superClass.prototype, {
  67. constructor: {
  68. value: subClass,
  69. enumerable: false,
  70. writable: true,
  71. configurable: true
  72. }
  73. });
  74. if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  75. }
  76. /**
  77. * @author vincent loh <vincent.ml@gmail.com>
  78. * @update J Manuel Corona <jmcg92@gmail.com>
  79. * @update zhixin wen <wenzhixin2010@gmail.com>
  80. */
  81. (function ($) {
  82. var Utils = $.fn.bootstrapTable.utils;
  83. $.extend($.fn.bootstrapTable.defaults, {
  84. stickyHeader: false,
  85. stickyHeaderOffsetY: 0
  86. });
  87. var hiddenClass = Utils.bootstrapVersion === 4 ? 'd-none' : 'hidden';
  88. $.BootstrapTable = function (_$$BootstrapTable) {
  89. _inherits(_class, _$$BootstrapTable);
  90. function _class() {
  91. _classCallCheck(this, _class);
  92. return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
  93. }
  94. _createClass(_class, [{
  95. key: 'initHeader',
  96. value: function initHeader() {
  97. var _get2,
  98. _this2 = this;
  99. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  100. args[_key] = arguments[_key];
  101. }
  102. (_get2 = _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'initHeader', this)).call.apply(_get2, [this].concat(args));
  103. if (!this.options.stickyHeader) {
  104. return;
  105. }
  106. this.$el.before('<div class="sticky-header-container"></div>');
  107. this.$el.before('<div class="sticky_anchor_begin"></div>');
  108. this.$el.after('<div class="sticky_anchor_end"></div>');
  109. this.$header.addClass('sticky-header');
  110. // clone header just once, to be used as sticky header
  111. // deep clone header, using source header affects tbody>td width
  112. this.$stickyContainer = this.$tableBody.find('.sticky-header-container');
  113. this.$stickyBegin = this.$tableBody.find('.sticky_anchor_begin');
  114. this.$stickyEnd = this.$tableBody.find('.sticky_anchor_end');
  115. this.$stickyHeader = this.$header.clone(true, true);
  116. // render sticky on window scroll or resize
  117. $(window).on('resize.sticky-header-table', function () {
  118. return _this2.renderStickyHeader();
  119. });
  120. $(window).on('scroll.sticky-header-table', function () {
  121. return _this2.renderStickyHeader();
  122. });
  123. this.$tableBody.off('scroll').on('scroll', function () {
  124. return _this2.matchPositionX();
  125. });
  126. }
  127. }, {
  128. key: 'renderStickyHeader',
  129. value: function renderStickyHeader() {
  130. var _this3 = this;
  131. var top = $(window).scrollTop();
  132. // top anchor scroll position, minus header height
  133. var start = this.$stickyBegin.offset().top - this.options.stickyHeaderOffsetY;
  134. // bottom anchor scroll position, minus header height, minus sticky height
  135. var end = this.$stickyEnd.offset().top - this.options.stickyHeaderOffsetY - this.$header.height();
  136. // show sticky when top anchor touches header, and when bottom anchor not exceeded
  137. if (top > start && top <= end) {
  138. // ensure clone and source column widths are the same
  139. this.$stickyHeader.find('tr:eq(0)').find('th').each(function (index, el) {
  140. $(el).css('min-width', _this3.$header.find('tr:eq(0)').find('th').eq(index).css('width'));
  141. });
  142. // match bootstrap table style
  143. this.$stickyContainer.removeClass(hiddenClass).addClass('fix-sticky fixed-table-container');
  144. // stick it in position
  145. this.$stickyContainer.css('top', this.options.stickyHeaderOffsetY + 'px');
  146. // create scrollable container for header
  147. this.$stickyTable = $('<table/>');
  148. this.$stickyTable.addClass(this.options.classes);
  149. // append cloned header to dom
  150. this.$stickyContainer.html(this.$stickyTable.append(this.$stickyHeader));
  151. // match clone and source header positions when left-right scroll
  152. this.matchPositionX();
  153. } else {
  154. this.$stickyContainer.removeClass('fix-sticky').addClass(hiddenClass);
  155. }
  156. }
  157. }, {
  158. key: 'matchPositionX',
  159. value: function matchPositionX() {
  160. this.$stickyContainer.scrollLeft(this.$tableBody.scrollLeft());
  161. }
  162. }]);
  163. return _class;
  164. }($.BootstrapTable);
  165. })(jQuery);
  166. });