Merge pull request #4899 from wenzhixin/feature/fixed-columns-sticky-header

Added support for sticky-header

site/docs/extensions/fixed-columns.md

@@ -55,5 +55,13 @@ toc: true
 
 ## Note
 
-* This extension does not support `detailView` option.
-* This extension does not support `cardView` option.
+* Not support `detailView` option.
+* Not support `cardView` option.
+* Not support `showFooter` option.
+* Need to import after sticky-header when using with sticky-header extension. For example:
+{% highlight html %}
+<link rel="stylesheet" src="extensions/sticky-header/bootstrap-table-sticky-header.css">
+<link rel="stylesheet" src="extensions/fixed-columns/bootstrap-table-fixed-columns.css">
+<script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script>
+<script src="extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
+{% endhighlight %}

site/docs/extensions/sticky-header.md

@@ -11,6 +11,7 @@ This is an extension which provides a sticky header for the table when scrolling
 ## Usage
 
 {% highlight html %}
+<link rel="stylesheet" src="extensions/sticky-header/bootstrap-table-sticky-header.css">
 <script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script>
 {% endhighlight %}
 

src/extensions/fixed-columns/bootstrap-table-fixed-columns.js

@@ -359,4 +359,37 @@ $.BootstrapTable = class extends $.BootstrapTable {
       })
     }
   }
+
+  renderStickyHeader () {
+    if (!this.options.stickyHeader) {
+      return
+    }
+
+    this.$stickyContainer = this.$container.find('.sticky-header-container')
+    super.renderStickyHeader()
+
+    if (this.needFixedColumns && this.options.fixedNumber) {
+      this.$fixedColumns.css('z-index', 101)
+        .find('.sticky-header-container')
+        .css('right', '')
+        .width(this.$fixedColumns.outerWidth())
+    }
+
+    if (this.needFixedColumns && this.options.fixedRightNumber) {
+      const $stickyHeaderContainerRight = this.$fixedColumnsRight.find('.sticky-header-container')
+
+      this.$fixedColumnsRight.css('z-index', 101)
+      $stickyHeaderContainerRight.css('left', '')
+        .scrollLeft($stickyHeaderContainerRight.find('.table').outerWidth())
+        .width(this.$fixedColumnsRight.outerWidth())
+    }
+  }
+
+  matchPositionX () {
+    if (!this.options.stickyHeader) {
+      return
+    }
+
+    this.$stickyContainer.eq(0).scrollLeft(this.$tableBody.scrollLeft())
+  }
 }

src/extensions/sticky-header/bootstrap-table-sticky-header.js

@@ -21,6 +21,8 @@ $.BootstrapTable = class extends $.BootstrapTable {
       return
     }
 
+    this.$tableBody.find('.sticky-header-container,.sticky_anchor_begin,.sticky_anchor_end').remove()
+
     this.$el.before('<div class="sticky-header-container"></div>')
     this.$el.before('<div class="sticky_anchor_begin"></div>')
     this.$el.after('<div class="sticky_anchor_end"></div>')