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

199 lines
4.0 KiB
Markdown
Raw Normal View History

2016-11-21 11:29:55 +08:00
---
order: 22
title:
en-US: Editable Cells
zh-CN: 可编辑单元格
---
## zh-CN
带单元格编辑功能的表格。
## en-US
Table with editable cells.
2017-01-19 15:19:03 +08:00
````__react
2016-11-21 11:29:55 +08:00
import { Table, Input, Icon, Button, Popconfirm } from 'antd';
class EditableCell extends React.Component {
state = {
value: this.props.value,
editable: false,
}
handleChange = (e) => {
const value = e.target.value;
this.setState({ value });
}
check = () => {
this.setState({ editable: false });
if (this.props.onChange) {
this.props.onChange(this.state.value);
}
}
edit = () => {
this.setState({ editable: true });
}
render() {
const { value, editable } = this.state;
return (<div className="editable-cell">
{
editable ?
<div className="editable-cell-input-wrapper">
<Input
value={value}
onChange={this.handleChange}
onPressEnter={this.check}
/>
<Icon
type="check"
className="editable-cell-icon-check"
onClick={this.check}
/>
</div>
:
<div className="editable-cell-text-wrapper">
{value || ' '}
<Icon
type="edit"
className="editable-cell-icon"
onClick={this.edit}
/>
</div>
}
</div>);
}
}
class EditableTable extends React.Component {
constructor(props) {
super(props);
this.columns = [{
title: 'name',
dataIndex: 'name',
width: '30%',
render: (text, record, index) => (
<EditableCell
value={text}
onChange={this.onCellChange(index, 'name')}
/>
),
}, {
title: 'age',
dataIndex: 'age',
}, {
title: 'address',
dataIndex: 'address',
}, {
title: 'operation',
dataIndex: 'operation',
render: (text, record, index) => {
return (
this.state.dataSource.length > 1 ?
(
2017-02-08 14:42:17 +08:00
<Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(index)}>
2016-11-21 11:29:55 +08:00
<a href="#">Delete</a>
</Popconfirm>
) : null
);
},
}];
this.state = {
dataSource: [{
key: '0',
name: 'Edward King 0',
age: '32',
address: 'London, Park Lane no. 0',
}, {
key: '1',
name: 'Edward King 1',
age: '32',
address: 'London, Park Lane no. 1',
}],
count: 2,
};
}
onCellChange = (index, key) => {
return (value) => {
const dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
this.setState({ dataSource });
};
}
onDelete = (index) => {
2017-02-08 14:42:17 +08:00
const dataSource = [...this.state.dataSource];
dataSource.splice(index, 1);
this.setState({ dataSource });
2016-11-21 11:29:55 +08:00
}
handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: `Edward King ${count}`,
age: 32,
address: `London, Park Lane no. ${count}`,
};
this.setState({
dataSource: [...dataSource, newData],
count: count + 1,
});
}
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (<div>
2017-02-04 22:35:33 +08:00
<Button className="editable-add-btn" onClick={this.handleAdd}>Add</Button>
2016-11-21 11:29:55 +08:00
<Table bordered dataSource={dataSource} columns={columns} />
</div>);
}
}
ReactDOM.render(<EditableTable />, mountNode);
````
````css
.editable-cell {
position: relative;
}
.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
padding-right: 24px;
}
.editable-cell-text-wrapper {
padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
position: absolute;
right: 0;
width: 20px;
cursor: pointer;
}
.editable-cell-icon {
line-height: 18px;
display: none;
}
.editable-cell-icon-check {
line-height: 28px;
}
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
color:#2db7f5;
}
.editable-add-btn {
margin-bottom: 8px;
}
````