refine remote examples

2026-06-28 21:20:04 +00:00 · 2017-12-24 14:18:50 +08:00
parent 5cbeae704b
commit e14c596b8c
4 changed files with 319 additions and 4 deletions
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-all.js
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-all.js
@@ -0,0 +1,202 @@
+/* eslint guard-for-in: 0 */
+/* eslint no-restricted-syntax: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table2';
+import paginator from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table2';
+import paginator from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+// ...
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <BootstrapTable
+      remote={ { pagination: true } }
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      filter={ filterFactory() }
+      pagination={ paginator({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+RemoteAll.propTypes = {
+  data: PropTypes.array.isRequired,
+  page: PropTypes.number.isRequired,
+  totalSize: PropTypes.number.isRequired,
+  sizePerPage: PropTypes.number.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      totalSize: products.length,
+      sizePerPage: 10
+    };
+    this.handleTableChange = this.handleTableChange.bind(this);
+  }
+
+  handleTableChange = (type, { page, sizePerPage, filters }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      const result = products.filter((row) => {
+        let valid = true;
+        for (const dataField in filters) {
+          const { filterVal, filterType, comparator } = filters[dataField];
+
+          if (filterType === 'TEXT') {
+            if (comparator === Comparator.LIKE) {
+              valid = row[dataField].toString().indexOf(filterVal) > -1;
+            } else {
+              valid = row[dataField] === filterVal;
+            }
+          }
+          if (!valid) break;
+        }
+        return valid;
+      });
+      this.setState(() => ({
+        page,
+        data: result.slice(currentIndex, currentIndex + sizePerPage),
+        totalSize: result.length,
+        sizePerPage
+      }));
+    }, 2000);
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <RemoteAll
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ this.state.totalSize }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+`;
+
+const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <h3>When <code>remote.pagination</code> is enabled, the filtering,
+      sorting and searching will also change to remote mode automatically</h3>
+    <BootstrapTable
+      remote={ { pagination: true } }
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      filter={ filterFactory() }
+      pagination={ paginator({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+RemoteAll.propTypes = {
+  data: PropTypes.array.isRequired,
+  page: PropTypes.number.isRequired,
+  totalSize: PropTypes.number.isRequired,
+  sizePerPage: PropTypes.number.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      totalSize: products.length,
+      sizePerPage: 10
+    };
+    this.handleTableChange = this.handleTableChange.bind(this);
+  }
+
+  handleTableChange = (type, { page, sizePerPage, filters }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      const result = products.filter((row) => {
+        let valid = true;
+        for (const dataField in filters) {
+          const { filterVal, filterType, comparator } = filters[dataField];
+
+          if (filterType === 'TEXT') {
+            if (comparator === Comparator.LIKE) {
+              valid = row[dataField].toString().indexOf(filterVal) > -1;
+            } else {
+              valid = row[dataField] === filterVal;
+            }
+          }
+          if (!valid) break;
+        }
+        return valid;
+      });
+      this.setState(() => ({
+        page,
+        data: result.slice(currentIndex, currentIndex + sizePerPage),
+        totalSize: result.length,
+        sizePerPage
+      }));
+    }, 2000);
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <RemoteAll
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ this.state.totalSize }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+
+export default Container;
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-filter.js
@@ -0,0 +1,105 @@
+/* eslint guard-for-in: 0 */
+/* eslint no-restricted-syntax: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table2';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(17);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const sourceCode = `\
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+const RemoteFilter = props => (
+  <div>
+    <BootstrapTable
+      remote={ { filter: true } }
+      keyField="id"
+      data={ props.data }
+      columns={ columns }
+      filter={ filterFactory() }
+      onTableChange={ props.onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+RemoteFilter.propTypes = {
+  data: PropTypes.array.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: products
+    };
+  }
+
+  handleTableChange = (type, { filters }) => {
+    setTimeout(() => {
+      const result = products.filter((row) => {
+        let valid = true;
+        for (const dataField in filters) {
+          const { filterVal, filterType, comparator } = filters[dataField];
+
+          if (filterType === 'TEXT') {
+            if (comparator === Comparator.LIKE) {
+              valid = row[dataField].toString().indexOf(filterVal) > -1;
+            } else {
+              valid = row[dataField] === filterVal;
+            }
+          }
+          if (!valid) break;
+        }
+        return valid;
+      });
+      this.setState(() => ({
+        data: result
+      }));
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <RemoteFilter
+        data={ this.state.data }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+
+export default Container;
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js
@@ -0,0 +1,133 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table2';
+import paginator from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table2';
+import paginator from 'react-bootstrap-table2-paginator';
+// ...
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <BootstrapTable
+      remote
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      pagination={ paginator({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = ({ page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 2000);
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <RemotePagination
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+`;
+
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <BootstrapTable
+      remote
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      pagination={ paginator({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+RemotePagination.propTypes = {
+  data: PropTypes.array.isRequired,
+  page: PropTypes.number.isRequired,
+  totalSize: PropTypes.number.isRequired,
+  sizePerPage: PropTypes.number.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = (type, { page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 2000);
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <RemotePagination
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+
+export default Container;