p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of github.com:tinper-bee/bee-table

This commit is contained in:
梁才军 2019-04-28 15:48:11 +08:00
parent f82fa94ba9 6eb35d00be
commit 7f91fc840a
12 changed files with 2946 additions and 3997 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
demo/demolist/Demo0501.js
View File

@ -365,6 +365,13 @@ let dataSource = [
class Demo0501 extends Component {
constructor(props, context) {
super(props);
this.state = {
dataSource: dataSource,
editingRowsMap: {},
currentIndex: null,
errorEditFlag: false
};
this.columns = [
{
title: "员工编号",
@ -421,13 +428,6 @@ class Demo0501 extends Component {
}
];
this.state = {
dataSource: dataSource,
editingRowsMap: {},
currentIndex: null,
errorEditFlag: false
};
this.originData = {};
}
@ -449,6 +449,15 @@ class Demo0501 extends Component {
this.setState({ editingRowsMap, dataSource });
};
delete = index => () => {
if (index === null) return;
let { dataSource } = this.state;
dataSource.splice(index,1);
this.setState({
dataSource:dataSource
});
}
commitChange = index => () => {
if (this.state.errorEditFlag) return;
let editingRowsMap = { ...this.state.editingRowsMap };
@ -492,6 +501,9 @@ class Demo0501 extends Component {
<Button colors="dark" onClick={this.edit(currentIndex)}>
编辑
</Button>
<Button colors="dark" onClick={this.delete(currentIndex)}>
删除
</Button>
</div>
);
};

21
demo/demolist/Demo1201.js
View File

@ -11,28 +11,11 @@ import {Button,Tooltip} from "tinper-bee";
import Table from "../../src";
const columns = [
{
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
fixed:'left',
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "block",
width: "80px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
{ title: "员工姓名", dataIndex: "b", key: "b", width:200 },
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
{ title: "职级", dataIndex: "e", key: "e", width: 100,fixed:'right'}
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
];
const data = [

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

13
dist/demo.css vendored
View File

@ -143,25 +143,22 @@
cursor: pointer;
display: inline-block;
margin-right: 0px;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
text-align: center;
line-height: 14px;
border: 1px solid rgb(193, 199, 208);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #fff;
margin-right: 10px; }
.u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
font-size: 12px;
padding: 0; }
.u-table-row-spaced, .u-table-expanded-row-spaced {
visibility: hidden; }
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
content: "."; }
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
content: "-"; }
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
content: "+"; }
.u-table-row.selected {
background: #FFF7E7; }
.u-table tr.u-table-expanded-row {

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

6673
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

51
docs/api.md
View File

@ -122,21 +122,22 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
### multiSelect 多选功能
#### multiSelect:API
#### API
Data 数组参数：
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
| _checked | 设置是否选中当前数据（设置在data数组中） | boolean | true/false |
| _disabled | 设置是否禁用当前数据（设置在data数组中） | boolean | true/false
| _checked | 设置是否选中当前数据 | boolean | true/false |
| _disabled | 设置是否禁用当前数据 | boolean | true/false |
Table 组件参数：
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
| getSelectedDataFunc | 返回当前选中的数据数组（设置在Table组件上） | Function | 无 |
#### multiSelect:使用
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
#### 使用
```js
import multiSelect from "tinper-bee/lib/multiSelect.js";
@ -148,7 +149,7 @@ const MultiSelectTable = multiSelect(Table, Checkbox);
### sort 排序功能
#### sort:API
#### API
column 数组参数：
@ -157,7 +158,7 @@ column 数组参数：
| sorter | 排序函数，可以自定义 | Function | 无 |
| sorterClick | 排序钩子函数| Function | (coloum,type) |
#### sort:使用
#### 使用
```js
import sort from "tinper-bee/lib/sort.js";
@ -169,7 +170,7 @@ const SortTable = sort(Table, Icon);
### sum 合计功能
#### sum:API
#### API
column 数组参数：
@ -177,7 +178,7 @@ column 数组参数：
| ------ | ---------- | -------- | ---- |
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
#### sum:使用
#### 使用
```js
import sum from "tinper-bee/lib/sum.js";
@ -189,7 +190,7 @@ const SumTable = sum(Table);
### dragColumn 拖拽列功能
#### dragColumn:API
#### API
Table 组件参数：
@ -200,7 +201,7 @@ Table 组件参数：
| onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |
#### dragColumn:使用
#### 使用
```js
import dragColumn from "tinper-bee/lib/dragColumn.js";
@ -212,11 +213,11 @@ const DragColumnTable = dragColumn(Table);
### filterColumn 过滤功能
#### filterColumn:API
#### API
无
#### filterColumn:使用
#### 使用
```js
import filterColumn from "tinper-bee/lib/filterColumn.js";
@ -241,12 +242,12 @@ import renderInput from "tinper-bee/lib/InputRender.js";
输入框类型render
#### InputRender:依赖的组件
#### 依赖的组件
该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。
#### InputRender:配置
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ---------------------------------------- | ---------- | ------ |
@ -265,7 +266,7 @@ import renderInput from "tinper-bee/lib/InputRender.js";
| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
| reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - |
#### InputRender:使用
#### 使用
```js
import renderInput from "tinper-bee/lib/InputRender.js";
@ -278,12 +279,12 @@ const InputRender = renderInput(Form, FormControl, Icon);
日期类型render
#### DateRender:依赖的组件
#### 依赖的组件
该render依赖于`moment`, `Datepicker`, `Icon`
#### DateRender:配置
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ---------------------------------------- | ---------- | ------ |
@ -308,11 +309,11 @@ const DateRender = renderDate(Datepicker, Icon);
下拉框类型render
#### SelectRender:依赖的组件
#### 依赖的组件
该render依赖于`Icon`,`Select`
#### SelectRender:配置
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ---------------------------------------- | ------- | ----- |
@ -335,12 +336,12 @@ const SelectRender = renderSelect(Select, Icon);
复选框类型render
#### CheckboxRender:依赖的组件
#### 依赖的组件
该render依赖于`Icon`,`Checkbox`
#### CheckboxRender:配置
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ---------------------------------------- | ------- | ----- |
@ -351,7 +352,7 @@ const SelectRender = renderSelect(Select, Icon);
注:其他参数参见Checkbox组件参数配置
#### CheckboxRender:使用
#### 使用
```js
import renderCheckbox from "tinper-bee/lib/CheckboxRender.js";

51
docs/menu.json
View File

@ -79,47 +79,18 @@
"API": {
"Table": "",
"Column": "",
"高阶函数": "",
"multiSelect 多选功能": {
"multiSelect:API":"",
"multiSelect:使用":""
"高阶函数": {
"multiSelect 多选功能": "",
"sort 排序功能": "",
"sum 合计功能": "",
"dragColumn 拖拽列功能": "",
"filterColumn 过滤功能": ""
},
"sort 排序功能": {
"sort:API":"",
"sort:使用":""
},
"sum 合计功能": {
"sum:API":"",
"sum:使用":""
},
"dragColumn 拖拽列功能": {
"dragColumn:API":"",
"dragColumn:使用":""
},
"filterColumn 过滤功能": {
"filterColumn:API":"",
"filterColumn:使用":""
},
"rendertype":"",
"InputRender": {
"InputRender:依赖的组件":"",
"InputRender:配置":"",
"InputRender:使用":""
},
"DateRender": {
"DateRender:依赖的组件":"",
"DateRender:配置":"",
"DateRender:使用":""
},
"SelectRender": {
"SelectRender:依赖的组件":"",
"SelectRender:配置":"",
"SelectRender:使用":""
},
"CheckboxRender": {
"CheckboxRender:依赖的组件":"",
"CheckboxRender:配置":"",
"CheckboxRender:使用":""
"rendertype":{
"InputRender": "",
"DateRender": "",
"SelectRender": "",
"CheckboxRender": ""
},
"快捷键API":""
},

82
src/ExpandIcon.js
View File

@ -1,40 +1,42 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import shallowequal from 'shallowequal';
const propTypes = {
record: PropTypes.object,
clsPrefix: PropTypes.string,
expandable: PropTypes.any,
expanded: PropTypes.bool,
needIndentSpaced: PropTypes.bool,
onExpand: PropTypes.func,
};
class ExpandIcon extends Component{
constructor(props){
super(props);
}
shouldComponentUpdate(nextProps) {
return !shallowequal(nextProps, this.props);
}
render() {
const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record, isHiddenExpandIcon } = this.props;
if (expandable && !isHiddenExpandIcon) {
const expandClassName = expanded ? 'expanded' : 'collapsed';
return (
<span
className={`${clsPrefix}-expand-icon ${clsPrefix}-${expandClassName}`}
onClick={(e) => onExpand(!expanded, record, e)}
/>
);
} else if (needIndentSpaced || isHiddenExpandIcon) {
return <span className={`${clsPrefix}-expand-icon ${clsPrefix}-spaced`} />;
}
return null;
}
};
ExpandIcon.propTypes = propTypes;
export default ExpandIcon;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import shallowequal from 'shallowequal';
import Icon from 'bee-icon';
const propTypes = {
record: PropTypes.object,
clsPrefix: PropTypes.string,
expandable: PropTypes.any,
expanded: PropTypes.bool,
needIndentSpaced: PropTypes.bool,
onExpand: PropTypes.func,
};
class ExpandIcon extends Component{
constructor(props){
super(props);
}
shouldComponentUpdate(nextProps) {
return !shallowequal(nextProps, this.props);
}
render() {
const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record, isHiddenExpandIcon } = this.props;
if (expandable && !isHiddenExpandIcon) {
const expandClassName = expanded ? 'expanded' : 'collapsed';
return (
<Icon
className={`${clsPrefix}-expand-icon ${clsPrefix}-${expandClassName}`}
type={expanded ? 'uf-triangle-down' : 'uf-triangle-right'}
onClick={(e) => onExpand(!expanded, record, e)}
/>
);
} else if (needIndentSpaced || isHiddenExpandIcon) {
return <span className={`${clsPrefix}-expand-icon ${clsPrefix}-spaced`} />;
}
return null;
}
};
ExpandIcon.propTypes = propTypes;
export default ExpandIcon;

18
src/Table.scss
View File

@ -267,14 +267,16 @@ $icon-color:#505F79;
cursor: pointer;
display: inline-block;
margin-right: 0px;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
text-align: center;
line-height: 14px;
border: 1px solid $table-border-color;
user-select: none;
background: #fff;
margin-right: 10px;
&.uf{
font-size: 12px;
padding: 0;
}
}
&-spaced {
visibility: hidden;
@ -282,14 +284,6 @@ $icon-color:#505F79;
&-spaced:after {
content: ".";
}
&-expanded:after {
content: "-";
}
&-collapsed:after {
content: "+";
}
}
&-row{
&.selected{

2
src/TableRow.js
View File

@ -199,6 +199,8 @@ class TableRow extends Component{
let _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
_table_trs = _table_trs?_table_trs:contentTable.querySelector('.u-table table tbody');
this.synchronizeTrStyle(_table_trs,currentIndex,type);
if(_table_fixed_left_trs){