Added multipleSelectRow option and removed multiple-selection-row extension.

site/docs/api/table-options.md

@@ -513,8 +513,6 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Default:** `false`
 
-- **Example:** [Only Info Pagination](https://examples.bootstrap-table.com/#options/show-extended-pagination.html)
-
 ## totalNotFilteredField
 
 - **Attribute:** `data-total-not-filtered-field`
@@ -1130,6 +1128,20 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Maintain Selected](https://examples.bootstrap-table.com/#options/maintain-selected.html)
 
+## multipleSelectRow
+
+- **Attribute:** `data-multiple-select-row`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `true` to enable the multiple selection row. Can use the ctrl+click to select one row or use shift+click to select a range of rows.
+
+- **Default:** `false`
+
+- **Example:** [Multiple Select Row](https://examples.bootstrap-table.com/#options/multiple-select-row.html)
+
 ## uniqueId
 
 - **Attribute:** `data-unique-id`
@@ -1210,8 +1222,6 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
   Set `true` to toggle the detail view, when a cell is clicked.
 
-- **Example:** [Toggle detail view by click](https://examples.bootstrap-table.com/#options/detail-view-by-click.html)
-
 ## toolbar
 
 - **Attribute:** `data-toolbar`

site/docs/extensions/multiple-selection-row.md

@@ -1,47 +0,0 @@
----
-layout: docs
-title: Table Multiple Selection Row
-description: Table Multiple Selection Row extension of Bootstrap Table.
-group: extensions
-toc: true
----
-
-Use Plugin: [bootstrap-table-multiple-selection-row](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multiple-selection-row)
-
-## Usage
-
-{% highlight html %}
-<link rel="stylesheet" type="text/css" href="extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.css">
-<script src="extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.js"></script>
-{% endhighlight %}
-
-## Options
-
-### multipleSelectRow
-
-- **type:** `Boolean`
-
-- **Detail:**
-
-   Set true to enable the multiple selection row.
-
-- **Default:** `false`
-
-### multipleSelectRowCssClass
-
-- **type:** `String`
-
-- **Detail:**
-
-   The class that will be applied in the rows selected.
-
-- **Default:** `multiple-select-row-selected`
-
-## Methods
-
-### clearAllMultipleSelectionRow
-
-* Clear all the selected rows.
-  * Parameters
-      * It does not receive parameters.
-  * Example: <code> $table.bootstrapTable("clearAllMultipleSelectionRow");</code>

src/bootstrap-table.js

@@ -447,6 +447,7 @@
     singleSelect: false,
     checkboxHeader: true,
     maintainSelected: false,
+    multipleSelectRow: false,
     uniqueId: undefined,
     cardView: false,
     detailView: false,
@@ -2060,13 +2061,13 @@
       }
 
       // click to select by column
-      this.$body.find('> tr[data-index] > td').off('click dblclick').on('click dblclick', ({currentTarget, type, target}) => {
-        const $td = $(currentTarget)
+      this.$body.find('> tr[data-index] > td').off('click dblclick').on('click dblclick', e => {
+        const $td = $(e.currentTarget)
         const $tr = $td.parent()
-        const $cardviewArr = $(target).parents('.card-views').children()
-        const $cardviewTarget = $(target).parents('.card-view')
+        const $cardViewArr = $(e.target).parents('.card-views').children()
+        const $cardViewTarget = $(e.target).parents('.card-view')
         const item = this.data[$tr.data('index')]
-        const index = this.options.cardView ? $cardviewArr.index($cardviewTarget) : $td[0].cellIndex
+        const index = this.options.cardView ? $cardViewArr.index($cardViewTarget) : $td[0].cellIndex
         const fields = this.getVisibleFields()
         const field = fields[this.options.detailView && !this.options.cardView ? index - 1 : index]
         const column = this.columns[this.fieldsColumnsIndex[field]]
@@ -2076,25 +2077,29 @@
           return
         }
 
-        this.trigger(type === 'click' ? 'click-cell' : 'dbl-click-cell', field, value, item, $td)
-        this.trigger(type === 'click' ? 'click-row' : 'dbl-click-row', item, $tr, field)
+        this.trigger(e.type === 'click' ? 'click-cell' : 'dbl-click-cell', field, value, item, $td)
+        this.trigger(e.type === 'click' ? 'click-row' : 'dbl-click-row', item, $tr, field)
 
         // if click to select - then trigger the checkbox/radio click
         if (
-          type === 'click' &&
+          e.type === 'click' &&
           this.options.clickToSelect &&
           column.clickToSelect &&
-          !Utils.calculateObjectValue(this.options, this.options.ignoreClickToSelectOn, [target])
+          !Utils.calculateObjectValue(this.options, this.options.ignoreClickToSelectOn, [e.target])
         ) {
           const $selectItem = $tr.find(Utils.sprintf('[name="%s"]', this.options.selectItemName))
           if ($selectItem.length) {
-            $selectItem[0].click() // #144: .trigger('click') bug
+            $selectItem[0].click()
           }
         }
 
-        if (type === 'click' && this.options.detailViewByClick) {
+        if (e.type === 'click' && this.options.detailViewByClick) {
           this.toggleDetailView($tr.find('.detail-icon'), this.header.detailFormatters[index - 1])
         }
+      }).off('mousedown').on('mousedown', e => {
+        // https://github.com/jquery/jquery/issues/1741
+        this.multipleSelectRowCtrlKey = e.ctrlKey || e.metaKey
+        this.multipleSelectRowShiftKey = e.shiftKey
       })
 
       this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', e => {
@@ -3053,7 +3058,13 @@
       const $el = this.$selectItem.filter(`[data-index="${index}"]`)
       const row = this.data[index]
 
-      if ($el.is(':radio') || this.options.singleSelect) {
+      if (
+        $el.is(':radio') ||
+        this.options.singleSelect ||
+        this.options.multipleSelectRow &&
+        !this.multipleSelectRowCtrlKey &&
+        !this.multipleSelectRowShiftKey
+      ) {
         for (const r of this.options.data) {
           r[this.header.stateField] = false
         }
@@ -3061,6 +3072,22 @@
       }
 
       row[this.header.stateField] = checked
+
+      if (this.options.multipleSelectRow) {
+        if (this.multipleSelectRowShiftKey && this.multipleSelectRowLastSelectedIndex >= 0) {
+          const indexes = [this.multipleSelectRowLastSelectedIndex, index].sort()
+
+          for (let i = indexes[0] + 1; i < indexes[1]; i++) {
+            this.data[i][this.header.stateField] = true
+            this.$selectItem.filter(`[data-index="${i}"]`).prop('checked', true)
+          }
+        }
+
+        this.multipleSelectRowCtrlKey = false
+        this.multipleSelectRowShiftKey = false
+        this.multipleSelectRowLastSelectedIndex = checked ? index : -1
+      }
+
       $el.prop('checked', checked)
       this.updateSelected()
       this.trigger(checked ? 'check' : 'uncheck', this.data[index], $el)

src/extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.css

@@ -1,17 +0,0 @@
-.multiple-select-row-selected {
-    background: lightBlue
-}
-
-.table tbody tr:hover td,
-.table tbody tr:hover th {
-  background-color: transparent;
-}
-
-
-.table-striped tbody tr:nth-child(odd):hover td {
-   background-color: #F9F9F9;
-}
-
-.fixed-table-container tbody .selected td {
-    background: lightBlue;
-}

src/extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.js

@@ -1,126 +0,0 @@
-/**
- * @author: Dennis Hernández
- * @webSite: http://djhvscf.github.io/Blog
- * @version: v1.0.0
- */
-
-!function ($) {
-  'use strict'
-
-  document.onselectstart = function () {
-    return false
-  }
-
-  var getTableObjectFromCurrentTarget = function (currentTarget) {
-    currentTarget = $(currentTarget)
-    return currentTarget.is('table') ? currentTarget : currentTarget.parents().find('.table')
-  }
-
-  var getRow = function (target) {
-    target = $(target)
-    return target.parent().parent()
-  }
-
-  var toggleRow = function (row, that, clearAll, useShift) {
-    if (clearAll) {
-      row = $(row)
-      that.bootstrapTable('getOptions').multipleSelectRowLastSelectedRow = undefined
-      row.removeClass(that.bootstrapTable('getOptions').multipleSelectRowCssClass)
-      that.bootstrapTable('uncheck', row.data('index'))
-    } else {
-      that.bootstrapTable('getOptions').multipleSelectRowLastSelectedRow = row
-      row = $(row)
-      if (useShift) {
-        row.addClass(that.bootstrapTable('getOptions').multipleSelectRowCssClass)
-        that.bootstrapTable('check', row.data('index'))
-      } else {
-        if (row.hasClass(that.bootstrapTable('getOptions').multipleSelectRowCssClass)) {
-          row.removeClass(that.bootstrapTable('getOptions').multipleSelectRowCssClass)
-          that.bootstrapTable('uncheck', row.data('index'))
-        } else {
-          row.addClass(that.bootstrapTable('getOptions').multipleSelectRowCssClass)
-          that.bootstrapTable('check', row.data('index'))
-        }
-      }
-    }
-  }
-
-  var clearAll = function (that) {
-    for (var i = 0; i < that.bootstrapTable('getOptions').multipleSelectRowRows.length; i++) {
-      toggleRow(that.bootstrapTable('getOptions').multipleSelectRowRows[i], that, true, false)
-    }
-  }
-
-  var selectRowsBetweenIndexes = function (indexes, that) {
-    indexes.sort(function (a, b) {
-      return a - b
-    })
-
-    for (var i = indexes[0]; i <= indexes[1]; i++) {
-      toggleRow(that.bootstrapTable('getOptions').multipleSelectRowRows[i - 1], that, false, true)
-    }
-  }
-
-  var onRowClick = function (e) {
-    var that = getTableObjectFromCurrentTarget(e.currentTarget)
-
-    if (window.event.ctrlKey) {
-      toggleRow(e.currentTarget, that, false, false)
-    }
-
-    if (window.event.button === 0) {
-      if (!window.event.ctrlKey && !window.event.shiftKey) {
-        clearAll(that)
-        toggleRow(e.currentTarget, that, false, false)
-      }
-
-      if (window.event.shiftKey) {
-        selectRowsBetweenIndexes([that.bootstrapTable('getOptions').multipleSelectRowLastSelectedRow.rowIndex, e.currentTarget.rowIndex], that)
-      }
-    }
-  }
-
-  var onCheckboxChange = function (e) {
-    var that = getTableObjectFromCurrentTarget(e.currentTarget)
-    clearAll(that)
-    toggleRow(getRow(e.currentTarget), that, false, false)
-  }
-
-  $.extend($.fn.bootstrapTable.defaults, {
-    multipleSelectRow: false,
-    multipleSelectRowCssClass: 'multiple-select-row-selected',
-    // internal variables used by the extension
-    multipleSelectRowLastSelectedRow: undefined,
-    multipleSelectRowRows: []
-  })
-
-  var BootstrapTable = $.fn.bootstrapTable.Constructor
-  var _init = BootstrapTable.prototype.init
-  var _initBody = BootstrapTable.prototype.initBody
-
-  BootstrapTable.prototype.init = function () {
-    if (this.options.multipleSelectRow) {
-      var that = this
-
-      // Make sure that the internal variables have the correct value
-      this.options.multipleSelectRowLastSelectedRow = undefined
-      this.options.multipleSelectRowRows = []
-
-      this.$el.on('post-body.bs.table', function (e) {
-        setTimeout(function () {
-          that.options.multipleSelectRowRows = that.$body.children()
-          that.options.multipleSelectRowRows.click(onRowClick)
-          that.options.multipleSelectRowRows.find('input[type=checkbox]').change(onCheckboxChange)
-        }, 1)
-      })
-    }
-
-    _init.apply(this, Array.prototype.slice.apply(arguments))
-  }
-
-  BootstrapTable.prototype.clearAllMultipleSelectionRow = function () {
-    clearAll(this)
-  }
-
-  $.fn.bootstrapTable.methods.push('clearAllMultipleSelectionRow')
-}(jQuery)

src/extensions/multiple-selection-row/extension.json

@@ -1,17 +0,0 @@
-{
-  "name": "Multiple Selection Row",
-  "version": "1.0.0",
-  "description": "Plugin to enable the multiple selection row. You can use the ctrl+click to select one row or use ctrl+shift+click to select a range of rows.",
-  "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multiple-selection-row",
-  "example": "",
-
-  "plugins": [{
-    "name": "bootstrap-table-multiple-selection-row",
-    "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multiple-selection-row"
-  }],
-
-  "author": {
-    "name": "djhvscf",
-    "image": "https://avatars1.githubusercontent.com/u/4496763"
-  }
-}