极大地提高了全表编辑示例的性能,1000+行数据下可行。

This commit is contained in:
梁才军 2019-04-28 17:38:12 +08:00
parent fc84e02875
commit 8a8f6d4bb7
4 changed files with 121 additions and 70 deletions

View File

@ -11,9 +11,18 @@ import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
const Option = Select.Option; const Option = Select.Option;
import { RefTreeWithInput } from "ref-tree"; import { RefTreeWithInput } from "ref-tree";
class StringEditCell extends PureComponent { class StringEditCell extends Component {
constructor(props, context) { constructor(props, context) {
super(props); super(props);
this.state = {
value: props.value
};
}
componentWillReceiveProps(nextProps) {
if (!nextProps.editable) {
this.setState({ value: nextProps.value });
}
} }
handleChange = value => { handleChange = value => {
@ -23,11 +32,13 @@ class StringEditCell extends PureComponent {
} else { } else {
throwError && throwError(false); throwError && throwError(false);
} }
this.setState({ value });
onChange && onChange(value); onChange && onChange(value);
}; };
render() { render() {
const { value, editable, required, colName, isEdited } = this.props; const { editable, required, colName, isEdited } = this.props;
const { value } = this.state;
let cls = "editable-cell-input-wrapper"; let cls = "editable-cell-input-wrapper";
if (required) cls += " required"; if (required) cls += " required";
if (value === "") cls += " verify-cell"; if (value === "") cls += " verify-cell";
@ -58,23 +69,34 @@ class StringEditCell extends PureComponent {
const SELECT_SOURCE = ["男", "女"]; const SELECT_SOURCE = ["男", "女"];
class SelectEditCell extends PureComponent { class SelectEditCell extends Component {
constructor(props, context) { constructor(props, context) {
super(props); super(props);
this.state = {
value: props.value
};
}
componentWillReceiveProps(nextProps) {
if (!nextProps.editable) {
this.setState({ value: nextProps.value });
}
} }
handleSelect = value => { handleSelect = value => {
this.setState({ value });
this.props.onChange && this.props.onChange(value); this.props.onChange && this.props.onChange(value);
}; };
render() { render() {
const { value, editable, isEdited } = this.props; const { editable, isEdited } = this.props;
const { value } = this.state;
let cls = "editable-cell-input-wrapper"; let cls = "editable-cell-input-wrapper";
if (isEdited) cls += " edited"; if (isEdited) cls += " edited";
return editable ? ( return editable ? (
<div className="editable-cell"> <div className="editable-cell">
<div className={cls}> <div className={cls}>
<Select value={this.props.value} onSelect={this.handleSelect}> <Select value={value} onSelect={this.handleSelect}>
{SELECT_SOURCE.map((item, index) => ( {SELECT_SOURCE.map((item, index) => (
<Option key={index} value={item}> <Option key={index} value={item}>
{item} {item}
@ -246,18 +268,29 @@ const option = {
}; };
const RefEditCell = Form.createForm()( const RefEditCell = Form.createForm()(
class RefComponentWarpper extends PureComponent { class RefComponentWarpper extends Component {
constructor(props, context) { constructor(props, context) {
super(props); super(props);
this.state = {
value: props.value
};
}
componentWillReceiveProps(nextProps) {
if (!nextProps.editable) {
this.setState({ value: nextProps.value });
}
} }
handleSelect = values => { handleSelect = values => {
this.setState({ value: values[0] });
this.props.onChange && this.props.onChange(values[0]); this.props.onChange && this.props.onChange(values[0]);
}; };
render() { render() {
const { getFieldProps, getFieldError } = this.props.form; const { getFieldProps, getFieldError } = this.props.form;
const { value, editable, required, isEdited } = this.props; const { editable, required, isEdited } = this.props;
const { value } = this.state;
let cls = "editable-cell-input-wrapper"; let cls = "editable-cell-input-wrapper";
if (required) cls += " required"; if (required) cls += " required";
if (getFieldError("refValue")) cls += " verify-cell"; if (getFieldError("refValue")) cls += " verify-cell";
@ -420,7 +453,7 @@ class Demo0505 extends Component {
]; ];
// 用于记录数据是否被修改 // 用于记录数据是否被修改
dataSource.forEach(item => item.isEdited = {}); dataSource.forEach(item => (item.isEdited = {}));
this.state = { this.state = {
dataSource: dataSource, dataSource: dataSource,
isEditingAll: false, isEditingAll: false,
@ -429,36 +462,38 @@ class Demo0505 extends Component {
}; };
// 用于记录编辑前数据 // 用于记录编辑前数据
this.originData = []; this.dataBuffer = [];
} }
edit = () => { edit = () => {
this.originData = []; this.dataBuffer = [];
// 最好使用深复制 // 最好使用深复制
this.state.dataSource.forEach(item => this.originData.push({ ...item })); this.state.dataSource.forEach((item, index) => {
this.dataBuffer.push({ ...item });
});
this.setState({ isEditingAll: true }); this.setState({ isEditingAll: true });
}; };
abortEdit = () => { abortEdit = () => {
this.originData.forEach(item => item.isEdited = {}); let originData = [...this.state.dataSource];
originData.forEach(item => (item.isEdited = {}));
this.setState({ this.setState({
isEditingAll: false, isEditingAll: false,
dataSource: [...this.originData] dataSource: originData
}); });
}; };
commitChange = () => { commitChange = () => {
if (this.state.errorEditFlag) return; if (this.state.errorEditFlag) return;
let dataSource = [...this.state.dataSource]; const newData = this.dataBuffer.map(item => {
dataSource.forEach(item => item.isEdited = {}); return Object.assign({}, item, { isEdited: {} });
this.setState({ isEditingAll: false }); });
this.setState({ isEditingAll: false, dataSource: newData });
}; };
onCellChange = (index, key) => value => { onCellChange = (index, key) => value => {
let dataSource = [...this.state.dataSource]; this.dataBuffer[index][key] = value;
dataSource[index][key] = value; this.dataBuffer[index].isEdited[key] = true;
dataSource[index].isEdited[key] = true;
this.setState({ dataSource }, () => console.table(this.originData));
}; };
throwError = isError => { throwError = isError => {
@ -466,11 +501,6 @@ class Demo0505 extends Component {
this.setState({ errorEditFlag: isError }); this.setState({ errorEditFlag: isError });
}; };
setEditedRowClass = (record, index, indent) => {
if (Object.keys(record.isEdited).length > 0) return "u-row-select";
return "";
}
render() { render() {
const { dataSource, isEditingAll } = this.state; const { dataSource, isEditingAll } = this.state;
const columns = this.columns; const columns = this.columns;
@ -496,7 +526,7 @@ class Demo0505 extends Component {
</Button> </Button>
)} )}
</div> </div>
<Table data={dataSource} columns={columns} height={40} rowClassName={this.setEditedRowClass} /> <Table data={dataSource} columns={columns} height={40} />
</div> </div>
); );
} }

File diff suppressed because one or more lines are too long

105
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long