mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
docs: Table add editable demos (#3922)
This commit is contained in:
ddcat1115
Benjy Cui
parent
51971be12a
commit
cd2a1438b7
200
components/table/demo/edit-cell.md
Normal file
200
components/table/demo/edit-cell.md
Normal file
@ -0,0 +1,200 @@
|
||||
---
|
||||
order: 22
|
||||
title:
|
||||
en-US: Editable Cells
|
||||
zh-CN: 可编辑单元格
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
带单元格编辑功能的表格。
|
||||
|
||||
## en-US
|
||||
|
||||
Table with editable cells.
|
||||
|
||||
````jsx
|
||||
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 ?
|
||||
(
|
||||
<Popconfirm title="Sure to delete?" onConfirm={this.onDelete(index)}>
|
||||
<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) => {
|
||||
return () => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource.splice(index, 1);
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
}
|
||||
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>
|
||||
<Button className="editable-add-btn" type="ghost" onClick={this.handleAdd}>Add</Button>
|
||||
<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;
|
||||
}
|
||||
````
|
||||
192
components/table/demo/edit-row.md
Normal file
192
components/table/demo/edit-row.md
Normal file
@ -0,0 +1,192 @@
|
||||
---
|
||||
order: 23
|
||||
title:
|
||||
en-US: Editable Rows
|
||||
zh-CN: 可编辑行
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
带行编辑功能的表格。
|
||||
|
||||
## en-US
|
||||
|
||||
Table with editable rows.
|
||||
|
||||
````jsx
|
||||
import { Table, Input, Popconfirm } from 'antd';
|
||||
|
||||
class EditableCell extends React.Component {
|
||||
state = {
|
||||
value: this.props.value,
|
||||
editable: this.props.editable || false,
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.editable !== this.state.editable) {
|
||||
this.setState({ editable: nextProps.editable });
|
||||
if (nextProps.editable) {
|
||||
this.cacheValue = this.state.value;
|
||||
}
|
||||
}
|
||||
if (nextProps.status && nextProps.status !== this.props.status) {
|
||||
if (nextProps.status === 'save') {
|
||||
this.props.onChange(this.state.value);
|
||||
} else if (nextProps.status === 'cancel') {
|
||||
this.setState({ value: this.cacheValue });
|
||||
this.props.onChange(this.cacheValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return nextProps.editable !== this.state.editable ||
|
||||
nextState.value !== this.state.value;
|
||||
}
|
||||
handleChange(e) {
|
||||
const value = e.target.value;
|
||||
this.setState({ value });
|
||||
}
|
||||
render() {
|
||||
const { value, editable } = this.state;
|
||||
return (<div>
|
||||
{
|
||||
editable ?
|
||||
<div>
|
||||
<Input
|
||||
value={value}
|
||||
onChange={e => this.handleChange(e)}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<div className="editable-row-text">
|
||||
{value || ' '}
|
||||
</div>
|
||||
}
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
class EditableTable extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.columns = [{
|
||||
title: 'name',
|
||||
dataIndex: 'name',
|
||||
width: '25%',
|
||||
render: (text, record, index) => this.renderColumns(this.state.data, index, 'name', text),
|
||||
}, {
|
||||
title: 'age',
|
||||
dataIndex: 'age',
|
||||
width: '15%',
|
||||
render: (text, record, index) => this.renderColumns(this.state.data, index, 'age', text),
|
||||
}, {
|
||||
title: 'address',
|
||||
dataIndex: 'address',
|
||||
width: '40%',
|
||||
render: (text, record, index) => this.renderColumns(this.state.data, index, 'address', text),
|
||||
}, {
|
||||
title: 'operation',
|
||||
dataIndex: 'operation',
|
||||
render: (text, record, index) => {
|
||||
const { editable } = this.state.data[index].name;
|
||||
return (<div className="editable-row-operations">
|
||||
{
|
||||
editable ?
|
||||
<span>
|
||||
<a onClick={() => this.editDone(index, 'save')}>Save</a>
|
||||
<Popconfirm title="Sure to cancel?" onConfirm={() => this.editDone(index, 'cancel')}>
|
||||
<a>Cancel</a>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
:
|
||||
<span>
|
||||
<a onClick={() => this.edit(index)}>Edit</a>
|
||||
</span>
|
||||
}
|
||||
</div>);
|
||||
},
|
||||
}];
|
||||
this.state = {
|
||||
data: [{
|
||||
key: '0',
|
||||
name: {
|
||||
editable: false,
|
||||
value: 'Edward King 0',
|
||||
},
|
||||
age: {
|
||||
editable: false,
|
||||
value: '32',
|
||||
},
|
||||
address: {
|
||||
value: 'London, Park Lane no. 0',
|
||||
},
|
||||
}],
|
||||
};
|
||||
}
|
||||
renderColumns(data, index, key, text) {
|
||||
const { editable, status } = data[index][key];
|
||||
if (typeof editable === 'undefined') {
|
||||
return text;
|
||||
}
|
||||
return (<EditableCell
|
||||
editable={editable}
|
||||
value={text}
|
||||
onChange={value => this.handleChange(key, index, value)}
|
||||
status={status}
|
||||
/>);
|
||||
}
|
||||
handleChange(key, index, value) {
|
||||
const { data } = this.state;
|
||||
data[index][key].value = value;
|
||||
this.setState({ data });
|
||||
}
|
||||
edit(index) {
|
||||
const { data } = this.state;
|
||||
Object.keys(data[index]).forEach((item) => {
|
||||
if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
|
||||
data[index][item].editable = true;
|
||||
}
|
||||
});
|
||||
this.setState({ data });
|
||||
}
|
||||
editDone(index, type) {
|
||||
const { data } = this.state;
|
||||
Object.keys(data[index]).forEach((item) => {
|
||||
if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
|
||||
data[index][item].editable = false;
|
||||
data[index][item].status = type;
|
||||
}
|
||||
});
|
||||
this.setState({ data }, () => {
|
||||
Object.keys(data[index]).forEach((item) => {
|
||||
if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
|
||||
delete data[index][item].status;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const { data } = this.state;
|
||||
const dataSource = data.map((item) => {
|
||||
const obj = {};
|
||||
Object.keys(item).forEach((key) => {
|
||||
obj[key] = key === 'key' ? item[key] : item[key].value;
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
const columns = this.columns;
|
||||
return <Table bordered dataSource={dataSource} columns={columns} />;
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<EditableTable />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.editable-row-text {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.editable-row-operations a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
````
|
||||
Loading…
Reference in New Issue
Block a user