JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

去除未完成的行编辑、全表编辑

This commit is contained in:
梁才军 2019-04-22 10:06:45 +08:00
parent 6fe1233f27
commit 6ac110422c
8 changed files with 4 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
demo/demolist/Demo502.js
View File

@ -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;

15
demo/demolist/Demo502.scss
View File

@ -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;
}
}
}

154
demo/demolist/Demo503.js
View File

@ -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;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

10
dist/demo.css vendored
View File

@ -9910,16 +9910,6 @@ ul {
.tooltip-inner {
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 {
font-size: 12px;
visibility: hidden;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

371
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long