源代码
import React from 'react';
import { TreeGrid, GridColumn } from 'rc-easyui';
class App extends React.Component {
constructor() {
super();
this.state = {
data: null
}
}
componentDidMount() {
this.getData().then(data => {
this.setState({ data: data })
})
}
handleRowExpand(row) {
if (!row.children) {
this.getData(row.id).then(data => {
row.children = data;
this.setState({})
})
}
}
getData(id = 0) {
const url = 'https://www.jeasyui.com/demo/main/treegrid3_getdata.php';
return new Promise((resolve, reject) => {
fetch(url, {
method: 'post',
mode: 'cors',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
body: 'id=' + id
}).then(res => {
if (res.status === 200) {
return res.json();
} else {
throw new Error();
}
}).then(data => {
resolve(data);
}).catch(err => {
reject(err);
})
})
}
render() {
const formatDollar = ({value}) => {
return value ? '$'+value : ''
}
return (
<div>
<h2>Lazy Load</h2>
<TreeGrid
style={{ height: 250 }}
data={this.state.data}
idField="id"
treeField="name"
onRowExpand={this.handleRowExpand.bind(this)}
>
<GridColumn field="name" title="Name" width="40%"></GridColumn>
<GridColumn field="quantity" title="Quantity" align="right"></GridColumn>
<GridColumn field="price" title="Price" align="right" render={formatDollar}></GridColumn>
<GridColumn field="total" title="Total" align="right" render={formatDollar}></GridColumn>
</TreeGrid>
</div>
);
}
}
export default App;