Able to filter by multiple values using multipleselect control

site/docs/extensions/filter-control.md

@@ -192,6 +192,18 @@ toc: true
 
 - **Default:** `undefined`
 
+### filterMultipleSelectOptions
+
+- **Attribute:** `data-filter-multiple-select-options`
+
+- **type:** `Object`
+
+- **Detail:**
+
+   If the filterControlMultipleSelect option is set to true, use this option to configure the select with the native options. Use this way: `data-filter-multiple-select-options='{"property1":value1, "property2": value2, "property3": value3}'`.
+
+- **Default:** `undefined`
+
 ### filterDefault
 
 - **Attribute:** `data-filter-default`

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -33,7 +33,7 @@ $.extend($.fn.bootstrapTable.defaults, {
         '<select class="form-control bootstrap-table-filter-control-%s %s" %s style="width: 100%;" dir="%s"></select>',
         column.field,
         column.filterControlMultipleSelect ? 'fc-multipleselect' : '',
-        column.filterControlMultipleSelect ? '' : '',
+        column.filterControlMultipleSelect ? 'multiple="multiple"' : '',
         UtilsFilterControl.getDirectionOfSelectOptions(
           options.alignmentSelectControlOptions
         )
@@ -62,6 +62,7 @@ $.extend($.fn.bootstrapTable.columnDefaults, {
   filterDataCollector: undefined,
   filterData: undefined,
   filterDatepickerOptions: {},
+  filterMultipleSelectOptions: {},
   filterStrictSearch: false,
   filterStartsWithSearch: false,
   filterControlPlaceholder: '',
@@ -116,9 +117,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     // Make sure that the filterControl option is set
     if (this.options.filterControl) {
       // Make sure that the internal variables are set correctly
-      this.options._valuesFilterControl = []
-      this.options._initialized = false
-      this.options._usingMultipleSelect = false
+      this._valuesFilterControl = []
+      this._initialized = false
+      this._usingMultipleSelect = false
 
       this.$el
         .on('reset-view.bs.table', () => {
@@ -128,11 +129,11 @@ $.BootstrapTable = class extends $.BootstrapTable {
           }, 2)
         })
         .on('toggle.bs.table', (_, cardView) => {
-          this.options._initialized = false
+          this._initialized = false
           if (!cardView) {
             UtilsFilterControl.initFilterSelectControls(this)
             UtilsFilterControl.setValues(this)
-            this.options._initialized = true
+            this._initialized = true
           }
         })
         .on('post-header.bs.table', () => {
@@ -143,9 +144,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
               const container = UtilsFilterControl.getControlContainer(this)
               const multipleSelects = container.find('.fc-multipleselect')
 
-              if (multipleSelects.length > 0 && $('.ms-parent').length === 0) {
-                multipleSelects.multipleSelect()
-              }
+              multipleSelects.multipleSelect('destroy').multipleSelect()
             }, 2)
           }, 2)
         })
@@ -184,7 +183,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     }
 
     UtilsFilterControl.createControls(this, UtilsFilterControl.getControlContainer(this))
