去除未完成的行编辑、全表编辑
This commit is contained in:
梁才军
parent
6fe1233f27
commit
6ac110422c
|
|
@ -1,153 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @title 行编辑
|
|
||||||
* @description 可以对行进行编辑的表格
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
import React, { Component } from "react";
|
|
||||||
import { Table } from "tinper-bee";
|
|
||||||
import { Icon, FormControl } from "tinper-bee";
|
|
||||||
|
|
||||||
class EditableCell extends Component {
|
|
||||||
constructor(props, context) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
value: this.props.value,
|
|
||||||
editable: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
handleChange = value => {
|
|
||||||
this.setState({ value });
|
|
||||||
if (this.props.onChange) {
|
|
||||||
this.props.onChange(value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="editable-cell">
|
|
||||||
<div className="editable-cell-input-wrapper">
|
|
||||||
{this.props.editable ? (
|
|
||||||
<FormControl
|
|
||||||
value={this.state.value}
|
|
||||||
onChange={this.handleChange}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
this.state.value || " "
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const dataSource = [
|
|
||||||
{ name: "全能法戒", quality: "远古传奇", level: 70 },
|
|
||||||
{ name: "绝命", quality: "太古传奇", level: 70 },
|
|
||||||
{ name: "蚀刻符印", quality: "太古传奇", level: 70 },
|
|
||||||
{ name: "虹光", quality: "传奇", level: 70 },
|
|
||||||
{ name: "复仇者护腕", quality: "传奇", level: 70 }
|
|
||||||
];
|
|
||||||
|
|
||||||
class Demo502 extends Component {
|
|
||||||
constructor(props, context) {
|
|
||||||
super(props);
|
|
||||||
this.columns = [
|
|
||||||
{
|
|
||||||
key: "row_edit",
|
|
||||||
width: "45px",
|
|
||||||
render: (text, record, index) => {
|
|
||||||
return this.state.editingRows.indexOf(index) > -1 ? (
|
|
||||||
<Icon
|
|
||||||
type="uf-correct"
|
|
||||||
className="editable-row-icon-check"
|
|
||||||
onClick={this.commitChange(index)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Icon
|
|
||||||
type="uf-pencil"
|
|
||||||
className="editable-row-icon"
|
|
||||||
onClick={this.edit(index)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "装备名称",
|
|
||||||
dataIndex: "name",
|
|
||||||
key: "name",
|
|
||||||
render: (text, record, index) => (
|
|
||||||
<EditableCell
|
|
||||||
editable={this.state.editingRows.indexOf(index) > -1}
|
|
||||||
value={text}
|
|
||||||
onChange={this.onCellChange(index, "name")}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "品质",
|
|
||||||
dataIndex: "quality",
|
|
||||||
key: "quality",
|
|
||||||
render: (text, record, index) => (
|
|
||||||
<EditableCell
|
|
||||||
editable={this.state.editingRows.indexOf(index) > -1}
|
|
||||||
value={text}
|
|
||||||
onChange={this.onCellChange(index, "quality")}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "需求等级",
|
|
||||||
dataIndex: "level",
|
|
||||||
key: "level",
|
|
||||||
render: (text, record, index) => (
|
|
||||||
<EditableCell
|
|
||||||
editable={this.state.editingRows.indexOf(index) > -1}
|
|
||||||
value={text}
|
|
||||||
onChange={this.onCellChange(index, "level")}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
dataSource: dataSource,
|
|
||||||
editingRows: []
|
|
||||||
};
|
|
||||||
|
|
||||||
this.dataBuffer = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
edit = index => () => {
|
|
||||||
let editingRows = [...this.state.editingRows];
|
|
||||||
editingRows.push(index);
|
|
||||||
this.dataBuffer[index] = Object.assign({}, dataSource[index]);
|
|
||||||
this.setState({ editingRows });
|
|
||||||
};
|
|
||||||
|
|
||||||
commitChange = index => () => {
|
|
||||||
let editingRows = [...this.state.editingRows];
|
|
||||||
let dataSource = [...this.state.dataSource];
|
|
||||||
editingRows.splice(editingRows.indexOf(index), 1);
|
|
||||||
dataSource[index] = this.dataBuffer[index];
|
|
||||||
delete this.dataBuffer[index];
|
|
||||||
this.setState({ editingRows, dataSource });
|
|
||||||
};
|
|
||||||
|
|
||||||
onCellChange = (index, key) => value => {
|
|
||||||
this.dataBuffer[index][key] = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { dataSource } = this.state;
|
|
||||||
const columns = this.columns;
|
|
||||||
return (
|
|
||||||
<div className="demo502">
|
|
||||||
<Table data={dataSource} columns={columns} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Demo502;
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
.demo502 {
|
|
||||||
.u-table-row-hover {
|
|
||||||
.editable-row-icon,
|
|
||||||
.editable-row-icon-check {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.u-table-row {
|
|
||||||
height: 58px;
|
|
||||||
.editable-row-icon,
|
|
||||||
.editable-row-icon-check {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,154 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @title 全表编辑
|
|
||||||
* @description 可以对全表进行编辑的表格
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
import React, { Component } from "react";
|
|
||||||
import { Table } from "tinper-bee";
|
|
||||||
import { Icon, FormControl } from "tinper-bee";
|
|
||||||
|
|
||||||
class EditableCell extends Component {
|
|
||||||
constructor(props, context) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
value: this.props.value,
|
|
||||||
editable: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
handleChange = value => {
|
|
||||||
this.setState({ value });
|
|
||||||
if (this.props.onChange) {
|
|
||||||
this.props.onChange(value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="editable-cell">
|
|
||||||
<div className="editable-cell-input-wrapper">
|
|
||||||
{this.props.editable ? (
|
|
||||||
<FormControl
|
|
||||||
value={this.state.value}
|
|
||||||
onChange={this.handleChange}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
this.state.value || " "
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const dataSource = [
|
|
||||||
{ name: "全能法戒", quality: "远古传奇", level: 70 },
|
|
||||||
{ name: "绝命", quality: "太古传奇", level: 70 },
|
|
||||||
{ name: "蚀刻符印", quality: "太古传奇", level: 70 },
|
|
||||||
{ name: "虹光", quality: "传奇", level: 70 },
|
|
||||||
{ name: "复仇者护腕", quality: "传奇", level: 70 }
|
|
||||||
];
|
|
||||||
|
|
||||||
class Demo503 extends Component {
|
|
||||||
constructor(props, context) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
dataSource: dataSource,
|
|
||||||
editAll: false
|
|
||||||
};
|
|
||||||
this.dataBuffer = [];
|
|
||||||
this.CONST_COL = [
|
|
||||||
{
|
|
||||||
title: "装备名称",
|
|
||||||
dataIndex: "name",
|
|
||||||
key: "name",
|
|
||||||
render: (text, record, index) => (
|
|
||||||
<EditableCell
|
|
||||||
editable={this.state.editAll}
|
|
||||||
value={text}
|
|
||||||
onChange={this.onCellChange(index, "name")}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "品质",
|
|
||||||
dataIndex: "quality",
|
|
||||||
key: "quality",
|
|
||||||
render: (text, record, index) => (
|
|
||||||
<EditableCell
|
|
||||||
editable={this.state.editAll}
|
|
||||||
value={text}
|
|
||||||
onChange={this.onCellChange(index, "quality")}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "需求等级",
|
|
||||||
dataIndex: "level",
|
|
||||||
key: "level",
|
|
||||||
render: (text, record, index) => (
|
|
||||||
<EditableCell
|
|
||||||
editable={this.state.editAll}
|
|
||||||
value={text}
|
|
||||||
onChange={this.onCellChange(index, "level")}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
edit = () => {
|
|
||||||
this.dataBuffer = [ ...this.state.dataSource ];
|
|
||||||
this.setState({ editAll: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
commitChange = () => {
|
|
||||||
this.setState({
|
|
||||||
editAll: false,
|
|
||||||
dataSource: this.dataBuffer
|
|
||||||
});
|
|
||||||
this.dataBuffer = [];
|
|
||||||
};
|
|
||||||
|
|
||||||
onCellChange = (index, key) => value => {
|
|
||||||
this.dataBuffer[index][key] = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let columns = [];
|
|
||||||
if (this.state.editAll) {
|
|
||||||
columns.push({
|
|
||||||
title: (
|
|
||||||
<Icon
|
|
||||||
type="uf-correct"
|
|
||||||
className="editable-row-icon-check"
|
|
||||||
onClick={this.commitChange}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
key: "row_edit",
|
|
||||||
width: "45px"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
columns.push({
|
|
||||||
title: (
|
|
||||||
<Icon
|
|
||||||
type="uf-pencil"
|
|
||||||
className="editable-row-icon"
|
|
||||||
onClick={this.edit}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
key: "row_edit",
|
|
||||||
width: "45px"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
columns = columns.concat(this.CONST_COL);
|
|
||||||
return (
|
|
||||||
<div className="demo502">
|
|
||||||
<Table data={this.state.dataSource} columns={columns} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Demo503;
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -9910,16 +9910,6 @@ ul {
|
||||||
.tooltip-inner {
|
.tooltip-inner {
|
||||||
border-color: #F44336 !important; }
|
border-color: #F44336 !important; }
|
||||||
|
|
||||||
.demo502 .u-table-row-hover .editable-row-icon,
|
|
||||||
.demo502 .u-table-row-hover .editable-row-icon-check {
|
|
||||||
display: block !important; }
|
|
||||||
|
|
||||||
.demo502 .u-table-row {
|
|
||||||
height: 58px; }
|
|
||||||
.demo502 .u-table-row .editable-row-icon,
|
|
||||||
.demo502 .u-table-row .editable-row-icon-check {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
th .drop-menu .uf {
|
th .drop-menu .uf {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue