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

API文档加三级标题、解决无滚动条时，拖拽行报错问题、树形表格的图标换成箭头

This commit is contained in:
yangchch6 2019-04-30 10:01:58 +08:00
parent 6a4e574a1a
commit 527b2f20d6
22 changed files with 472 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
build/ExpandIcon.js
View File

@ -16,6 +16,10 @@ var _shallowequal = require('shallowequal');
var _shallowequal2 = _interopRequireDefault(_shallowequal);
var _beeIcon = require('bee-icon');
var _beeIcon2 = _interopRequireDefault(_beeIcon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@ -60,8 +64,9 @@ var ExpandIcon = function (_Component) {
if (expandable && !isHiddenExpandIcon) {
var expandClassName = expanded ? 'expanded' : 'collapsed';
return _react2["default"].createElement('span', {
return _react2["default"].createElement(_beeIcon2["default"], {
className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName,
type: expanded ? 'uf-triangle-down' : 'uf-triangle-right',
onClick: function onClick(e) {
return onExpand(!expanded, record, e);
}

184
build/Table.css
View File

@ -1,5 +1,169 @@
@charset "UTF-8";
/* FormGroup */
/* Navlayout */
/* FormGroup */
/* Navlayout */
/**
* 加载背景
*/
/**
* 文字
*/
.u-loading-desc {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
color: #212121;
text-align: center; }
/**
* default样式 单个圆圈加载
*/
.u-loading.u-loading-rotate > div {
position: absolute;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
width: 40px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -22px;
margin-top: -22px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1s 0s linear infinite;
animation: rotate 1s 0s linear infinite;
text-align: center;
line-height: 40px; }
.u-loading.u-loading-rotate > div > img {
width: 40px; }
.u-loading.u-loading-rotate > div > .uf {
color: #0084ff;
font-size: 40px;
padding: 0; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
margin-left: -35px;
margin-top: -35px;
width: 60px;
height: 60px;
line-height: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > img {
width: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
font-size: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
margin-left: -15px;
margin-top: -15px;
width: 25px;
height: 25px;
line-height: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > img {
width: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
font-size: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
color: #3f51b5; }
.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
color: #4caf50; }
.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
color: #ff9800; }
.u-loading-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1900;
background-color: rgba(255, 255, 255, 0.4); }
.u-loading-backdrop.full-screen {
position: fixed; }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1); }
50% {
-webkit-transform: rotate(180deg) scale(1);
transform: rotate(180deg) scale(1); }
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1); } }
.u-loading.u-loading-line {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -25px; }
.u-loading.u-loading-line > div {
background-color: #C2C3C5;
width: 6px;
height: 50px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
.u-loading.u-loading-line.u-loading-line-lg {
margin-top: -50px;
margin-left: -30px; }
.u-loading.u-loading-line.u-loading-line-lg > div {
width: 8px;
height: 90px; }
.u-loading.u-loading-line.u-loading-line-sm {
margin-top: -22px;
margin-left: -20px; }
.u-loading.u-loading-line.u-loading-line-sm > div {
width: 4px;
height: 35px; }
.u-loading.u-loading-line div:nth-child(1) {
-webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #F44336; }
.u-loading.u-loading-line div:nth-child(2) {
-webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #7ED321; }
.u-loading.u-loading-line div:nth-child(3) {
-webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #0084FF; }
.u-loading.u-loading-line div:nth-child(4) {
-webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #FF9800; }
.u-loading.u-loading-line div:nth-child(5) {
-webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #D0021B; }
.u-loading.u-loading-line.u-loading-line-primary > div {
background-color: #3f51b5; }
.u-loading.u-loading-line.u-loading-line-success > div {
background-color: #4caf50; }
.u-loading.u-loading-line.u-loading-line-warning > div {
background-color: #ff9800; }
@keyframes line-scale {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
.u-table {
font-size: 12px;
color: #212121;
@ -132,7 +296,12 @@
text-align: center;
position: relative; }
.u-table-placeholder .table-nodata {
font-size: 48px; }
font-size: 40px;
line-height: 44px; }
.u-table-placeholder .table-nodata + span {
font-size: 12px;
line-height: 12px;
display: block; }
.u-table-expand-icon-col {
width: 10px; }
.u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
@ -143,22 +312,19 @@
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);
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 {

11
build/Table.js
View File

@ -142,7 +142,16 @@ var defaultProps = {
return body;
},
emptyText: function emptyText() {
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' });
return _react2["default"].createElement(
'div',
null,
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' }),
_react2["default"].createElement(
'span',
null,
'\u6682\u65E0\u6570\u636E'
)
);
},
columns: [],
minColumnWidth: 80,

2
build/TableRow.js
View File

@ -164,6 +164,8 @@ var TableRow = function (_Component) {
_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) {
_this.synchronizeTrStyle(_table_fixed_left_trs, currentIndex, type);

80
build/lib/util.js
View File

@ -1,7 +1,7 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
*/
function sortBy(arr, prop, desc) {
var props = [],
ret = [],
i = 0,
len = arr.length;
if (typeof prop == 'string') {
for (; i < len; i++) {
var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
}
} else if (typeof prop == 'function') {
for (; i < len; i++) {
var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
}
} else {
throw '参数类型错误';
var props = [],
ret = [],
i = 0,
len = arr.length;
if (typeof prop == 'string') {
for (; i < len; i++) {
var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
}
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
} else if (typeof prop == 'function') {
for (; i < len; i++) {
var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
}
if (desc) ret.reverse();
return ret;
} else {
throw '参数类型错误';
}
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
}
if (desc) ret.reverse();
return ret;
};
/**
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
* @param {} property
*/
function compare(property) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
}
/**
@ -63,17 +63,17 @@ function compare(property) {
* @param {*} obj 要拷贝的对象
*/
function ObjectAssign(obj) {
var b = obj instanceof Array;
var tagObj = b ? [] : {};
if (b) {
//数组
obj.forEach(function (da) {
var _da = {};
_extends(_da, da);
tagObj.push(_da);
});
} else {
_extends(tagObj, obj);
}
return tagObj;
var b = obj instanceof Array;
var tagObj = b ? [] : {};
if (b) {
//数组
obj.forEach(function (da) {
var _da = {};
_extends(_da, da);
tagObj.push(_da);
});
} else {
_extends(tagObj, obj);
}
return tagObj;
}

2
demo/demolist/Demo0501.js
View File

@ -1,6 +1,6 @@
/**
*
* @title 行编辑 - 行内编辑
* @title 行内编辑
* @parent 编辑 Editor
* @description 可以对行进行编辑的表格
* demo0501

2
demo/demolist/Demo0501.scss
View File

@ -2,7 +2,7 @@
.u-row-hover {
.opt-btns {
button {
border-radius: 5px;
border-radius: 3px;
&:first-child {
margin-right: 10px;

2
demo/demolist/Demo0503.js
View File

@ -1,6 +1,6 @@
/**
*
* @title 行编辑 - 弹框编辑
* @title 弹框（表单）编辑
* @parent 编辑 Editor
* @description 以弹框形式以对行进行编辑的表格
* demo0503

2
demo/demolist/Demo0505.js
View File

@ -1,6 +1,6 @@
/**
*
* @title 全表编辑
* @title 全表格编辑
* @parent 编辑 Editor
* @description 以行内编辑形式对全表数据进行编辑
* demo0505

2
demo/demolist/Demo0505.scss
View File

@ -4,7 +4,7 @@
margin-bottom: 15px;
button {
border-radius: 5px;
border-radius: 3px;
&:first-child {
margin-right: 10px;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

161
dist/demo.css vendored
View File

@ -1,5 +1,155 @@
@charset "UTF-8";
/* FormGroup */
/* Navlayout */
/* FormGroup */
/* Navlayout */
/**
* 加载背景
*/
/**
* 文字
*/
.u-loading-desc {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
color: #212121;
text-align: center; }
/**
* default样式 单个圆圈加载
*/
.u-loading.u-loading-rotate > div {
position: absolute;
border-radius: 100%;
margin: 2px;
animation-fill-mode: both;
width: 40px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -22px;
margin-top: -22px;
background: transparent !important;
display: inline-block;
animation: rotate 1s 0s linear infinite;
text-align: center;
line-height: 40px; }
.u-loading.u-loading-rotate > div > img {
width: 40px; }
.u-loading.u-loading-rotate > div > .uf {
color: #0084ff;
font-size: 40px;
padding: 0; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
margin-left: -35px;
margin-top: -35px;
width: 60px;
height: 60px;
line-height: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > img {
width: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
font-size: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
margin-left: -15px;
margin-top: -15px;
width: 25px;
height: 25px;
line-height: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > img {
width: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
font-size: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
color: #3f51b5; }
.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
color: #4caf50; }
.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
color: #ff9800; }
.u-loading-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1900;
background-color: rgba(255, 255, 255, 0.4); }
.u-loading-backdrop.full-screen {
position: fixed; }
@keyframes rotate {
0% {
transform: rotate(0deg) scale(1); }
50% {
transform: rotate(180deg) scale(1); }
100% {
transform: rotate(360deg) scale(1); } }
.u-loading.u-loading-line {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -25px; }
.u-loading.u-loading-line > div {
background-color: #C2C3C5;
width: 6px;
height: 50px;
border-radius: 2px;
margin: 2px;
animation-fill-mode: both;
display: inline-block; }
.u-loading.u-loading-line.u-loading-line-lg {
margin-top: -50px;
margin-left: -30px; }
.u-loading.u-loading-line.u-loading-line-lg > div {
width: 8px;
height: 90px; }
.u-loading.u-loading-line.u-loading-line-sm {
margin-top: -22px;
margin-left: -20px; }
.u-loading.u-loading-line.u-loading-line-sm > div {
width: 4px;
height: 35px; }
.u-loading.u-loading-line div:nth-child(1) {
animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #F44336; }
.u-loading.u-loading-line div:nth-child(2) {
animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #7ED321; }
.u-loading.u-loading-line div:nth-child(3) {
animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #0084FF; }
.u-loading.u-loading-line div:nth-child(4) {
animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #FF9800; }
.u-loading.u-loading-line div:nth-child(5) {
animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #D0021B; }
.u-loading.u-loading-line.u-loading-line-primary > div {
background-color: #3f51b5; }
.u-loading.u-loading-line.u-loading-line-success > div {
background-color: #4caf50; }
.u-loading.u-loading-line.u-loading-line-warning > div {
background-color: #ff9800; }
@keyframes line-scale {
0% {
transform: scaley(1); }
50% {
transform: scaley(0.4); }
100% {
transform: scaley(1); } }
.u-table {
font-size: 12px;
color: #212121;
@ -132,7 +282,12 @@
text-align: center;
position: relative; }
.u-table-placeholder .table-nodata {
font-size: 48px; }
font-size: 40px;
line-height: 44px; }
.u-table-placeholder .table-nodata + span {
font-size: 12px;
line-height: 12px;
display: block; }
.u-table-expand-icon-col {
width: 10px; }
.u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
@ -673,7 +828,7 @@
padding-bottom: 0px; }
.demo0501 .u-table .u-row-hover .opt-btns button {
border-radius: 5px; }
border-radius: 3px; }
.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 {
@ -818,7 +973,7 @@
.demo0505 .opt-btns {
margin-bottom: 15px; }
.demo0505 .opt-btns button {
border-radius: 5px; }
border-radius: 3px; }
.demo0505 .opt-btns button:first-child {
margin-right: 10px; }
.demo0505 .opt-btns button.btn-abort {

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

21
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

16
docs/api.md
View File

@ -2,9 +2,19 @@
## 何时使用
- 当有大量结构化的数据需要展现时；
- Table组件拥有多种可自由组合使用的功能，包括：大数据渲染、拖拽列、过滤列、排序、多选、分页、自定义操作、合计、搜索等复杂行为；
- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](https://design.yonyoucloud.com/tinper-acs/bee-complex-grid)。
- 当有大量结构化的数据需要展现时，可使用 `Table` 组件；
- `Table` 组件拥有多种可自由组合使用的功能特性，包括：
1. 大数据渲染
2. 拖拽交换、拖拽改变列宽
3. 行选择（单选/多选）
4. 表体滚动
5. 数据操作
6. 支持多种表格编辑形式
7. 列锁定
8. 列过滤
9. 列隐藏
10. 列排序
- `Grid` 组件聚合了 `Table` 组件的所有功能特性，并在此基础上封装了导出数据、工具栏、分页、数据关联等高级功能。可达到随用随取、开箱即用的体验。当需要使用多种功能组合的 `Table` 展示时，推荐使用[Grid组件](https://design.yonyoucloud.com/tinper-acs/bee-complex-grid)。
## 如何使用

2
src/Table.js
View File

@ -80,7 +80,7 @@ const defaultProps = {
scroll: {},
rowRef: () => null,
getBodyWrapper: body => body,
emptyText: () => <Icon type="uf-nodata" className="table-nodata"></Icon>,
emptyText: () => <div><Icon type="uf-nodata" className="table-nodata"></Icon><span>暂无数据</span></div>,
columns:[],
minColumnWidth: 80,
locale:{},

12
src/Table.scss
View File

@ -1,6 +1,6 @@
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
// @import "../node_modules/bee-loading/src/Loading";
@import "../node_modules/bee-loading/src/Loading";
$text-color: $font-color-base;
$font-size-base: 12px;
@ -247,7 +247,15 @@ $icon-color:#505F79;
border-bottom: 1px solid $table-border-color;
text-align: center;
position: relative;
.table-nodata{ font-size:48px; }
.table-nodata{
font-size: 40px;
line-height: 44px;
+ span{
font-size: 12px;
line-height: 12px;
display: block;
}
}
}
&-expand-icon-col {