Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
import React from 'react';
import { DataGrid, GridColumn, ComboBox, Label } from 'rc-easyui';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0,
      pageNumber: 1,
      pageSize: 20,
      data: [],
      loading: false,
      pagePosition: "bottom",
      options: [
        { value: "bottom", text: "Bottom" },
        { value: "top", text: "Top" },
        { value: "both", text: "Both" }
      ]
    }
  }
  componentDidMount() {
    this.loadPage(this.state.pageNumber, this.state.pageSize)
  }
  loadPage(pageNumber, pageSize) {
    this.setState({ loading: true })
    setTimeout(() => {
      let result = this.getData(pageNumber, pageSize);
      this.setState(Object.assign({}, result, {
        data: result.rows,
        loading: false
      }))
    }, 1000);
  }
  getData(pageNumber, pageSize) {
    let total = 100000;
    let data = [];
    let start = (pageNumber - 1) * pageSize;
    for (let i = start + 1; i <= start + pageSize; i++) {
      let amount = Math.floor(Math.random() * 1000);
      let price = Math.floor(Math.random() * 1000);
      data.push({
        inv: "Inv No " + i,
        name: "Name " + i,
        amount: amount,
        price: price,
        cost: amount * price,
        note: "Note " + i
      });
    }
    return {
      total: total,
      pageNumber: pageNumber,
      pageSize: pageSize,
      rows: data
    };
  }
  handlePageChange(event) {
    this.loadPage(event.pageNumber, event.pageSize)
  }
  render() {
    return (
      <div>
        <h2>Pagination - Lazy Load</h2>
        <div style={{ marginBottom: 10 }}>
          <Label htmlFor="c1">Pager on: </Label>
          <ComboBox inputId="c1" style={{ width: 120 }}
            data={this.state.options}
            editable={false}
            panelStyle={{ height: 'auto' }}
            value={this.state.pagePosition}
            onChange={(value) => this.setState({ pagePosition: value })}
          />
        </div>
        <DataGrid
          style={{ height: 250 }}
          pagination
          lazy
          {...this.state}
          onPageChange={this.handlePageChange.bind(this)}
        >
          <GridColumn field="inv" title="Inv No"></GridColumn>
          <GridColumn field="name" title="Name"></GridColumn>
          <GridColumn field="amount" title="Amount" align="right"></GridColumn>
          <GridColumn field="price" title="Price" align="right"></GridColumn>
          <GridColumn field="cost" title="Cost" align="right"></GridColumn>
          <GridColumn field="note" title="Note"></GridColumn>
        </DataGrid>
      </div>
    );
  }
}

export default App;