Browse Source

Fixed sticky header not work bug with fullscreen (#4717)

文翼 6 years ago
parent
commit
8a844f7bfb
1 changed files with 19 additions and 4 deletions
  1. 19 4
      src/extensions/sticky-header/bootstrap-table-sticky-header.js

+ 19 - 4
src/extensions/sticky-header/bootstrap-table-sticky-header.js

@@ -38,11 +38,20 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.$stickyHeader = this.$header.clone(true, true)
     this.$stickyHeader = this.$header.clone(true, true)
 
 
     // render sticky on window scroll or resize
     // render sticky on window scroll or resize
-    $(window).on('resize.sticky-header-table', () => this.renderStickyHeader())
-    $(window).on('scroll.sticky-header-table', () => this.renderStickyHeader())
+    $(window).off('resize.sticky-header-table')
+      .on('resize.sticky-header-table', () => this.renderStickyHeader())
+    $(window).off('scroll.sticky-header-table')
+      .on('scroll.sticky-header-table', () => this.renderStickyHeader())
     this.$tableBody.off('scroll').on('scroll', () => this.matchPositionX())
     this.$tableBody.off('scroll').on('scroll', () => this.matchPositionX())
   }
   }
 
 
+  resetView (...args) {
+    super.resetView(...args)
+
+    $('.bootstrap-table.fullscreen').off('scroll')
+      .on('scroll', () => this.renderStickyHeader())
+  }
+
   renderStickyHeader () {
   renderStickyHeader () {
     const top = $(window).scrollTop()
     const top = $(window).scrollTop()
     // top anchor scroll position, minus header height
     // top anchor scroll position, minus header height
@@ -58,9 +67,15 @@ $.BootstrapTable = class extends $.BootstrapTable {
       // match bootstrap table style
       // match bootstrap table style
       this.$stickyContainer.removeClass(hiddenClass).addClass('fix-sticky fixed-table-container')
       this.$stickyContainer.removeClass(hiddenClass).addClass('fix-sticky fixed-table-container')
       // stick it in position
       // stick it in position
+      let stickyHeaderOffsetLeft = this.options.stickyHeaderOffsetLeft
+      let stickyHeaderOffsetRight = this.options.stickyHeaderOffsetRight
+      if (this.$el.closest('.bootstrap-table').hasClass('fullscreen')) {
+        stickyHeaderOffsetLeft = 0
+        stickyHeaderOffsetRight = 0
+      }
       this.$stickyContainer.css('top', `${this.options.stickyHeaderOffsetY}`)
       this.$stickyContainer.css('top', `${this.options.stickyHeaderOffsetY}`)
-      this.$stickyContainer.css('left', `${this.options.stickyHeaderOffsetLeft}`)
-      this.$stickyContainer.css('right', `${this.options.stickyHeaderOffsetRight}`)
+      this.$stickyContainer.css('left', `${stickyHeaderOffsetLeft}`)
+      this.$stickyContainer.css('right', `${stickyHeaderOffsetRight}`)
       // create scrollable container for header
       // create scrollable container for header
       this.$stickyTable = $('<table/>')
       this.$stickyTable = $('<table/>')
       this.$stickyTable.addClass(this.options.classes)
       this.$stickyTable.addClass(this.options.classes)