bootstrap-table-sticky-header.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /**
  2. * @author vincent loh <vincent.ml@gmail.com>
  3. * @version: v1.0.0
  4. * https://github.com/vinzloh/bootstrap-table/
  5. * Sticky header for bootstrap-table
  6. */
  7. (function ($) {
  8. 'use strict';
  9. var sprintf = $.fn.bootstrapTable.utils.sprintf;
  10. $.extend($.fn.bootstrapTable.defaults, {
  11. stickyHeader: false
  12. });
  13. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  14. _initHeader = BootstrapTable.prototype.initHeader;
  15. BootstrapTable.prototype.initHeader = function () {
  16. var that = this;
  17. _initHeader.apply(this, Array.prototype.slice.apply(arguments));
  18. if (!this.options.stickyHeader) {
  19. return;
  20. }
  21. var table = this.$tableBody.find('table'),
  22. table_id = table.attr('id'),
  23. header_id = table.attr('id') + '-sticky-header',
  24. sticky_header_container_id = header_id +'-sticky-header-container',
  25. anchor_begin_id = header_id +'_sticky_anchor_begin',
  26. anchor_end_id = header_id +'_sticky_anchor_end';
  27. // add begin and end anchors to track table position
  28. table.before(sprintf('<div id="%s" class="hidden"></div>', sticky_header_container_id));
  29. table.before(sprintf('<div id="%s"></div>', anchor_begin_id));
  30. table.after(sprintf('<div id="%s"></div>', anchor_end_id));
  31. table.find('thead').attr('id', header_id);
  32. // clone header just once, to be used as sticky header
  33. // deep clone header. using source header affects tbody>td width
  34. this.$stickyHeader = $($('#'+header_id).clone(true, true));
  35. // avoid id conflict
  36. this.$stickyHeader.removeAttr('id');
  37. // render sticky on window scroll or resize
  38. $(window).on('resize.'+table_id, table, render_sticky_header);
  39. $(window).on('scroll.'+table_id, table, render_sticky_header);
  40. // render sticky when table scroll left-right
  41. table.closest('.fixed-table-container').find('.fixed-table-body').on('scroll.'+table_id, table, match_position_x);
  42. this.$el.on('all.bs.table', function (e) {
  43. that.$stickyHeader = $($('#'+header_id).clone(true, true));
  44. that.$stickyHeader.removeAttr('id');
  45. });
  46. function render_sticky_header(event) {
  47. var table = event.data;
  48. var table_header_id = table.find('thead').attr('id');
  49. // console.log('render_sticky_header for > '+table_header_id);
  50. if (table.length < 1 || $('#'+table_id).length < 1){
  51. // turn off window listeners
  52. $(window).off('resize.'+table_id);
  53. $(window).off('scroll.'+table_id);
  54. table.closest('.fixed-table-container').find('.fixed-table-body').off('scroll.'+table_id);
  55. return;
  56. }
  57. // get header height
  58. var header_height = '0';
  59. if (that.options.stickyHeaderOffsetY) header_height = that.options.stickyHeaderOffsetY.replace('px','');
  60. // window scroll top
  61. var t = $(window).scrollTop();
  62. // top anchor scroll position, minus header height
  63. var e = $("#"+anchor_begin_id).offset().top - header_height;
  64. // bottom anchor scroll position, minus header height, minus sticky height
  65. var e_end = $("#"+anchor_end_id).offset().top - header_height - $('#'+table_header_id).css('height').replace('px','');
  66. // show sticky when top anchor touches header, and when bottom anchor not exceeded
  67. if (t > e && t <= e_end) {
  68. // ensure clone and source column widths are the same
  69. $.each( that.$stickyHeader.find('tr').eq(0).find('th'), function (index, item) {
  70. $(item).css('min-width', $('#'+table_header_id+' tr').eq(0).find('th').eq(index).css('width'));
  71. });
  72. // match bootstrap table style
  73. $("#"+sticky_header_container_id).removeClass('hidden').addClass("fix-sticky fixed-table-container") ;
  74. // stick it in position
  75. $("#"+sticky_header_container_id).css('top', header_height + 'px');
  76. // create scrollable container for header
  77. var scrollable_div = $('<div style="position:absolute;width:100%;overflow-x:hidden;" />');
  78. // append cloned header to dom
  79. $("#"+sticky_header_container_id).html(scrollable_div.append(that.$stickyHeader));
  80. // match clone and source header positions when left-right scroll
  81. match_position_x(event);
  82. } else {
  83. // hide sticky
  84. $("#"+sticky_header_container_id).removeClass("fix-sticky").addClass('hidden');
  85. }
  86. }
  87. function match_position_x(event){
  88. var table = event.data;
  89. var table_header_id = table.find('thead').attr('id');
  90. // match clone and source header positions when left-right scroll
  91. $("#"+sticky_header_container_id).css(
  92. 'width', +table.closest('.fixed-table-body').css('width').replace('px', '') + 1
  93. );
  94. $("#"+sticky_header_container_id+" thead").parent().scrollLeft(Math.abs($('#'+table_header_id).position().left));
  95. }
  96. };
  97. })(jQuery);