Merge branch '99'

AllenFang · Oct 25, 2015 · 817c62e · 817c62e
2 parents 4c81bd1 + 6d2a70b
commit 817c62e
Show file tree

Hide file tree

Showing 9 changed files with 492 additions and 244 deletions.
diff --git a/examples/js/pagination/default-pagination-table.js b/examples/js/pagination/default-pagination-table.js
@@ -19,14 +19,23 @@ function addProducts(quantity) {
 
 addProducts(70);
 
-export default class DefaultPaginationTable extends React.Component{
-  render(){
+export default class DefaultPaginationTable extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
     return (
-      <BootstrapTable data={products} pagination={true}>
+      <div>
+        <BootstrapTable
+          data={products}
+          pagination
+        >
           <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
           <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
           <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
-      </BootstrapTable>
+        </BootstrapTable>
+      </div>
     );
   }
 };
diff --git a/examples/js/pagination/demo.js b/examples/js/pagination/demo.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import DefaultPaginationTable from './default-pagination-table';
 import CustomPaginationTable from './custom-pagination-table';
+import PaginationHookTable from './pagination-hook-table';
 
 class Demo extends React.Component {
   render() {
@@ -24,6 +25,15 @@ 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">Pagination Hooks(onPageChange) Example</div>
+            <div className="panel-body">
+              <h5>Source in /examples/js/pagination/pagination-hook-table.js</h5>
+              <PaginationHookTable />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

diff --git a/examples/js/pagination/pagination-hook-table.js b/examples/js/pagination/pagination-hook-table.js
@@ -0,0 +1,59 @@
+'use strict';
+import React from 'react';
+import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
+
+
+var products = [];
+
+function addProducts(quantity) {
+  var startId = products.length;
+  for (var i = 0; i < quantity; i++) {
+    var id = startId + i;
+    products.push({
+      id: id,
+      name: "Item name " + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(70);
+
+export default class PaginationHookTable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      page: undefined,
+      sizePerPage: undefined,
+    };
+
+    this.options = {
+      onPageChange: this.onPageChange.bind(this),
+    };
+  }
+
+  onPageChange(page, sizePerPage) {
+    this.setState({
+      page,
+      sizePerPage,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+      <p style={{color: 'red'}}>pagination: page={this.state.page}, sizePerPage={this.state.sizePerPage}</p>
+        <BootstrapTable
+          data={products}
+          pagination
+          options={this.options}
+        >
+          <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
+        </BootstrapTable>
+      </div>
+    );
+  }
+};
diff --git a/examples/js/sort/default-sort-table.js b/examples/js/sort/default-sort-table.js
@@ -19,20 +19,25 @@ function addProducts(quantity) {
 
 addProducts(5);
 
+export default class DefaultSortTable extends React.Component {
+  constructor(props) {
+    super(props);
 
-var options = {
-  sortName: "name",  //default sort column name
-  sortOrder: "desc"  //default sort order
-};
+    this.options = {
+      sortName: "name",  //default sort column name
+      sortOrder: "desc",  //default sort order
+    };
+  }
 
-export default class DefaultSortTable extends React.Component{
-  render(){
+  render() {
     return (
-      <BootstrapTable data={products} options={options}>
+      <div>
+        <BootstrapTable data={products} options={this.options}>
           <TableHeaderColumn dataField="id" isKey={true} dataSort={true}>Product ID</TableHeaderColumn>
           <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
           <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
-      </BootstrapTable>
+        </BootstrapTable>
+      </div>
     );
   }
 };
diff --git a/examples/js/sort/demo.js b/examples/js/sort/demo.js
@@ -2,6 +2,7 @@ import React from 'react';
 import SortTable from './sort-table';
 import DefaultSortTable from './default-sort-table';
 import CustomSortTable from './custom-sort-table';
+import SortHookTable from './sort-hook-table';
 
 class Demo extends React.Component {
   render() {
@@ -34,6 +35,15 @@ 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">Sort Hooks(onSortChange) Example</div>
+            <div className="panel-body">
+              <h5>Source in /examples/js/sort/sort-hook-table.js</h5>
+              <SortHookTable />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

diff --git a/examples/js/sort/sort-hook-table.js b/examples/js/sort/sort-hook-table.js
@@ -0,0 +1,60 @@
+'use strict';
+import React from 'react';
+import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
+
+
+var products = [];
+
+function addProducts(quantity) {
+  var startId = products.length;
+  for (var i = 0; i < quantity; i++) {
+    var id = startId + i;
+    products.push({
+      id: id,
+      name: "Item name " + id,
+      price: 100 + i
+    });
+  }
+}
+
+addProducts(5);
+
+export default class SortHookTable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      page: undefined,
+      sizePerPage: undefined,
+      sortName: undefined,
+      sortOrder: undefined,
+    };
+
+    this.options = {
+      sortName: "name",  //default sort column name
+      sortOrder: "desc",  //default sort order
+      onSortChange: this.onSortChange.bind(this),
+    };
+  }
+
+  onSortChange(sortName, sortOrder) {
+    console.info('onSortChange', arguments);
+    this.setState({
+      sortName,
+      sortOrder,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <p style={{color: 'red'}}>sort: sortName={this.state.sortName}, sortOrder={this.state.sortOrder}</p>
+        <BootstrapTable data={products} options={this.options}>
+          <TableHeaderColumn dataField="id" isKey={true} dataSort={true}>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
+        </BootstrapTable>
+      </div>
+    );
+  }
+};