ソースを参照

Added no height fixed columns support

zhixin 5 年 前
コミット
4331a6f140

+ 1 - 0
site/docs/extensions/fixed-columns.md

@@ -56,3 +56,4 @@ toc: true
 ## Note
 
 * This extension does not support `detailView` option.
+* This extension does not support `cardView` option.

+ 91 - 87
src/extensions/fixed-columns/bootstrap-table-fixed-columns.js

@@ -10,8 +10,14 @@ $.extend($.fn.bootstrapTable.defaults, {
 
 $.BootstrapTable = class extends $.BootstrapTable {
 
+  fixedColumnsSupported () {
+    return this.options.fixedColumns &&
+      !this.options.detailView &&
+      !this.options.cardView
+  }
+
   initContainer () {
-    if (!this.options.fixedColumns || this.options.detailView) {
+    if (!this.fixedColumnsSupported()) {
       super.initContainer()
       return
     }
@@ -33,18 +39,97 @@ $.BootstrapTable = class extends $.BootstrapTable {
     }
   }
 
-  fitHeader (...args) {
-    super.fitHeader(...args)
+  initBody (...args) {
+    super.initBody(...args)
 
-    if (!this.options.fixedColumns || this.options.detailView) {
+    if (!this.fixedColumnsSupported()) {
       return
     }
 
-    if (this.$el.is(':hidden')) {
+    if (this.options.showHeader && this.options.height) {
       return
     }
 
-    this.needFixedColumns = this.$tableHeader.width() < this.$tableHeader.find('table').width()
+    this.initFixedColumnsBody()
+    this.initFixedColumnsEvents()
+  }
+
+  trigger (...args) {
+    super.trigger(...args)
+
+    if (!this.fixedColumnsSupported()) {
+      return
+    }
+
+    if (args[0] === 'post-header') {
+      this.initFixedColumnsHeader()
+    } else if (args[0] === 'scroll-body') {
+      if (this.needFixedColumns && this.options.fixedNumber) {
+        this.$fixedBody.scrollTop(this.$tableBody.scrollTop())
+      }
+
+      if (this.needFixedColumns && this.options.fixedRightNumber) {
+        this.$fixedBodyRight.scrollTop(this.$tableBody.scrollTop())
+      }
+    }
+  }
+
+  updateSelected () {
+    super.updateSelected()
+
+    if (!this.fixedColumnsSupported()) {
+      return
+    }
+
+    this.$tableBody.find('tr').each((i, el) => {
+      const index = $(el).data('index')
+      const classes = $(el).attr('class')
+
+      const inputSelector = `[name="${this.options.selectItemName}"]`
+      const $input = $(el).find(inputSelector)
+
+      if (typeof index === undefined) {
+        return
+      }
+
+      if (this.$fixedBody && this.options.fixedNumber) {
+        const $tr = this.$fixedBody.find(`tr[data-index="${index}"]`)
+        $tr.attr('class', classes)
+
+        if ($input.length) {
+          $tr.find(inputSelector).prop('checked', $input.prop('checked'))
+        }
+
+        if (this.$selectAll.length) {
+          this.$fixedHeader.add(this.$fixedBody)
+            .find('[name="btSelectAll"]')
+            .prop('checked', this.$selectAll.prop('checked'))
+        }
+      }
+
+      if (this.$fixedBodyRight && this.options.fixedRightNumber) {
+        const $tr = this.$fixedBodyRight.find(`tr[data-index="${index}"]`)
+        $tr.attr('class', classes)
+
+        if ($input.length) {
+          $tr.find(inputSelector).prop('checked', $input.prop('checked'))
+        }
+
+        if (this.$selectAll.length) {
+          this.$fixedHeaderRight.add(this.$fixedBodyRight)
+            .find('[name="btSelectAll"]')
+            .prop('checked', this.$selectAll.prop('checked'))
+        }
+      }
+    })
+  }
+
+  initFixedColumnsHeader () {
+    if (this.options.height) {
+      this.needFixedColumns = this.$tableHeader.width() < this.$tableHeader.find('table').width()
+    } else {
+      this.needFixedColumns = this.$tableBody.width() < this.$tableBody.find('table').width()
+    }
 
     if (this.needFixedColumns && this.options.fixedNumber) {
       this.$fixedColumns.find('.fixed-table-header').remove()
@@ -71,21 +156,6 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.initFixedColumnsEvents()
   }
 
-  initBody (...args) {
-    super.initBody(...args)
-
-    if (!this.options.fixedColumns || this.options.detailView) {
-      return
-    }
-
-    if (this.options.showHeader && this.options.height) {
-      return
-    }
-
-    this.initFixedColumnsBody()
-    this.initFixedColumnsEvents()
-  }
-
   initFixedColumnsBody () {
     if (this.needFixedColumns && this.options.fixedNumber) {
       this.$fixedColumns.find('.fixed-table-body').remove()
@@ -126,24 +196,6 @@ $.BootstrapTable = class extends $.BootstrapTable {
     return width + 1
   }
 
-  trigger (...args) {
-    super.trigger(...args)
-
-    if (!this.options.fixedColumns || this.options.detailView) {
-      return
-    }
-
-    if (args[0] === 'scroll-body') {
-      if (this.needFixedColumns && this.options.fixedNumber) {
-        this.$fixedBody.scrollTop(this.$tableBody.scrollTop())
-      }
-
-      if (this.needFixedColumns && this.options.fixedRightNumber) {
-        this.$fixedBodyRight.scrollTop(this.$tableBody.scrollTop())
-      }
-    }
-  }
-
   initFixedColumnsEvents () {
     this.$tableBody.find('tr').hover(e => {
       const index = $(e.currentTarget).data('index')
@@ -239,52 +291,4 @@ $.BootstrapTable = class extends $.BootstrapTable {
       })
     }
   }
-
-  updateSelected () {
-    super.updateSelected()
-
-    if (!this.options.fixedColumns || this.options.detailView) {
-      return
-    }
-
-    this.$tableBody.find('tr').each((i, el) => {
-      const index = $(el).data('index')
-      const classes = $(el).attr('class')
-
-      const inputSelector = `[name="${this.options.selectItemName}"]`
-      const $input = $(el).find(inputSelector)
-
-      if (typeof index === undefined) {
-        return
-      }
-
-      if (this.$fixedBody && this.options.fixedNumber) {
-        const $tr = this.$fixedBody.find(`tr[data-index="${index}"]`)
-        $tr.attr('class', classes)
-
-        if ($input.length) {
-          $tr.find(inputSelector).prop('checked', $input.prop('checked'))
-        }
-
-        if (this.$selectAll.length) {
-          this.$fixedHeader.find('[name="btSelectAll"]')
-            .prop('checked', this.$selectAll.prop('checked'))
-        }
-      }
-
-      if (this.$fixedBodyRight && this.options.fixedRightNumber) {
-        const $tr = this.$fixedBodyRight.find(`tr[data-index="${index}"]`)
-        $tr.attr('class', classes)
-
-        if ($input.length) {
-          $tr.find(inputSelector).prop('checked', $input.prop('checked'))
-        }
-
-        if (this.$selectAll.length) {
-          this.$fixedHeaderRight.find('[name="btSelectAll"]')
-            .prop('checked', this.$selectAll.prop('checked'))
-        }
-      }
-    })
-  }
 }