merge
This commit is contained in:
yangchch6
commit
6eb35d00be
BIN
bee-table.rar
BIN
bee-table.rar
Binary file not shown.
|
|
@ -435,6 +435,7 @@ class Demo0501 extends Component {
|
|||
if (index === null) return;
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
editingRowsMap[index] = index.toString();
|
||||
// 最好使用深复制
|
||||
this.originData[index] = { ...this.state.dataSource[index] };
|
||||
this.setState({ editingRowsMap });
|
||||
};
|
||||
|
|
@ -484,7 +485,11 @@ class Demo0501 extends Component {
|
|||
const { currentIndex } = this.state;
|
||||
return this.state.editingRowsMap[currentIndex] ? (
|
||||
<div className={"opt-btns"}>
|
||||
<Button colors="dark" onClick={this.abortEdit(currentIndex)}>
|
||||
<Button
|
||||
colors="dark"
|
||||
className="btn-abort"
|
||||
onClick={this.abortEdit(currentIndex)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button colors="primary" onClick={this.commitChange(currentIndex)}>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,14 @@
|
|||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.btn-abort {
|
||||
background-color: #fff;
|
||||
color: rgb(70, 83, 105);
|
||||
&:hover {
|
||||
background-color: #eff0f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -398,7 +398,8 @@ class EditModal extends Component {
|
|||
</Modal.Body>
|
||||
<Modal.Footer style={{textAlign: "center"}}>
|
||||
<Button
|
||||
colors="secondary"
|
||||
colors="dark"
|
||||
className="btn-abort"
|
||||
style={{ marginRight: 15 }}
|
||||
onClick={onHide}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,18 @@
|
|||
.demo0503-m-b {
|
||||
button {
|
||||
&.btn-abort {
|
||||
background-color: #fff;
|
||||
color: rgb(70, 83, 105);
|
||||
&:hover {
|
||||
background-color: #eff0f3 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-group {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-form-control {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -28,6 +39,7 @@
|
|||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.required {
|
||||
&::before {
|
||||
content: "*";
|
||||
|
|
@ -38,6 +50,7 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
|
|
@ -48,6 +61,7 @@
|
|||
|
||||
.u-editable-table-tp {
|
||||
z-index: 9999 !important;
|
||||
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,505 @@
|
|||
/**
|
||||
*
|
||||
* @title 行编辑 - 行内编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 可以对行进行编辑的表格
|
||||
* demo0505
|
||||
*/
|
||||
import React, { Component, PureComponent } from "react";
|
||||
import Table from "../../src";
|
||||
import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
class StringEditCell extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleChange = value => {
|
||||
const { onChange, throwError } = this.props;
|
||||
if (value === "") {
|
||||
throwError && throwError(true);
|
||||
} else {
|
||||
throwError && throwError(false);
|
||||
}
|
||||
onChange && onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, editable, required, colName, isEdited } = this.props;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (value === "") cls += " verify-cell";
|
||||
if (isEdited) cls += " edited";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<FormControl value={value} onChange={this.handleChange} />
|
||||
<span className="error">
|
||||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={<div className="tp-content">{"请输入" + colName}</div>}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.props.onChange && this.props.onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, editable, isEdited } = this.props;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (isEdited) cls += " edited";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<Select value={this.props.value} onSelect={this.handleSelect}>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSelect = values => {
|
||||
this.props.onChange && this.props.onChange(values[0]);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { value, editable, required, isEdited } = this.props;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (getFieldError("refValue")) cls += " verify-cell";
|
||||
if (isEdited) cls += " edited";
|
||||
return editable ? (
|
||||
<div className={cls}>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("refValue", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
),
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("refValue")}</span>
|
||||
</div>
|
||||
) : (
|
||||
value.name || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0505 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
colName={"名字"}
|
||||
editable={this.state.isEditingAll}
|
||||
isEdited={record.isEdited.b || false}
|
||||
required
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "b")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<SelectEditCell
|
||||
editable={this.state.isEditingAll}
|
||||
isEdited={record.isEdited.c || false}
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
colName={"部门"}
|
||||
editable={this.state.isEditingAll}
|
||||
isEdited={record.isEdited.d || false}
|
||||
required
|
||||
value={record.d}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
// 只是用来占位占宽度的
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
// 用于记录数据是否被修改
|
||||
dataSource.forEach(item => item.isEdited = {});
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
isEditingAll: false,
|
||||
currentIndex: null,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
// 用于记录编辑前数据
|
||||
this.originData = [];
|
||||
}
|
||||
|
||||
edit = () => {
|
||||
this.originData = [];
|
||||
// 最好使用深复制
|
||||
this.state.dataSource.forEach(item => this.originData.push({ ...item }));
|
||||
this.setState({ isEditingAll: true });
|
||||
};
|
||||
|
||||
abortEdit = () => {
|
||||
this.originData.forEach(item => item.isEdited = {});
|
||||
this.setState({
|
||||
isEditingAll: false,
|
||||
dataSource: [...this.originData]
|
||||
});
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
if (this.state.errorEditFlag) return;
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource.forEach(item => item.isEdited = {});
|
||||
this.setState({ isEditingAll: false });
|
||||
};
|
||||
|
||||
onCellChange = (index, key) => value => {
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
dataSource[index].isEdited[key] = true;
|
||||
this.setState({ dataSource }, () => console.table(this.originData));
|
||||
};
|
||||
|
||||
throwError = isError => {
|
||||
if (isError !== this.state.errorEditFlag)
|
||||
this.setState({ errorEditFlag: isError });
|
||||
};
|
||||
|
||||
setEditedRowClass = (record, index, indent) => {
|
||||
if (Object.keys(record.isEdited).length > 0) return "u-row-select";
|
||||
return "";
|
||||
}
|
||||
|
||||
render() {
|
||||
const { dataSource, isEditingAll } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div className="demo0505 u-editable-table">
|
||||
<div className="opt-btns">
|
||||
{isEditingAll ? (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
colors="dark"
|
||||
className="btn-abort"
|
||||
onClick={this.abortEdit}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button colors="primary" onClick={this.commitChange}>
|
||||
确认
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<Button colors="dark" onClick={this.edit}>
|
||||
编辑全表
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Table data={dataSource} columns={columns} height={40} rowClassName={this.setEditedRowClass} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0505;
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
.demo0505 {
|
||||
|
||||
.opt-btns {
|
||||
margin-bottom: 15px;
|
||||
|
||||
button {
|
||||
border-radius: 5px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.btn-abort {
|
||||
background-color: #fff;
|
||||
color: rgb(70, 83, 105);
|
||||
&:hover {
|
||||
background-color: #eff0f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-table {
|
||||
.u-row-select {
|
||||
background-color: #FFF7E7;
|
||||
}
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.required {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
border: 2px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
span.u-input-group {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.verify-cell {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.edited::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #f44336 transparent transparent #f44336;
|
||||
}
|
||||
|
||||
.required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ref-input-wrap {
|
||||
width: 160px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -676,6 +676,11 @@
|
|||
border-radius: 5px; }
|
||||
.demo0501 .u-table .u-row-hover .opt-btns button:first-child {
|
||||
margin-right: 10px; }
|
||||
.demo0501 .u-table .u-row-hover .opt-btns button.btn-abort {
|
||||
background-color: #fff;
|
||||
color: #465369; }
|
||||
.demo0501 .u-table .u-row-hover .opt-btns button.btn-abort:hover {
|
||||
background-color: #eff0f3; }
|
||||
|
||||
.demo0501 .u-table .u-table-row td {
|
||||
padding: 5px 8px; }
|
||||
|
|
@ -759,6 +764,12 @@
|
|||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
.demo0503-m-b button.btn-abort {
|
||||
background-color: #fff;
|
||||
color: #465369; }
|
||||
.demo0503-m-b button.btn-abort:hover {
|
||||
background-color: #eff0f3 !important; }
|
||||
|
||||
.demo0503-m-b .u-form-group {
|
||||
overflow: hidden; }
|
||||
|
||||
|
|
@ -804,6 +815,75 @@
|
|||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
.demo0505 .opt-btns {
|
||||
margin-bottom: 15px; }
|
||||
.demo0505 .opt-btns button {
|
||||
border-radius: 5px; }
|
||||
.demo0505 .opt-btns button:first-child {
|
||||
margin-right: 10px; }
|
||||
.demo0505 .opt-btns button.btn-abort {
|
||||
background-color: #fff;
|
||||
color: #465369; }
|
||||
.demo0505 .opt-btns button.btn-abort:hover {
|
||||
background-color: #eff0f3; }
|
||||
|
||||
.demo0505 .u-table .u-row-select {
|
||||
background-color: #FFF7E7; }
|
||||
|
||||
.demo0505 .u-table .u-table-row td {
|
||||
padding: 5px 8px; }
|
||||
.demo0505 .u-table .u-table-row td input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px; }
|
||||
|
||||
.demo0505 .u-table .u-table-row .u-form-control,
|
||||
.demo0505 .u-table .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.demo0505 .u-table .editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.demo0505 .u-table .required {
|
||||
margin-left: 10px;
|
||||
position: relative; }
|
||||
.demo0505 .u-table .required::before {
|
||||
content: " ";
|
||||
border: 2px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px; }
|
||||
.demo0505 .u-table .required span.u-input-group {
|
||||
display: block; }
|
||||
|
||||
.demo0505 .u-table .verify-cell {
|
||||
padding-right: 25px !important; }
|
||||
|
||||
.demo0505 .u-table .edited::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #f44336 transparent transparent #f44336; }
|
||||
|
||||
.demo0505 .u-table .required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.demo0505 .u-table .ref-input-wrap {
|
||||
width: 160px !important; }
|
||||
|
||||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
th .drop-menu .uf {
|
||||
font-size: 12px;
|
||||
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
41
docs/api.md
41
docs/api.md
|
|
@ -1,11 +1,13 @@
|
|||
# 表格 Table
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当有大量结构化的数据需要展现时；
|
||||
- Table组件拥有多种可自由组合使用的功能，包括：大数据渲染、拖拽列、过滤列、排序、多选、分页、自定义操作、合计、搜索等复杂行为；
|
||||
- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](https://design.yonyoucloud.com/tinper-acs/bee-complex-grid)。
|
||||
|
||||
## 如何使用
|
||||
|
||||
```
|
||||
import { Table } from 'tinper-bee';
|
||||
|
||||
|
|
@ -108,7 +110,7 @@ import 'bee-table/build/Table.css';
|
|||
| textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
|
||||
|
||||
|
||||
## 高阶函数
|
||||
### 高阶函数
|
||||
|
||||
Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常
|
||||
|
||||
|
|
@ -119,17 +121,21 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
|
|||
```
|
||||
|
||||
### multiSelect 多选功能
|
||||
|
||||
#### API
|
||||
|
||||
Data 数组参数：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| _checked | 设置是否选中当前数据（设置在data数组中） | boolean | true/false |
|
||||
| _disabled | 设置是否禁用当前数据（设置在data数组中） | boolean | true/false
|
||||
| _checked | 设置是否选中当前数据 | boolean | true/false |
|
||||
| _disabled | 设置是否禁用当前数据 | boolean | true/false |
|
||||
|
||||
Table 组件参数：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组（设置在Table组件上） | Function | 无 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||
|
||||
#### 使用
|
||||
|
||||
|
|
@ -144,6 +150,7 @@ const MultiSelectTable = multiSelect(Table, Checkbox);
|
|||
### sort 排序功能
|
||||
|
||||
#### API
|
||||
|
||||
column 数组参数：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|
|
@ -164,6 +171,7 @@ const SortTable = sort(Table, Icon);
|
|||
### sum 合计功能
|
||||
|
||||
#### API
|
||||
|
||||
column 数组参数：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|
|
@ -183,7 +191,9 @@ const SumTable = sum(Table);
|
|||
### dragColumn 拖拽列功能
|
||||
|
||||
#### API
|
||||
|
||||
Table 组件参数：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| dragborder | 拖拽调整列宽度 | boolean | false |
|
||||
|
|
@ -217,9 +227,8 @@ const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon);
|
|||
|
||||
```
|
||||
|
||||
### rendertype
|
||||
|
||||
|
||||
## rendertype
|
||||
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
|
||||
|
||||
需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
|
||||
|
|
@ -230,13 +239,16 @@ import renderInput from "tinper-bee/lib/InputRender.js";
|
|||
```
|
||||
|
||||
### InputRender
|
||||
|
||||
输入框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
|
||||
该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。
|
||||
|
||||
|
||||
#### 配置
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| name | 该输入框获取数据时的key值，该值不能设置重复且必填 | string | - |
|
||||
|
|
@ -264,13 +276,16 @@ const InputRender = renderInput(Form, FormControl, Icon);
|
|||
```
|
||||
|
||||
### DateRender
|
||||
|
||||
日期类型render
|
||||
|
||||
#### 依赖的组件
|
||||
|
||||
该render依赖于`moment`, `Datepicker`, `Icon`
|
||||
|
||||
|
||||
#### 配置
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
|
|
@ -279,7 +294,7 @@ const InputRender = renderInput(Form, FormControl, Icon);
|
|||
|
||||
注:其他参数参见Datepicker组件参数配置
|
||||
|
||||
#### 使用
|
||||
#### DateRender:使用
|
||||
|
||||
```js
|
||||
import renderDate from "tinper-bee/lib/DateRender.js";
|
||||
|
|
@ -291,6 +306,7 @@ const DateRender = renderDate(Datepicker, Icon);
|
|||
|
||||
|
||||
### SelectRender
|
||||
|
||||
下拉框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
|
|
@ -298,16 +314,16 @@ const DateRender = renderDate(Datepicker, Icon);
|
|||
|
||||
|
||||
#### 配置
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如`[{key:"张三",value:"01"}]` | array | - |
|
||||
|
||||
|
||||
|
||||
注:其他参数参见Select组件参数配置
|
||||
|
||||
#### 使用
|
||||
#### SelectRender:使用
|
||||
|
||||
```js
|
||||
import renderSelect from "tinper-bee/lib/SelectRender.js";
|
||||
|
|
@ -317,13 +333,16 @@ const SelectRender = renderSelect(Select, Icon);
|
|||
```
|
||||
|
||||
### CheckboxRender
|
||||
|
||||
复选框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
|
||||
该render依赖于`Icon`,`Checkbox`
|
||||
|
||||
|
||||
#### 配置
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||
| onChange | 修改后触发回调函数 | function | () => {} |
|
||||
|
|
@ -342,7 +361,7 @@ const CheckboxRender = renderCheckbox(Checkbox, Icon);
|
|||
|
||||
```
|
||||
|
||||
## 快捷键API
|
||||
### 快捷键API
|
||||
|
||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||
| --- | :--- | --- |--- |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
{
|
||||
"何时使用": {},
|
||||
"如何使用": {},
|
||||
"能力特性": {
|
||||
"基础 Basic": {
|
||||
"基本表格": "",
|
||||
"默认无数据展示": "",
|
||||
"固定表头": "",
|
||||
"隔行换色": "",
|
||||
"表格 Loading 加载": "",
|
||||
"单元格内容居中": "",
|
||||
"带边框": ""
|
||||
},
|
||||
"滚动 Scroll View": {
|
||||
"横向滚动条": "",
|
||||
"纵向滚动条": ""
|
||||
},
|
||||
"数据操作 Data Opetation": {
|
||||
"渲染本地数据": "",
|
||||
"渲染远程数据": ""
|
||||
},
|
||||
"列渲染 Custom Render": {
|
||||
"多列表头": "",
|
||||
"数据关联": "",
|
||||
"列合计（总计）": ""
|
||||
},
|
||||
"编辑 Editor": {
|
||||
"行编辑 - 行内编辑": "",
|
||||
"单元格编辑": "",
|
||||
"行编辑 - 弹框编辑": ""
|
||||
},
|
||||
"列操作-锁定 Fixed": {
|
||||
"左侧固定列": "",
|
||||
"右侧固定列": "",
|
||||
"动态设置列锁定、解除锁定": ""
|
||||
},
|
||||
"列操作-过滤 Filter": {
|
||||
"按条件、值过滤": "",
|
||||
"复杂表格中行过滤": ""
|
||||
},
|
||||
"列操作-隐藏 Hide": {
|
||||
"列过滤面板": ""
|
||||
},
|
||||
"列操作-排序 Sort": {
|
||||
"列排序": "",
|
||||
"后端列排序": "",
|
||||
"多列排序": ""
|
||||
},
|
||||
"列操作-拖拽 Drag": {
|
||||
"拖拽改变列顺序": "",
|
||||
"拖拽改变列宽度": ""
|
||||
},
|
||||
"扩展行 Expanded Row": {
|
||||
"嵌套子表格": "",
|
||||
"树型表格数据展示": "",
|
||||
"自定义表格标题、表尾、选中行颜色": "",
|
||||
"紧凑型、宽松型": "",
|
||||
"自定义行高": "",
|
||||
"图片在表格中的展示": "",
|
||||
"自定义行、列合并": ""
|
||||
},
|
||||
"行操作-拖拽": {
|
||||
"拖拽改变行顺序": ""
|
||||
},
|
||||
"行操作-选择": {
|
||||
"多选功能": "",
|
||||
"单选功能": ""
|
||||
},
|
||||
"无限滚动 Infinite-scroll": {
|
||||
"万行以上数据渲染": "",
|
||||
"嵌套子表格滚动加载": "",
|
||||
"多功能表格滚动加载": "",
|
||||
"层级树大数据场景": ""
|
||||
},
|
||||
"分页 Pagination": {
|
||||
"表格+分页": ""
|
||||
}
|
||||
},
|
||||
"API": {
|
||||
"Table": "",
|
||||
"Column": "",
|
||||
"高阶函数": {
|
||||
"multiSelect 多选功能": "",
|
||||
"sort 排序功能": "",
|
||||
"sum 合计功能": "",
|
||||
"dragColumn 拖拽列功能": "",
|
||||
"filterColumn 过滤功能": ""
|
||||
},
|
||||
"rendertype":{
|
||||
"InputRender": "",
|
||||
"DateRender": "",
|
||||
"SelectRender": "",
|
||||
"CheckboxRender": ""
|
||||
},
|
||||
"快捷键API":""
|
||||
},
|
||||
"注意事项": {},
|
||||
"更新日志": {}
|
||||
}
|
||||
|
|
@ -90,7 +90,6 @@
|
|||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "^2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue