Added new version fixed-columns extension.

site/docs/extensions/fixed-columns.md

@@ -0,0 +1,36 @@
+---
+layout: docs
+title: Table Fixed Columns
+description: Table Fixed columns extension of Bootstrap Table.
+group: extensions
+toc: true
+---
+
+## Usage
+
+{% highlight html %}
+<link rel="stylesheet" src="extensions/fixed-columns/bootstrap-table-fixed-columns.css">
+<script src="extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
+{% endhighlight %}
+
+## Options
+
+### fixedColumns
+
+- **type:** `Boolean`
+
+- **Detail:**
+
+  set `true` to enable fixed columns.
+
+- **Default:** `false`
+
+### fixedNumber
+
+- **type:** Number
+
+- **Detail:**
+
+  the number of fixed columns.
+
+- **Default:** `1`

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

@@ -0,0 +1,27 @@
+.fixed-table-header-columns,
+.fixed-table-body-columns {
+  position: absolute;
+  background-color: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.fixed-table-header-columns {
+  z-index: 2;
+}
+
+.fixed-table-header-columns .table,
+.fixed-table-body-columns .table {
+  border-right: 1px solid #ddd;
+}
+
+.fixed-table-header-columns .table.table-no-bordered,
+.fixed-table-body-columns .table.table-no-bordered {
+  border-right: 1px solid transparent;
+}
+
+.fixed-table-body-columns table {
+  position: absolute;
+  animation: none;
+}

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

@@ -0,0 +1,115 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ */
+
+($ => {
+  $.extend($.fn.bootstrapTable.defaults, {
+    fixedColumns: false,
+    fixedNumber: 1
+  })
+
+  $.BootstrapTable = class extends $.BootstrapTable {
+
+    fitHeader (...args) {
+      super.fitHeader(...args)
+
+      if (!this.options.fixedColumns) {
+        return
+      }
+
+      if (this.$el.is(':hidden')) {
+        return
+      }
+
+      this.$container.find('.fixed-table-header-columns').remove()
+      this.$fixedHeader = $('<div class="fixed-table-header-columns"></div>')
+      this.$fixedHeader.append(this.$tableHeader.find('>table').clone(true))
+      this.$tableHeader.after(this.$fixedHeader)
+
+      const width = this.getFixedColumnsWidth()
+
+      this.$fixedHeader.css({
+        top: 0,
+        width,
+        height: this.$tableHeader.outerHeight(true)
+      })
+
+      this.initFixedColumnsBody()
+
+      this.$fixedBody.css({
+        top: this.$tableHeader.outerHeight(true),
+        width,
+        height: this.$tableBody.outerHeight(true) - 1
+      })
+
+      this.initFixedColumnsEvents()
+    }
+
+    initBody (...args) {
+      super.initBody(...args)
+
+      if (!this.options.fixedColumns) {
+        return
+      }
+
+      if (this.options.showHeader && this.options.height) {
+        return
+      }
+
+      this.initFixedColumnsBody()
+
+      this.$fixedBody.css({
+        top: 0,
+        width: this.getFixedColumnsWidth(),
+        height: this.$tableHeader.outerHeight(true) + this.$tableBody.outerHeight(true)
+      })
+
+      this.initFixedColumnsEvents()
+    }
+
+    initFixedColumnsBody () {
+      this.$container.find('.fixed-table-body-columns').remove()
+      this.$fixedBody = $('<div class="fixed-table-body-columns"></div>')
+      this.$fixedBody.append(this.$tableBody.find('>table').clone(true))
+      this.$tableBody.after(this.$fixedBody)
+    }
+
+    getFixedColumnsWidth () {
+      const visibleFields = this.getVisibleFields()
+      let width = 0
+
+      for (let i = 0; i < this.options.fixedNumber; i++) {
+        width += this.$header.find(`th[data-field="${visibleFields[i]}"]`).outerWidth(true)
+      }
+
+      return width + 1
+    }
+
+    initFixedColumnsEvents () {
+      // events
+      this.$tableBody.off('scroll.fixed-columns').on('scroll.fixed-columns', e => {
+        this.$fixedBody.find('table').css('top', -$(e.currentTarget).scrollTop())
+      })
+
+      this.$body.find('> tr[data-index]').off('hover').hover(e => {
+        const index = $(e.currentTarget).data('index')
+        this.$fixedBody.find(`tr[data-index="${index}"]`)
+          .css('background-color', $(e.currentTarget).css('background-color'))
+      }, e => {
+        const index = $(e.currentTarget).data('index')
+        const $tr = this.$fixedBody.find(`tr[data-index="${index}"]`)
+        $tr.attr('style', $tr.attr('style').replace(/background-color:.*;/, ''))
+      })
+
+      this.$fixedBody.find('tr[data-index]').off('hover').hover(e => {
+        const index = $(e.currentTarget).data('index')
+        this.$body.find(`tr[data-index="${index}"]`)
+          .css('background-color', $(e.currentTarget).css('background-color'))
+      }, e => {
+        const index = $(e.currentTarget).data('index')
+        const $tr = this.$body.find(`> tr[data-index="${index}"]`)
+        $tr.attr('style', $tr.attr('style').replace(/background-color:.*;/, ''))
+      })
+    }
+  }
+})(jQuery)