support show selected only #207

AllenFang · Jan 14, 2016 · a18a463 · a18a463
1 parent 564379a
commit a18a463
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 27 deletions.
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
@@ -300,6 +300,21 @@ class BootstrapTable extends React.Component {
     }
   }
 
+  handleShowOnlySelected() {
+    this.store.ignoreNonSelected();
+    let result;
+    if (this.props.pagination) {
+      let sizePerPage = this.refs.pagination.getSizePerPage();
+      result = this.store.page(1, sizePerPage).get();
+      this.refs.pagination.changePage(1);
+    } else {
+      result = this.store.get();
+    }
+    this.setState({
+      data: result
+    });
+  }
+
   handleSelectRow(row, isSelected) {
     let currSelected = this.store.getSelectedRowKeys();
     let rowKey = row[this.store.getKeyField()];
@@ -516,42 +531,49 @@ class BootstrapTable extends React.Component {
   }
 
   renderToolBar() {
-    let columns;
-    if (Array.isArray(this.props.children)) {
-      columns = this.props.children.map(function (column) {
-        var props = column.props;
-        return {
-          name: props.children,
-          field: props.dataField,
-          //when you want same auto generate value and not allow edit, example ID field
-          autoValue: props.autoValue || false,
-          //for create eidtor, no params for column.editable() indicate that editor for new row
-          editable: props.editable && (typeof props.editable === "function") ? props.editable() : props.editable,
-          format: props.format ? format : false
-        };
-      });
-    } else {
-      columns = [{
-        name: this.props.children.props.children,
-        field: this.props.children.props.dataField,
-        editable: this.props.children.props.editable
-      }];
-    }
-    if (this.props.insertRow || this.props.deleteRow || this.props.search || this.props.exportCSV) {
+    let enableShowOnlySelected = this.props.selectRow && this.props.selectRow.showOnlySelected;
+    if (enableShowOnlySelected
+        || this.props.insertRow
+        || this.props.deleteRow
+        || this.props.search
+        || this.props.exportCSV) {
+      let columns;
+      if (Array.isArray(this.props.children)) {
+        columns = this.props.children.map(function (column) {
+          var props = column.props;
+          return {
+            name: props.children,
+            field: props.dataField,
+            //when you want same auto generate value and not allow edit, example ID field
+            autoValue: props.autoValue || false,
+            //for create eidtor, no params for column.editable() indicate that editor for new row
+            editable: props.editable && (typeof props.editable === "function") ? props.editable() : props.editable,
+            format: props.format ? format : false
+          };
+        });
+      } else {
+        columns = [{
+          name: this.props.children.props.children,
+          field: this.props.children.props.dataField,
+          editable: this.props.children.props.editable
+        }];
+      }
       return (
         <div className="tool-bar">
           <ToolBar
             enableInsert={this.props.insertRow}
             enableDelete={this.props.deleteRow}
             enableSearch={this.props.search}
             enableExportCSV={this.props.exportCSV}
+            enableShowOnlySelected={enableShowOnlySelected}
             columns={columns}
             searchPlaceholder={this.props.searchPlaceholder}
             onAddRow={this.handleAddRow.bind(this)}
             onAddRowBegin={this.handleAddRowBegin.bind(this)}
             onDropRow={this.handleDropRow.bind(this)}
             onSearch={this.handleSearch.bind(this)}
             onExportCSV={this.handleExportCSV.bind(this)}
+            onShowOnlySelected={this.handleShowOnlySelected.bind(this)}
           />
         </div>
       )
@@ -608,7 +630,8 @@ BootstrapTable.propTypes = {
     onSelectAll: React.PropTypes.func,
     clickToSelect: React.PropTypes.bool,
     hideSelectColumn: React.PropTypes.bool,
-    clickToSelectAndEditCell: React.PropTypes.bool
+    clickToSelectAndEditCell: React.PropTypes.bool,
+    showOnlySelected: React.PropTypes.bool
   }),
   cellEdit: React.PropTypes.shape({
     mode: React.PropTypes.string,
@@ -662,7 +685,8 @@ BootstrapTable.defaultProps = {
     onSelectAll: undefined,
     clickToSelect: false,
     hideSelectColumn: false,
-    clickToSelectAndEditCell: false
+    clickToSelectAndEditCell: false,
+    showOnlySelected: false
   },
   cellEdit: {
     mode: Const.CELL_EDIT_NONE,

diff --git a/src/Const.js b/src/Const.js
@@ -15,5 +15,7 @@ export default {
   CELL_EDIT_DBCLICK: "dbclick",
   SIZE_PER_PAGE_LIST: [10, 25, 30, 50],
   PAGINATION_SIZE: 5,
-  NO_DATA_TEXT: "There is no data to display"
+  NO_DATA_TEXT: "There is no data to display",
+  SHOW_ONLY_SELECT: "Show Selected Only",
+  SHOW_ALL: "Show All",
 }
diff --git a/src/store/TableDataStore.js b/src/store/TableDataStore.js
@@ -50,6 +50,7 @@ export class TableDataStore {
     this.pageObj = {};
     this.selected = [];
     this.multiColumnSearch = false;
+    this.showOnlySelected = false;
     this.remote = false; // remote data
   }
 
@@ -85,6 +86,19 @@ export class TableDataStore {
     else return this.data;
   }
 
+  ignoreNonSelected() {
+    this.showOnlySelected = !this.showOnlySelected;
+    if(this.showOnlySelected){
+      this.isOnFilter = true;
+      this.filteredData = this.data.filter( row => {
+        let result = this.selected.find(x => row[this.keyField] === x)
+        return typeof result !== 'undefined' ? true : false;
+      });
+    } else {
+      this.isOnFilter = false;
+    }
+  }
+
   sort(order, sortField) {
     this.sortObj = {
       order: order,

diff --git a/src/toolbar/ToolBar.js b/src/toolbar/ToolBar.js
@@ -12,7 +12,8 @@ class ToolBar extends React.Component{
     this.state = {
       isInsertRowTrigger: true,
       validateState:null,
-      shakeEditor:false
+      shakeEditor:false,
+      showSelected: false
     };
   }
   componentWillUnmount(){
@@ -91,6 +92,13 @@ class ToolBar extends React.Component{
     }
   }
 
+  handleShowOnlyToggle = e => {
+    this.setState({
+      showSelected: !this.state.showSelected
+    });
+    this.props.onShowOnlySelected();
+  }
+
   handleDropRowBtnClick(e){
     this.props.onDropRow();
   }
@@ -122,6 +130,12 @@ class ToolBar extends React.Component{
       <div className="form-group form-group-sm">
         <input className="form-control" type='text' placeholder={this.props.searchPlaceholder?this.props.searchPlaceholder:'Search'} onKeyUp={this.handleKeyUp.bind(this)}/>
       </div>:null;
+
+    var showSelectedOnlyBtn = this.props.enableShowOnlySelected?
+      <button type="button" onClick={this.handleShowOnlyToggle.bind(this)} className="btn btn-primary" data-toggle="button" aria-pressed="false">
+        { this.state.showSelected? Const.SHOW_ALL : Const.SHOW_ONLY_SELECT }
+      </button>:null;
+
     var modal = this.props.enableInsert?this.renderInsertRowModal(modalClassName):null;
     var warningStyle = {
       display: "none",
@@ -139,6 +153,7 @@ class ToolBar extends React.Component{
             {exportCSV}
             {insertBtn}
             {deleteBtn}
+            {showSelectedOnlyBtn}
           </div>
         </div>
         <div className="col-xs-12 col-sm-6 col-md-6 col-lg-4">
@@ -205,16 +220,19 @@ class ToolBar extends React.Component{
 ToolBar.propTypes = {
   onAddRow: React.PropTypes.func,
   onDropRow: React.PropTypes.func,
+  onShowOnlySelected: React.PropTypes.func,
   enableInsert: React.PropTypes.bool,
   enableDelete: React.PropTypes.bool,
   enableSearch: React.PropTypes.bool,
+  enableShowOnlySelected: React.PropTypes.bool,
   columns: React.PropTypes.array,
   searchPlaceholder: React.PropTypes.string
 };
 
 ToolBar.defaultProps = {
   enableInsert: false,
   enableDelete: false,
-  enableSearch: false
+  enableSearch: false,
+  enableShowOnlySelected: false
 }
 export default ToolBar;