import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, InputNumber, Popconfirm, Form } from "antd";
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`
});
}
const EditableContext = React.createContext();
class EditableCell extends React.Component {
getInput = () => {
if (this.props.inputType === "number") {
return <InputNumber />;
}
return <Input />;
};
renderCell = ({ getFieldDecorator }) => {
const {
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
} = this.props;
return (
<td {...restProps}>
{editing ? (
<Form.Item style={{ margin: 0 }}>
{getFieldDecorator(dataIndex, {
rules: [
{
required: true,
message: `Please Input ${title}!`
}
],
initialValue: record[dataIndex]
})(this.getInput())}
</Form.Item>
) : (
children
)}
</td>
);
};
render() {
return (
<EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
);
}
}
class EditableTable extends React.Component {
constructor(props) {
super(props);
this.state = { data, editingKey: "" };
}
isEditing = (record) => record.key === this.state.editingKey;
cancel = () => {
this.setState({ editingKey: "" });
};
save = (form, key) => {
form.validateFields((error, row) => {
if (error) {
return;
}
const newData = [...this.state.data];
const index = newData.findIndex((item) => key === item.key);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, {
...item,
...row
});
this.setState({ data: newData, editingKey: "" });
} else {
newData.push(row);
this.setState({ data: newData, editingKey: "" });
}
});
};
edit = (key) => {
this.setState({ editingKey: key });
};
render() {
const columns = [
{
title: "name",
dataIndex: "name",
width: "25%",
editable: true
},
{
title: "age",
dataIndex: "age",
width: "15%",
editable: true
},
{
title: "address",
dataIndex: "address",
width: "40%",
editable: true
},
{
title: "operation",
dataIndex: "operation",
render: (text, record) => {
const { editingKey } = this.state;
const editable = this.isEditing(record);
return editable ? (
<span>
<EditableContext.Consumer>
{(form) => (
<a
onClick={() => this.save(form, record.key)}
style={{ marginRight: 8 }}
>
Save
</a>
)}
</EditableContext.Consumer>
<Popconfirm
title="Sure to cancel?"
onConfirm={() => this.cancel(record.key)}
>
<a>Cancel</a>
</Popconfirm>
</span>
) : (
<a
disabled={editingKey !== ""}
onClick={() => this.edit(record.key)}
>
Edit
</a>
);
}
}
];
const components = {
body: {
cell: EditableCell
}
};
const newcolumns = columns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record) => ({
record,
inputType: col.dataIndex,
dataIndex: col.dataIndex,
title: col.title,
editing: this.isEditing(record)
})
};
});
return (
<EditableContext.Provider value={this.props.form}>
<Table
components={components}
bordered
dataSource={this.state.data}
columns={newcolumns}
rowClassName="editable-row"
pagination={{
onChange: this.cancel
}}
/>
</EditableContext.Provider>
);
}
}
const EditableFormTable = Form.create()(EditableTable);
ReactDOM.render(<EditableFormTable />, document.getElementById("container"));
ant design可編輯表格
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
https://stackoverflow.com/questions/419163/what-does-if-name-main-do
https://stackoverflow.com/questions/419163/what-does-if-name-main-do