源代码
import React from 'react';
import { DataGrid, GridColumn, ComboBox } from 'rc-easyui';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.getData(),
selectionOptions: [
{ value: null, text: "None" },
{ value: "single", text: "Single Selection" },
{ value: "multiple", text: "Multiple Selection" },
{ value: "cell", text: "Cell Selection" },
{ value: "multicell", text: "Multiple Cells" }
],
selectionMode: null,
selection: null
}
}
getData() {
return [
{ "code": "FI-SW-01", "name": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr": "Large", "itemid": "EST-1" },
{ "code": "K9-DL-01", "name": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr": "Spotted Adult Female", "itemid": "EST-10" },
{ "code": "RP-SN-01", "name": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr": "Venomless", "itemid": "EST-11" },
{ "code": "RP-SN-01", "name": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr": "Rattleless", "itemid": "EST-12" },
{ "code": "RP-LI-02", "name": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr": "Green Adult", "itemid": "EST-13" },
{ "code": "FL-DSH-01", "name": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr": "Tailless", "itemid": "EST-14" },
{ "code": "FL-DSH-01", "name": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr": "With tail", "itemid": "EST-15" },
{ "code": "FL-DLH-02", "name": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr": "Adult Female", "itemid": "EST-16" },
{ "code": "FL-DLH-02", "name": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr": "Adult Male", "itemid": "EST-17" },
{ "code": "AV-CB-01", "name": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr": "Adult Male", "itemid": "EST-18" }
]
}
selectionInfo() {
const { selection, selectionMode } = this.state;
if (!selection) {
return null;
}
if (selectionMode === "single") {
return selection.itemid;
} else if (selectionMode === "multiple") {
return selection.map(function (row) { return row.itemid }).join(",");
} else if (selectionMode === "cell") {
return selection.row[selection.column.props.field];
} else {
return selection.map(function (c) { return c.row[c.column.props.field] }).join(",");
}
}
render() {
return (
<div>
<h2>DataGrid Selection</h2>
<div style={{ marginBottom: 10 }}>
<ComboBox placeholder="Select a Selection Mode"
data={this.state.selectionOptions}
editable={false}
panelStyle={{ height: 'auto' }}
value={this.state.selectionMode}
onChange={(value) => this.setState({ selectionMode: value, selection: null })}
>
</ComboBox>
</div>
<DataGrid data={this.state.data} style={{ height: 250 }}
selectionMode={this.state.selectionMode}
selection={this.state.selection}
onSelectionChange={(selection) => this.setState({ selection: selection })}
>
<GridColumn field="itemid" title="Item ID"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
<GridColumn field="status" title="Status" align="center"></GridColumn>
</DataGrid>
<p>You selected: {this.selectionInfo()}</p>
</div>
);
}
}
export default App;