浏览代码

improved filterBy function

Dustin Utecht 6 年之前
父节点
当前提交
b9ffcde4d8
共有 2 个文件被更改,包括 73 次插入17 次删除
  1. 32 4
      site/docs/api/methods.md
  2. 41 13
      src/bootstrap-table.js

+ 32 - 4
site/docs/api/methods.md

@@ -395,11 +395,39 @@ The calling method syntax: `$('#table').bootstrapTable('method', parameter)`.
 
 ## filterBy
 
-- **Parameter:** `params`
-
-- **Detail:**
+- **Parameter:**
+    - `filter - An Object of filter`   
+    Default: `{}`
+    - `options - An Object of options`   
+    Default:
+        ```
+        {
+            'filterAlgorithm': 'and'
+        }
+        ```
+       
+
+- **Detail:**
+  
+  (Can use only in client-side) Filter data in table.   
+  There are multiple ways to filter:
+  - Leave the options blank to use the `and` filter.
+  - Set the `filterAlgorithm` (see at parameter) to `or` to use the `or` filter.
+  - Pass a function to the `filterAlgorithm` (see at parameter) to use a `custom` filter.
+    
+  #####Filter Algorithm
+  
+  - And
+    - Filter `{age: 10}` to show the data only age is equal to 10.  You can also filter with an array of values, as in: `{age: 10, hairColor: ['blue', 'red', 'green']}` to find data where age is equal to 10 and hairColor is either blue, red, or green.
+  - Or
+    - Filter `{age: 10, name: "santa"}` to show all Data which has a age of 10 **or** the name is equals to santa.
+  - Custom
+    - Filter by your Custom algorithm
+    - Function parameters:
+        - Row
+        - Filters
+    - Return `true` to keep the row and return `false` to filter the row.
 
-  (Can use only in client-side) Filter data in table, e.g. you can filter `{age: 10}` to show the data only age is equal to 10.  You can also filter with an array of values, as in: `{age: 10, hairColor: ['blue', 'red', 'green']}` to find data where age is equal to 10 and hairColor is either blue, red, or green.
 
 ## selectPage
 

+ 41 - 13
src/bootstrap-table.js

@@ -384,6 +384,9 @@
     showFullscreen: false,
     smartDisplay: true,
     escape: false,
+    filterOptions  : {
+      'filterAlgorithm': 'and' //and means all given filter must match, or means one of the given filter must match
+    },
     idField: undefined,
     selectItemName: 'btSelectItem',
     clickToSelect: false,
@@ -1353,19 +1356,43 @@
         const f = Utils.isEmptyObject(this.filterColumns) ? null : this.filterColumns
 
         // Check filter
-        this.data = f ? this.options.data.filter((item, i) => {
-          for (const key in f) {
-            if (
-              (Array.isArray(f[key]) &&
-              !f[key].includes(item[key])) ||
-              (!Array.isArray(f[key]) &&
-              item[key] !== f[key])
-            ) {
-              return false
+        if (typeof this.filterOptions.filterAlgorithm === 'function') {
+          this.data = this.options.data.filter((item, i) => {
+            return this.filterOptions.filterAlgorithm.apply(null, [item, f]);
+          });
+        } else if (typeof this.filterOptions.filterAlgorithm === 'string') {
+          this.data = f ? this.options.data.filter((item, i) => {
+            let filterAlgorithm = this.filterOptions.filterAlgorithm;
+            if(filterAlgorithm === 'and') {
+              for (const key in f) {
+                if (
+                    (Array.isArray(f[key]) &&
+                        !f[key].includes(item[key])) ||
+                    (!Array.isArray(f[key]) &&
+                        item[key] !== f[key])
+                ) {
+                  return false
+                }
+              }
+            } else if (filterAlgorithm === 'or') {
+              let match = false;
+              for (const key in f) {
+                if (
+                    (Array.isArray(f[key]) &&
+                        f[key].includes(item[key])) ||
+                    (!Array.isArray(f[key]) &&
+                        item[key] === f[key])
+                ) {
+                  match = true;
+                }
+              }
+
+              return match;
             }
-          }
-          return true
-        }) : this.options.data
+
+            return true
+          }) : this.options.data
+        }
 
         this.data = s ? this.data.filter((item, i) => {
           for (let j = 0; j < this.header.fields.length; j++) {
@@ -3113,7 +3140,8 @@
       this.toggleAllColumns(false)
     }
 
-    filterBy (columns) {
+    filterBy (columns, options) {
+      this.filterOptions = Utils.isEmptyObject(options) ? this.options.filterOptions : $.extend(this.options.filterOptions, options);
       this.filterColumns = Utils.isEmptyObject(columns) ? {} : columns
       this.options.pageNumber = 1
       this.initSearch()