-    this.options._initialized = true
+    this._initialized = true
   }
 
   initSearch () {
@@ -372,7 +371,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     let hasValues = false
     let timeoutId = 0
 
-    $.each(that.options._valuesFilterControl, (i, item) => {
+    $.each(that._valuesFilterControl, (i, item) => {
       hasValues = hasValues ? true : item.value !== ''
       item.value = ''
     })
@@ -441,18 +440,24 @@ $.BootstrapTable = class extends $.BootstrapTable {
     const currentTargetValue = $currentTarget.val()
 
     if (Array.isArray(currentTargetValue)) {
+      const filterByArray = []
+      const $field = $currentTarget.closest('[data-field]').data('field')
+
       for (let i = 0; i < currentTargetValue.length; i++) {
         const text = currentTargetValue[i] ? currentTargetValue[i].trim() : ''
-        const $field = $currentTarget.closest('[data-field]').data('field')
 
         this.trigger('column-search', $field, text)
 
         if (text) {
-          this.filterColumnsPartial[$field] = text
-        } else {
-          delete this.filterColumnsPartial[$field]
+          filterByArray.push(text)
         }
       }
+      if (filterByArray.length > 0) {
+        const filterObj = {}
+
+        filterObj[$field] = filterByArray
+        this.filterBy(filterObj)
+      }
     } else {
       const text = currentTargetValue ? currentTargetValue.trim() : ''
       const $field = $currentTarget.closest('[data-field]').data('field')
@@ -517,7 +522,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
   }
 
   _toggleColumn (index, checked, needUpdate) {
-    this.options._initialized = false
+    this._initialized = false
     super._toggleColumn(index, checked, needUpdate)
     UtilsFilterControl.syncHeaders(this)
   }

src/extensions/filter-control/bootstrap-table-filter-control.scss

@@ -18,4 +18,4 @@
 
 .ms-parent > button:focus {
 	outline: 0;
-}
+}

src/extensions/filter-control/utils.js

@@ -11,7 +11,7 @@ export function getControlContainer (that) {
     return $(`${that.options.filterControlContainer}`)
   }
 
-  if (that.options.height && that.options._initialized) {
+  if (that.options.height && that._initialized) {
     return $('.fixed-table-header table thead')
   }
 
@@ -113,7 +113,7 @@ export function getCursorPosition (el) {
 export function cacheValues (that) {
   const searchControls = getSearchControls(that)
 
-  that.options._valuesFilterControl = []
+  that._valuesFilterControl = []
 
   searchControls.each(function () {
     let $field = $(this)
@@ -128,7 +128,7 @@ export function cacheValues (that) {
       $field = $(`${that.options.filterControlContainer} .${fieldClass}`)
     }
 
-    that.options._valuesFilterControl.push({
+    that._valuesFilterControl.push({
       field: $field.closest('[data-field]').data('field'),
       value: $field.val(),
       position: getCursorPosition($field.get(0)),
@@ -160,7 +160,7 @@ export function setValues (that) {
   let result = []
   const searchControls = getSearchControls(that)
 
-  if (that.options._valuesFilterControl.length > 0) {
+  if (that._valuesFilterControl.length > 0) {
     //  Callback to apply after settings fields values
     const callbacks = []
 
@@ -168,7 +168,7 @@ export function setValues (that) {
       const $this = $(el)
 
       field = $this.closest('[data-field]').data('field')
-      result = that.options._valuesFilterControl.filter(valueObj => valueObj.field === field)
+      result = that._valuesFilterControl.filter(valueObj => valueObj.field === field)
 
       if (result.length > 0) {
         if (result[0].hasFocus || result[0].value) {
@@ -424,11 +424,18 @@ export function createControls (that, header) {
       }, that.options.searchTimeOut)
     })
 
-    header.off('change', 'select:not(".ms-offscreen")').on('change', 'select:not(".ms-offscreen")', ({ currentTarget, keyCode }) => {
+    header.off('change', 'select', '.fc-multipleselect').on('change', 'select', '.fc-multipleselect', ({ currentTarget, keyCode }) => {
       const $selectControl = $(currentTarget)
       const value = $selectControl.val()
 
-      if (value && value.length > 0 && value.trim()) {
+      if (Array.isArray(value)) {
+        for (let i = 0; i < value.length; i++) {
+          if (value[i] && value[i].length > 0 && value[i].trim()) {
+            $selectControl.find(`option[value="${ value[i] }"]`).attr('selected', true)
+          }
+        }
+      }
+      else if (value && value.length > 0 && value.trim()) {
         $selectControl.find('option[selected]').removeAttr('selected')
         $selectControl.find(`option[value="${ value }"]`).attr('selected', true)
       } else {