ant-design/components/table/demo/edit-row.md

136 lines
3.3 KiB
Markdown
Raw Normal View History

2016-11-21 11:29:55 +08:00
---
order: 23
title:
en-US: Editable Rows
zh-CN: 可编辑行
---
## zh-CN
带行编辑功能的表格。
## en-US
Table with editable rows.
2017-02-13 10:55:53 +08:00
````jsx
2016-11-21 11:29:55 +08:00
import { Table, Input, Popconfirm } from 'antd';
2017-11-07 21:02:28 +08:00
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
2016-11-21 11:29:55 +08:00
}
2017-11-07 21:02:28 +08:00
const EditableCell = ({ editable, value, onChange }) => (
<div>
{editable
? <Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
: value
}
</div>
);
2016-11-21 11:29:55 +08:00
class EditableTable extends React.Component {
constructor(props) {
super(props);
this.columns = [{
title: 'name',
dataIndex: 'name',
width: '25%',
2017-11-07 21:02:28 +08:00
render: (text, record) => this.renderColumns(text, record, 'name'),
2016-11-21 11:29:55 +08:00
}, {
title: 'age',
dataIndex: 'age',
width: '15%',
2017-11-07 21:02:28 +08:00
render: (text, record) => this.renderColumns(text, record, 'age'),
2016-11-21 11:29:55 +08:00
}, {
title: 'address',
dataIndex: 'address',
width: '40%',
2017-11-07 21:02:28 +08:00
render: (text, record) => this.renderColumns(text, record, 'address'),
2016-11-21 11:29:55 +08:00
}, {
title: 'operation',
dataIndex: 'operation',
2017-11-07 21:02:28 +08:00
render: (text, record) => {
const { editable } = record;
2017-02-23 11:45:48 +08:00
return (
<div className="editable-row-operations">
{
editable ?
<span>
2017-11-07 21:02:28 +08:00
<a onClick={() => this.save(record.key)}>Save</a>
<Popconfirm title="Sure to cancel?" onConfirm={() => this.cancel(record.key)}>
2017-02-23 11:45:48 +08:00
<a>Cancel</a>
</Popconfirm>
</span>
2017-11-07 21:02:28 +08:00
: <a onClick={() => this.edit(record.key)}>Edit</a>
2017-02-23 11:45:48 +08:00
}
</div>
);
2016-11-21 11:29:55 +08:00
},
}];
2017-11-07 21:02:28 +08:00
this.state = { data };
this.cacheData = data.map(item => ({ ...item }));
}
renderColumns(text, record, column) {
return (
<EditableCell
editable={record.editable}
value={text}
onChange={value => this.handleChange(value, record.key, column)}
/>
);
2016-11-21 11:29:55 +08:00
}
2017-11-07 21:02:28 +08:00
handleChange(value, key, column) {
const newData = [...this.state.data];
const target = newData.filter(item => key === item.key)[0];
if (target) {
target[column] = value;
this.setState({ data: newData });
2016-11-21 11:29:55 +08:00
}
}
2017-11-07 21:02:28 +08:00
edit(key) {
const newData = [...this.state.data];
const target = newData.filter(item => key === item.key)[0];
if (target) {
target.editable = true;
this.setState({ data: newData });
}
2016-11-21 11:29:55 +08:00
}
2017-11-07 21:02:28 +08:00
save(key) {
const newData = [...this.state.data];
const target = newData.filter(item => key === item.key)[0];
if (target) {
delete target.editable;
this.setState({ data: newData });
this.cacheData = newData.map(item => ({ ...item }));
}
2016-11-21 11:29:55 +08:00
}
2017-11-07 21:02:28 +08:00
cancel(key) {
const newData = [...this.state.data];
const target = newData.filter(item => key === item.key)[0];
if (target) {
Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
delete target.editable;
this.setState({ data: newData });
}
2016-11-21 11:29:55 +08:00
}
render() {
2017-11-07 21:02:28 +08:00
return <Table bordered dataSource={this.state.data} columns={this.columns} />;
2016-11-21 11:29:55 +08:00
}
}
ReactDOM.render(<EditableTable />, mountNode);
````
````css
.editable-row-operations a {
margin-right: 8px;
}
````