Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
import React from 'react';
import { DataList } from 'rc-easyui';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0,
      pageNumber: 1,
      pageSize: 20,
      data: [],
      selection: null
    }
  }
  componentDidMount() {
    let result = this.getData();
    this.setState({
      total: result.total,
      data: result.rows
    })
  }
  getData() {
    let total = 10000;
    let data = [];
    for (let i = 1; i <= total; 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,
      rows: data
    };
  }
  handleSelectionChange(selection) {
    this.setState({ selection: selection })
  }
  renderItem({ row, rowIndex }) {
    return (
      <div className="product">
        <div className="num">{rowIndex + 1}</div>
        <div className="detail">
          <p>{row.inv} - {row.name}</p>
          <p>Amount: {row.amount}</p>
          <p>Price: {row.price}</p>
        </div>
      </div>
    )
  }
  render() {
    return (
      <div>
        <h2>Virtual Scroll</h2>
        <DataList
          style={{ width: 550, height: 250 }}
          {...this.state}
          virtualScroll
          rowHeight={75}
          selectionMode="single"
          onSelectionChange={this.handleSelectionChange.bind(this)}
          renderItem={this.renderItem.bind(this)}
        />
        <p>You selected: {JSON.stringify(this.state.selection)}</p>
      </div>
    );
  }
}

export default App;