源代码
import React from 'react';
import { DataGrid, GridColumn } from 'rc-easyui';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
total: 1000,
pageSize: 20,
data: [],
loading: false
}
}
componentDidMount() {
this.loadData(this.state.total);
}
loadData(total) {
this.setState({ loading: true })
setTimeout(() => {
this.setState({
data: this.getData(total),
loading: false
})
}, 300)
}
getData(total) {
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 data;
}
render() {
return (
<div>
<h2>Virtual Scroll</h2>
<DataGrid {...this.state} virtualScroll style={{ height: 250 }}>
<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;