example for #990

Author: AllenFang

examples/js/remote/demo.js

@@ -7,6 +7,7 @@ import RemoteStoreInsertRow from './remote-store-insert-row';
 import RemoteStoreDeleteRow from './remote-store-delete-row';
 import RemoteStoreCellEdit from './remote-store-cell-edit';
 import RemoteStoreExportCSV from './remote-store-export-csv';
+import RemoteStoreAlternative from './remote-store-alternative';
 import RemoteStoreAll from './remote-store-all';
 
 class Demo extends React.Component {
@@ -93,6 +94,17 @@ class Demo extends React.Component {
             </div>
           </div>
         </div>
+        <div className='col-md-offset-1 col-md-8'>
+          <div className='panel panel-default'>
+            <div className='panel-heading'>Alternative Configure Remote Example</div>
+            <div className='panel-body'>
+              <h5>Source in /examples/js/remote/remote-store-alternative.js and
+                /examples/js/remote/remote-alternative.js</h5>
+              <span>Remote mode also allow you to choose which functionality should be handle by remote.</span>
+              <RemoteStoreAlternative />
+            </div>
+          </div>
+        </div>
         <div className='col-md-offset-1 col-md-8'>
           <div className='panel panel-default'>
             <div className='panel-heading'>Remote All Features Together Example</div>

examples/js/remote/remote-alternative.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+export default class RemoteAlternative extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  remote(remoteObj) {
+    // Only cell editing, insert and delete row will be handled by remote store
+    remoteObj.cellEdit = true;
+    remoteObj.insertRow = true;
+    remoteObj.dropRow = true;
+    return remoteObj;
+  }
+
+  render() {
+    const cellEditProp = {
+      mode: 'click'
+    };
+    const selectRow = {
+      mode: 'checkbox',
+      cliclToSelct: true
+    };
+    return (
+      <BootstrapTable data={ this.props.data }
+                      selectRow={ selectRow }
+                      remote={ this.remote }
+                      insertRow deleteRow search pagination
+                      cellEdit={ cellEditProp }
+                      options={ {
+                        onCellEdit: this.props.onCellEdit,
+                        onDeleteRow: this.props.onDeleteRow,
+                        onAddRow: this.props.onAddRow
+                      } }>
+        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='price' dataSort>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}

examples/js/remote/remote-store-alternative.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import RemoteAlternative from './remote-alternative';
+
+function getProducts() {
+  const products = [];
+  const startId = products.length;
+  for (let i = 0; i < 12; i++) {
+    const id = startId + i;
+    products.push({
+      id: id,
+      name: 'Item name ' + id,
+      price: Math.floor((Math.random() * 2000) + 1)
+    });
+  }
+  return products;
+}
+
+export default class RemoteStoreAlternative extends React.Component {
+  constructor(props) {
+    super(props);
+    this.products = getProducts();
+    this.state = {
+      data: this.products
+    };
+  }
+
+  onCellEdit = (row, fieldName, value) => {
+    const { data } = this.state;
+    let rowIdx;
+    const targetRow = data.find((prod, i) => {
+      if (prod.id === row.id) {
+        rowIdx = i;
+        return true;
+      }
+      return false;
+    });
+    if (targetRow) {
+      targetRow[fieldName] = value;
+      data[rowIdx] = targetRow;
+      this.setState({ data });
+    }
+  }
+
+  onAddRow = (row) => {
+    this.products.push(row);
+    this.setState({
+      data: this.products
+    });
+  }
+
+  onDeleteRow = (row) => {
+    this.products = this.products.filter((product) => {
+      return product.id !== row[0];
+    });
+
+    this.setState({
+      data: this.products
+    });
+  }
+
+  render() {
+    return (
+      <RemoteAlternative
+        onCellEdit={ this.onCellEdit }
+        onAddRow={ this.onAddRow }
+        onDeleteRow={ this.onDeleteRow }
+        { ...this.state } />
+    );
+  }
+}