Merge pull request #1 from khinlatt/feautre/multi_column_search

Feature (Multiple column search) - feature/multiple column search
AllenFang · Nov 3, 2015 · 4874169 · 4874169
2 parents 936fbdc + 597c69e
commit 4874169
Show file tree

Hide file tree

Showing 6 changed files with 18,077 additions and 19,388 deletions.
diff --git a/README.md b/README.md
@@ -125,6 +125,7 @@ You can reference [here](http://allenfang.github.io/react-bootstrap-table/docs.h
 | insertRow    | Bool   | Set true to enable row insertion on table.             |
 | deleteRow    | Bool   | Set true to enable row deletion on table.              |
 | search       | Bool   | Set true to enable search function on table.           |
+| multiColumnSearch | Bool | Set true to enable words search on multiple column function on table from a search box. |
 | searchPlaceholder | String   | The place holder on search text fields          |
 | keyField     | String | Same as ```isKey``` in &lt;TableHeaderColumn&gt;       |
 | trClassName  | String or Function | Assign the row(tr) class, accept string or function, if use function, will pass ```rowData``` and ```rowIndex``` params and should return string presented class. for examples:</br>**function trClassFormat(rowData,rowIndex){**</br>&nbsp;&nbsp;&nbsp;**return rowIndex%2==0?"tr-odd":"tr-even";**</br>**}**      |

diff --git a/dist/react-bootstrap-table.min.js b/dist/react-bootstrap-table.min.js
diff --git a/lib/BootstrapTable.js b/lib/BootstrapTable.js
@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -454,7 +454,7 @@ var BootstrapTable = (function (_React$Component) {
   }, {
     key: 'handleSearch',
     value: function handleSearch(searchText) {
-      this.store.search(searchText);
+      this.store.search(searchText, this.props.multiColumnSearch);
       var result = undefined;
       if (this.props.pagination) {
         var sizePerPage = this.refs.pagination.getSizePerPage();
@@ -566,7 +566,7 @@ var BootstrapTable = (function (_React$Component) {
 BootstrapTable.propTypes = {
   keyField: _react2['default'].PropTypes.string,
   height: _react2['default'].PropTypes.string,
-  data: _react2['default'].PropTypes.array,
+  data: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.array, _react2['default'].PropTypes.object]),
   remote: _react2['default'].PropTypes.bool, // remote data, default is false
   striped: _react2['default'].PropTypes.bool,
   bordered: _react2['default'].PropTypes.bool,
@@ -637,6 +637,7 @@ BootstrapTable.defaultProps = {
   insertRow: false,
   deleteRow: false,
   search: false,
+  multiColumnSearch: false,
   columnFilter: false,
   trClassName: '',
   options: {

diff --git a/lib/store/TableDataStore.js b/lib/store/TableDataStore.js
@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -221,19 +221,31 @@ var TableDataStore = (function () {
     }
   }, {
     key: 'search',
-    value: function search(searchText) {
+    value: function search(searchText, multiColumnSearch) {
       if (searchText.trim() === "") {
         this.filteredData = null;
         this.isOnFilter = false;
         this.searchText = null;
       } else {
         this.searchText = searchText;
+        var searchTextArray = [];
         this.filteredData = this.data.filter(function (row) {
           var valid = false;
+
+          if (multiColumnSearch) {
+            searchTextArray = searchText.split(' ');
+          } else {
+            searchTextArray.push(searchText);
+          }
+
           for (var key in row) {
-            if (row[key] && row[key].toString().toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
-              valid = true;
-              break;
+            if (row[key]) {
+              searchTextArray.forEach(function (text) {
+                if (row[key].toString().toLowerCase().indexOf(text.toLowerCase()) !== -1) {
+                  valid = true;
+                }
+              });
+              if (valid) break;
             }
           }
           return valid;

diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
@@ -384,7 +384,7 @@ class BootstrapTable extends React.Component {
   }
 
   handleSearch(searchText) {
-    this.store.search(searchText);
+    this.store.search(searchText, this.props.multiColumnSearch);
     let result;
     if (this.props.pagination) {
       let sizePerPage = this.refs.pagination.getSizePerPage();
@@ -562,6 +562,7 @@ BootstrapTable.defaultProps = {
   insertRow: false,
   deleteRow: false,
   search: false,
+  multiColumnSearch: false,
   columnFilter: false,
   trClassName: '',
   options: {

diff --git a/src/store/TableDataStore.js b/src/store/TableDataStore.js
@@ -176,20 +176,31 @@ export class TableDataStore {
     }
   }
 
-  search(searchText) {
+  search(searchText, multiColumnSearch) {
     if (searchText.trim() === "") {
       this.filteredData = null;
       this.isOnFilter = false;
       this.searchText = null;
     } else {
       this.searchText = searchText;
+      var searchTextArray = [];
       this.filteredData = this.data.filter(function (row) {
         let valid = false;
+
+        if (multiColumnSearch) {
+          searchTextArray = searchText.split(' ');
+        } else {
+          searchTextArray.push(searchText);
+        }
+
         for (var key in row) {
-          if (row[key] &&
-            row[key].toString().toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
-            valid = true;
-            break;
+          if (row[key]) {
+            searchTextArray.forEach(function(text) {
+              if (row[key].toString().toLowerCase().indexOf(text.toLowerCase()) !== -1) {
+                valid = true;
+              }
+            });
+            if (valid) break;
           }
         }
         return valid;