fix #585 (#592)

2026-06-28 21:20:04 +00:00 · 2018-10-06 17:29:24 +08:00
parent 8517248aee
commit 8b8f336878
3 changed files with 187 additions and 1 deletions
--- a/packages/react-bootstrap-table2-example/examples/basic/exposed-function.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/exposed-function.js
@@ -0,0 +1,181 @@
+/* eslint no-return-assign: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(63);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+class ExposedFunctionTable extends React.Component {
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
+  handleGetSelectedData = () => {
+    console.log(this.node.selectionContext.state.selected);
+  }
+
+  handleGetExpandedData = () => {
+    console.log(this.node.rowExpandContext.state.expanded);
+  }
+
+  handleGetCurrentPage = () => {
+    console.log(this.node.paginationContext.currPage);
+  }
+
+  handleGetCurrentSizePerPage = () => {
+    console.log(this.node.paginationContext.currSizePerPage);
+  }
+
+  handleGetCurrentSortColumn = () => {
+    console.log(this.node.sortContext.state.sortColumn);
+  }
+
+  handleGetCurrentSortOrder = () => {
+    console.log(this.node.sortContext.state.sortOrder);
+  }
+
+  handleGetCurrentFilter = () => {
+    console.log(this.node.filterContext.currFilters);
+  }
+
+  render() {
+    const expandRow = {
+      renderer: row => (
+        <div>
+          <p>.....</p>
+          <p>You can render anything here, also you can add additional data on every row object</p>
+          <p>expandRow.renderer callback will pass the origin row object to you</p>
+        </div>
+      ),
+      showExpandColumn: true
+    };
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
+        <BootstrapTable
+          ref={ n => this.node = n }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+          selectRow={ { mode: 'checkbox', clickToSelect: true } }
+          expandRow={ expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class ExposedFunctionTable extends React.Component {
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
+  handleGetSelectedData = () => {
+    console.log(this.node.selectionContext.state.selected);
+  }
+
+  handleGetExpandedData = () => {
+    console.log(this.node.rowExpandContext.state.expanded);
+  }
+
+  handleGetCurrentPage = () => {
+    console.log(this.node.paginationContext.currPage);
+  }
+
+  handleGetCurrentSizePerPage = () => {
+    console.log(this.node.paginationContext.currSizePerPage);
+  }
+
+  handleGetCurrentSortColumn = () => {
+    console.log(this.node.sortContext.state.sortColumn);
+  }
+
+  handleGetCurrentSortOrder = () => {
+    console.log(this.node.sortContext.state.sortOrder);
+  }
+
+  handleGetCurrentFilter = () => {
+    console.log(this.node.filterContext.currFilters);
+  }
+
+  render() {
+    const expandRow = {
+      renderer: row => (
+        <div>
+          <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+          <p>You can render anything here, also you can add additional data on every row object</p>
+          <p>expandRow.renderer callback will pass the origin row object to you</p>
+        </div>
+      ),
+      showExpandColumn: true
+    };
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
+        <BootstrapTable
+          ref={ n => this.node = n }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+          selectRow={ { mode: 'checkbox', clickToSelect: true } }
+          expandRow={ expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}