Skip to content

Commit 7e2bdd5

Browse files
luo0412luo0412
committed
small change
1 parent 8fd5354 commit 7e2bdd5

File tree

5 files changed

+218
-85
lines changed

5 files changed

+218
-85
lines changed

‎_antd/table/editable/editable-row-cell-only-sth-mistake.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ class EditableTable extends React.Component {
5757
constructor(props) {
5858
super(props);
5959
this.state = {
60-
data,
60+
data: data,
6161
editingKey: ''
6262
};
6363

‎_antd/table/editable/editable-row-unit.js‎

Lines changed: 107 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -6,49 +6,61 @@ const EditableContext = React.createContext();
66

77
const EditableRow = ({ form, ...props }) => (
88
<EditableContext.Provider value={form}>
9-
<tr {...props} />
9+
<tr {...props}
10+
// // 鼠标移入行
11+
// onMouseEnter={event => {
12+
//
13+
// }}
14+
// onMouseLeave={event => {
15+
// handleSave(form, record.id, record)
16+
// }}
17+
/>
1018
</EditableContext.Provider>
1119
);
1220

13-
let formRef = null
21+
22+
const data = [];
23+
for (let i = 0; i <1000; i++) {
24+
data.push({
25+
id: i.toString(),
26+
name: `${i}`,
27+
age: 32,
28+
address: `${i}` * 10,
29+
});
30+
}
31+
32+
const globalForm = {}
1433

1534
const EditableFormRow = Form.create()(EditableRow);
1635

1736
class EditableCell extends React.Component {
1837

1938
renderCell = form => {
20-
const { children, dataIndex, record, id, editingKey } = this.props;
39+
const { children, dataIndex, record, id, editingKey, handleSave, handleSyncEditingKey } = this.props;
2140

22-
if (editingKey === record.id) {
23-
formRef = form
41+
if (!globalForm[editingKey]) {
42+
globalForm[editingKey] = form
43+
// handleSyncEditingKey(record.id, form)
2444
}
2545

2646
// debugger
27-
return (editingKey === record.id) ? (
47+
return (
2848
<Form.Item style={{ margin: 0 }}>
2949
{form.getFieldDecorator(dataIndex, {
3050
rules: [
3151
// {
3252
// required: true,
33-
// message: `${title} is required.`,
53+
// message: `必填`,
3454
// },
3555
],
3656
initialValue: record[dataIndex],
3757
})(<Input
3858
ref={node => (this.input = node)}
39-
// onPressEnter={this.save}
40-
// onBlur={this.save}
59+
onPressEnter={() => { handleSave(record.id, record) }}
60+
onBlur={() => { handleSave(record.id, record) }}
4161
/>)}
4262
</Form.Item>
43-
) : (
44-
<div
45-
className="editable-cell-value-wrap"
46-
style={{ paddingRight: 24 }}
47-
// onClick={this.toggleEdit}
48-
>
49-
{children}
50-
</div>
51-
);
63+
)
5264
};
5365

5466
render() {
@@ -63,6 +75,8 @@ class EditableCell extends React.Component {
6375

6476
editingKey,
6577
handleSave,
78+
handleSyncEditingKey,
79+
6680
...restProps
6781
} = this.props;
6882

@@ -83,70 +97,72 @@ class EditableTable extends React.Component {
8397
super(props);
8498
this.columns = [
8599
{
86-
title: 'name',
100+
title: '元素1',
87101
dataIndex: 'name',
88102
// width: '30%',
89103
key: 0,
90104
editable: true,
105+
width: 100,
91106
},
92107
{
93-
title: 'age',
108+
title: '元素2',
94109
dataIndex: 'age',
95110
editable: true,
96111
key: 1,
112+
width: 100,
97113
},
98114
{
99-
title: 'address',
115+
title: '计算结果',
100116
dataIndex: 'address',
101-
editable: true,
117+
// editable: true,
102118
key: 2,
103119
// ellipsis: true,
120+
width: 200,
104121
},
105122
];
106123

107124
this.state = {
108-
data: [
109-
{
110-
id: '0',
111-
name: 'Edward King 0',
112-
age: '32',
113-
address: 'London, Park Lane no. 0',
114-
},
115-
{
116-
id: '1',
117-
name: 'Edward King 1',
118-
age: '32',
119-
address: 'London, Park Lane no. 1',
120-
},
121-
],
122-
count: 2,
125+
data: data,
123126
editingKey: '',
127+
loading: false,
124128
};
125129

126-
}
127-
130+
this.formRef = {}
128131

129-
handleSave = (key, record) => {
132+
}
130133

131-
// debugger
132-
formRef && formRef.validateFields((error, row) => {
133-
if (error) {
134-
this.setState({
135-
editingKey: ''
136-
})
137-
return;
138-
}
134+
handleSyncEditingKey = (key) => {
135+
this.setState({
136+
editingKey: key,
137+
})
138+
}
139+
140+
handleSave = async (key, record) => {
141+
142+
if (globalForm[key]) {
143+
const row = await globalForm[key].validateFields().catch(error => console.log(error))
144+
// console.log(row)
145+
146+
// if (error) {
147+
// this.setState({
148+
// editingKey: ''
149+
// })
150+
// return;
151+
// }
139152

140153
if (isEqual(Object.assign({}, record, row), record)) {
141-
console.log('数据没啥变化')
154+
// console.log('数据没啥变化')
142155
this.setState({
143156
editingKey: ''
144157
})
158+
145159
return;
146160
}
147161

162+
148163
console.log(Object.assign({}, record, row))
149-
console.log(record)
164+
// console.log(record)
165+
console.log('--------------------')
150166
const newData = [...this.state.data];
151167
const index = newData.findIndex(item => key === item.id);
152168
console.log(`修改第${index}行`)
@@ -158,15 +174,25 @@ class EditableTable extends React.Component {
158174
...row,
159175
});
160176

161-
this.setState({
162-
data: newData,
163-
editingKey: ''
164-
});
177+
// 立刻更新界面
178+
// this.setState({
179+
// data: newData,
180+
// editingKey: '',
181+
// // loading: true,
182+
// });
183+
184+
// 假装是请求回来的结果
185+
setTimeout(() => {
186+
console.log('我更新了~~')
187+
this.setState({
188+
data: newData,
189+
editingKey: '',
190+
// loading: false
191+
});
192+
}, 1000)
193+
194+
return
165195

166-
// console.log({
167-
// ...item,
168-
// ...row,
169-
// })
170196
}
171197

172198
// else {
@@ -179,25 +205,17 @@ class EditableTable extends React.Component {
179205
})
180206
return;
181207

182-
});
208+
}
183209

184210
}
185211

186-
// handleSave = row => {
187-
// const newData = [...this.state.data];
188-
// const index = newData.findIndex(item => row.key === item.key);
189-
// const item = newData[index];
190-
// newData.splice(index, 1, {
191-
// ...item,
192-
// ...row,
193-
// });
194-
// this.setState({ data: newData });
195-
// };
212+
196213

197214
render() {
198215
const {
199216
data,
200217
editingKey,
218+
loading,
201219
} = this.state;
202220

203221
const components = {
@@ -222,6 +240,7 @@ class EditableTable extends React.Component {
222240
editingKey: editingKey,
223241
id: col.id,
224242
handleSave: this.handleSave,
243+
handleSyncEditingKey: this.handleSyncEditingKey,
225244
}),
226245
};
227246
});
@@ -234,24 +253,29 @@ class EditableTable extends React.Component {
234253
components={components}
235254
rowClassName={() => 'editable-row'}
236255
bordered
256+
loading={loading}
237257
dataSource={data}
238258
columns={columns}
239259
pagination={false}
240260
rowKey={(record) => record.id }
241-
onRow={record => {
242-
return {
243-
// 鼠标移入行
244-
onMouseEnter: event => {
245-
// debugger
246-
this.setState({
247-
editingKey: record.id
248-
})
249-
},
250-
onMouseLeave: event => {
251-
this.handleSave(editingKey, record)
252-
},
253-
};
254-
}}
261+
// onRow={record => {
262+
// return {
263+
// // // 鼠标移入行
264+
// // onMouseEnter: event => {
265+
// // // console.log(event)
266+
// // // this.setState({
267+
// // // editingKey: record.id
268+
// // // })
269+
// // },
270+
// // onMouseLeave: event => {
271+
// // this.handleSave(editingKey, record)
272+
// // },
273+
//
274+
// // handleSave: this.handleSave,
275+
// // handleSyncEditingKey: this.handleSyncEditingKey,
276+
// // record: record,
277+
// };
278+
// }}
255279
/>
256280
</div>
257281
);

‎_antd/tree/.gitkeep‎

Whitespace-only changes.

0 commit comments

Comments
 (0)