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

Merge branch 'master' into lcj-demo-50x

This commit is contained in:
梁才军 2019-04-24 11:46:40 +08:00
parent ba45d5cd34 1eea874846
commit a29aac93af
66 changed files with 2223 additions and 12996 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
build/Table.css
View File

@ -20,13 +20,15 @@
text-align: left; }
.u-table th {
font-weight: bold;
text-align: left; }
text-align: left;
line-height: 16px; }
.u-table th[colspan] {
text-align: center; }
.u-table th ::last-child {
overflow: hidden; }
.u-table td {
border-bottom: 1px solid rgb(193, 199, 208); }
border-bottom: 1px solid rgb(193, 199, 208);
line-height: 1.33; }
.u-table td a {
color: #2196F3; }
.u-table td a:hover {
@ -35,6 +37,8 @@
color: #1565c0; }
.u-table thead tr:last-child {
border-bottom: 1px solid #C1C7D0; }
.u-table thead tr > th:last-child {
border-right: none; }
.u-table tr:hover td .uf-eye {
visibility: visible !important; }
.u-table tr tr a {
@ -47,7 +51,7 @@
background: rgb(235, 236, 240); }
.u-table th,
.u-table td {
padding: 12px 16px;
padding: 12px 8px;
word-break: break-all; }
.u-table th.text-center,
.u-table td.text-center {
@ -55,6 +59,10 @@
.u-table th.text-right,
.u-table td.text-right {
text-align: right; }
.u-table-sm td {
padding: 8px 8px; }
.u-table-lg td {
padding: 16px 8px; }
.u-table tr.filterable th {
padding-top: 5px !important;
padding-bottom: 5px !important; }
@ -88,7 +96,7 @@
background: rgb(241, 242, 245);
color: rgb(33, 33, 33); }
.u-table.fixed-height td {
padding: 0px 16px; }
padding: 0px 8px; }
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }
@ -106,23 +114,25 @@
overflow-y: scroll;
box-sizing: border-box; }
.u-table-title {
padding: 12px 16px;
padding: 12px 8px;
border-top: 1px solid rgb(193, 199, 208); }
.u-table-content {
position: relative; }
.u-table-footer {
padding: 12px 16px;
padding: 12px 8px;
border-bottom: 1px solid rgb(193, 199, 208); }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
margin: -12px -16px; }
margin: -12px -8px; }
.u-table-placeholder {
padding: 12px 8px;
background: #fff;
border-bottom: 1px solid rgb(193, 199, 208);
text-align: center;
position: relative; }
.u-table-placeholder .table-nodata {
font-size: 48px; }
.u-table-expand-icon-col {
width: 10px; }
.u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
@ -312,7 +322,7 @@
width: 30px;
height: 38px;
line-height: 38px;
right: 12px;
right: 0px;
top: 1px;
z-index: 2;
background: rgb(241, 242, 245);
@ -323,6 +333,7 @@
color: #505F79; }
.u-table-filter-column-pop-cont-item {
margin-top: 8px;
font-size: 12px;
cursor: pointer; }
.u-table-filter-column-pop-cont-item .u-checkbox {
margin: 0px; }
@ -352,6 +363,10 @@
.u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
width: 14px;
height: 14px; }
.u-table .u-table-scroll tr td:first-child, .u-table .u-table-scroll tr th:first-child, .u-table .u-table-fixed-left tr td:first-child, .u-table .u-table-fixed-left tr th:first-child {
padding-left: 12px; }
.u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {
padding-left: 8px; }
.u-table:focus {
outline: none;
@ -585,3 +600,25 @@
::-webkit-scrollbar-track-piece {
display: none; }
.header-dispaly-in-row.u-table table {
table-layout: fixed; }
.header-dispaly-in-row th {
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden; }
.body-dispaly-in-row.u-table table {
table-layout: fixed; }
.body-dispaly-in-row td {
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden; }
.u-table-drag-hidden-cont {
position: absolute;
top: -1000px; }

42
build/Table.js
View File

@ -48,6 +48,10 @@ var _beeLoading = require('bee-loading');
var _beeLoading2 = _interopRequireDefault(_beeLoading);
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; }
@ -100,7 +104,8 @@ var propTypes = {
onFilterClear: _propTypes2["default"].func,
syncHover: _propTypes2["default"].bool,
tabIndex: _propTypes2["default"].string,
hoverContent: _propTypes2["default"].func
hoverContent: _propTypes2["default"].func,
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg'])
};
var defaultProps = {
@ -136,7 +141,7 @@ var defaultProps = {
return body;
},
emptyText: function emptyText() {
return 'No Data';
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' });
},
columns: [],
minColumnWidth: 80,
@ -145,7 +150,8 @@ var defaultProps = {
setRowHeight: function setRowHeight() {},
setRowParentIndex: function setRowParentIndex() {},
tabIndex: '0',
heightConsistent: false
heightConsistent: false,
size: 'md'
};
var Table = function (_Component) {
@ -156,6 +162,15 @@ var Table = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.resize = function () {
(0, _utils.debounce)(_this.syncFixedTableRowHeight, 150);
_this.computeTableWidth();
var renderFlag = _this.state.renderFlag;
_this.setState({
renderFlag: !renderFlag
});
};
_this.renderDragHideTable = function () {
var _this$props = _this.props,
columns = _this$props.columns,
@ -270,7 +285,7 @@ var Table = function (_Component) {
}
if (this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight();
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
}
};
@ -785,7 +800,8 @@ var Table = function (_Component) {
treeType: childrenColumn || this.treeType ? true : false,
fixedIndex: fixedIndex + lazyCurrentIndex,
rootIndex: rootIndex,
syncHover: props.syncHover
syncHover: props.syncHover,
bodyDisplayInRow: props.bodyDisplayInRow
})));
this.treeRowIndex++;
var subVisible = visible && isRowExpanded;
@ -1309,7 +1325,7 @@ var Table = function (_Component) {
var props = this.props;
var clsPrefix = props.clsPrefix;
var hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
var className = props.clsPrefix;
if (props.className) {
className += ' ' + props.className;
@ -1325,6 +1341,12 @@ var Table = function (_Component) {
if (props.height) {
className += ' fixed-height';
}
if (props.bodyDisplayInRow) {
className += ' body-dispaly-in-row';
}
if (props.headerDisplayInRow) {
className += ' header-dispaly-in-row';
}
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
var loading = props.loading;
if (typeof loading === 'boolean') {
@ -1332,6 +1354,12 @@ var Table = function (_Component) {
show: loading
};
}
if (props.size) {
className += ' ' + clsPrefix + '-' + props.size;
}
if (hasFixedLeft) {
className += ' has-fixed-left';
}
return _react2["default"].createElement(
'div',
@ -1350,7 +1378,7 @@ var Table = function (_Component) {
this.getEmptyText(),
this.getFooter()
),
this.columnManager.isAnyColumnsLeftFixed() && _react2["default"].createElement(
hasFixedLeft && _react2["default"].createElement(
'div',
{ className: clsPrefix + '-fixed-left' },
this.getLeftFixedTable()

12
build/TableCell.js
View File

@ -73,7 +73,8 @@ var TableCell = function (_Component) {
expandIcon = _props2.expandIcon,
column = _props2.column,
fixed = _props2.fixed,
showSum = _props2.showSum;
showSum = _props2.showSum,
bodyDisplayInRow = _props2.bodyDisplayInRow;
var dataIndex = column.dataIndex,
render = column.render;
var _column$className = column.className,
@ -83,7 +84,8 @@ var TableCell = function (_Component) {
var text = _objectPath2["default"].get(record, dataIndex);
var tdProps = void 0;
var colSpan = void 0;
var rowSpan = void 0;
var rowSpan = void 0,
title = void 0;
if (render && !showSum) {
text = render(text, record, index);
@ -114,13 +116,17 @@ var TableCell = function (_Component) {
if (column.textAlign) {
className = className + (' text-' + column.textAlign);
}
if (typeof text == 'string' && bodyDisplayInRow) {
title = text;
}
return _react2["default"].createElement(
'td',
{
colSpan: colSpan,
rowSpan: rowSpan,
className: className,
onClick: this.handleClick
onClick: this.handleClick,
title: title
},
indentText,
expandIcon,

585
build/TableHeader.js
View File

@ -42,6 +42,13 @@ var propTypes = {
rows: _propTypes2["default"].array
};
function getDiv(id) {
var div = document.createElement("div");
div.className = "u-table-drag-hidden-cont";
div.id = id;
return div;
}
var TableHeader = function (_Component) {
_inherits(TableHeader, _Component);
@ -50,6 +57,146 @@ var TableHeader = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.getOnLineObject = function (_element) {
var type = _element.getAttribute('data-type'),
elementObj = null;
if (!type) {
var element = _element.parentElement || parentNode; //兼容写法。
if (element.getAttribute('data-type')) {
elementObj = element;
}
} else {
elementObj = _element;
}
return elementObj;
};
_this.onTrMouseDown = function (e) {
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e),
targetEvent = _utils.Event.getTarget(event);
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
contentTable = _this$props.contentTable;
var currentElement = _this.getOnLineObject(targetEvent);
if (!currentElement) return;
var type = currentElement.getAttribute('data-type');
if (!_this.props.dragborder && !_this.props.draggable) return;
if (type == 'online' && _this.props.dragborder) {
if (!_this.props.dragborder) return;
targetEvent.setAttribute('draggable', false); //添加交换列效果
var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
var defaultWidth = currentElement.getAttribute("data-th-width");
var currentObj = _this.table.cols[currentIndex];
_this.drag.option = "border"; //拖拽操作
_this.drag.currIndex = currentIndex;
_this.drag.oldLeft = event.x;
_this.drag.oldWidth = parseInt(currentObj.style.width);
_this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
} else if (type != 'online' && _this.props.draggable) {
if (!_this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
targetEvent.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = event.target;
var _currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
_this.drag.currIndex = _currentIndex;
} else {
// console.log("onTrMouseDown dragborder or draggable is all false !");
return;
}
};
_this.onTrMouseMove = function (e) {
if (!_this.props.dragborder && !_this.props.draggable) return;
var _this$props2 = _this.props,
clsPrefix = _this$props2.clsPrefix,
dragborder = _this$props2.dragborder,
contentDomWidth = _this$props2.contentDomWidth,
scrollbarWidth = _this$props2.scrollbarWidth,
contentTable = _this$props2.contentTable,
headerScroll = _this$props2.headerScroll;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (_this.props.dragborder && _this.drag.option == "border") {
//移动改变宽度
var currentCols = _this.table.cols[_this.drag.currIndex];
var diff = event.x - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff;
_this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this.minWidth) {
currentCols.style.width = newWidth + 'px';
//hao 支持固定表头拖拽 修改表体的width
if (_this.fixedTable.cols) {
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
}
var newTableWidth = _this.drag.tableWidth + diff + 'px';
_this.table.table.style.width = newTableWidth; //改变table的width
if (_this.table.innerTableBody) {
//TODO 后续需要处理此处
_this.table.innerTableBody.style.width = newTableWidth;
}
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理
if (headerScroll) {
if (showScroll < 0) {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
_this.table.contentTableHeader.style.overflowX = 'scroll';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
_this.optTableMargin(_this.table.fixedRighHeadertTable, scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
} else {
_this.table.contentTableHeader.style.overflowX = 'hidden';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
_this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
}
} else {
if (showScroll < 0) {
_this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth);
_this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' });
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' });
} else {
_this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
_this.optTableMargin(_this.table.fixedRightBodyTable, 0);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'auto' });
}
}
}
} else if (_this.props.draggable && _this.drag.option == "draggable") {
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
} else {
// console.log("onTrMouseMove dragborder or draggable is all false !");
}
};
_this.onTrMouseUp = function (e) {
var event = _utils.Event.getEvent(e);
var width = _this.drag.newWidth;
_this.mouseClear();
_this.props.onDropBorder && _this.props.onDropBorder(event, width);
};
_this.clearThsDr = function () {
var ths = _this.table.ths;
for (var index = 0; index < ths.length; index++) {
ths[index].setAttribute('draggable', false); //去掉交换列效果
}
};
_this.bodyonLineMouseUp = function (events, type) {
if (!_this.drag || !_this.drag.option) return;
_this.mouseClear();
};
_this.optTableMargin = function (table, scrollbarWidth) {
if (table) {
table.style.marginBottom = scrollbarWidth + "px";
@ -68,137 +215,31 @@ var TableHeader = function (_Component) {
}
};
_this.onLineMouseMove = function (e) {
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
dragborder = _this$props.dragborder,
contentDomWidth = _this$props.contentDomWidth,
scrollbarWidth = _this$props.scrollbarWidth,
contentTable = _this$props.contentTable,
headerScroll = _this$props.headerScroll;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (!_this.props.dragborder) return;
if (_this.drag.option != "border") {
return false;
}
//移动改变宽度
var currentCols = _this.table.cols[_this.drag.currIndex];
var diff = event.x - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff;
_this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this.minWidth) {
currentCols.style.width = newWidth + 'px';
//hao 支持固定表头拖拽 修改表体的width
if (_this.fixedTable.cols) {
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
}
var newTableWidth = _this.drag.tableWidth + diff + 'px';
_this.table.table.style.width = newTableWidth; //改变table的width
_this.table.innerTableBody.style.width = newTableWidth;
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理
if (headerScroll) {
if (showScroll < 0) {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
_this.table.contentTableHeader.style.overflowX = 'scroll';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
_this.optTableMargin(_this.table.fixedRighHeadertTable, scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
} else {
_this.table.contentTableHeader.style.overflowX = 'hidden';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
_this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
}
} else {
if (showScroll < 0) {
_this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth);
_this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' });
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' });
} else {
_this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
_this.optTableMargin(_this.table.fixedRightBodyTable, 0);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'auto' });
}
}
}
};
_this.onLineMouseDown = function (e) {
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
var _this$props2 = _this.props,
clsPrefix = _this$props2.clsPrefix,
contentTable = _this$props2.contentTable;
if (!_this.props.dragborder) return;
var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
var defaultWidth = _utils.Event.getTarget(event).getAttribute("data-th-width");
var currentObj = _this.table.cols[currentIndex];
_this.drag.option = "border"; //拖拽操作
_this.drag.currIndex = currentIndex;
_this.drag.oldLeft = event.x;
_this.drag.oldWidth = parseInt(currentObj.style.width);
_this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
};
_this.onLineMouseUp = function (event) {
var width = _this.drag.newWidth;
_this.clearDragBorder(event);
_this.props.onDropBorder && _this.props.onDropBorder(event, width);
};
_this.bodyonLineMouseMove = function (event) {
_this.clearDragBorder(event);
};
_this.dragAbleMouseDown = function (e) {
// Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
var th = _this.getThDome(event.target);
if (!th) return;
event.target.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = event.target;
_this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], '', true); //th
_this.removeDragBorderEvent(); //清理掉拖拽列宽的事件
_this.addDragAbleEvent(); //添加拖拽交换列的事件
};
_this.dragAbleMouseUp = function (e) {
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
_this.removeDragAbleEvent();
_this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], 'remove', true); //th
//拖拽交换列事件
_this.thEventListen([{ key: 'mousedown', fun: _this.dragAbleMouseDown }], 'remove', true); //表示把事件添加到th元素上
_this.initEvent();
};
_this.onDragStart = function (e) {
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
if (_this.drag && _this.drag.option != 'dragAble') {
return;
}
var th = _this.getThDome(event.target);
if (!th) return;
var currentIndex = parseInt(th.getAttribute("data-line-index"));
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
var currentIndex = parseInt(target.getAttribute("data-line-index"));
var currentKey = target.getAttribute('data-line-key');
if (event.dataTransfer.setDragImage) {
var crt = target.cloneNode(true);
crt.style.backgroundColor = "#ebecf0";
crt.style.width = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
crt.style.height = "40px";
// crt.style['line-height'] = "40px";
// document.body.appendChild(crt);
document.getElementById(_this._table_none_cont_id).appendChild(crt);
event.dataTransfer.setDragImage(crt, 0, 0);
}
var currentKey = event.target.getAttribute('data-line-key');
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey);
_this.currentObj = _this.props.rows[0][currentIndex];
// event.dataTransfer.setDragImage(event.target, 0, 0);
};
_this.onDragOver = function (e) {
@ -207,17 +248,52 @@ var TableHeader = function (_Component) {
_this.onDrop = function (e) {
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
if (_this.drag && _this.drag.option != 'dragAble') {
return;
}
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
var data = _this.getCurrentEventData(e);
};
_this.onDragEnter = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this._dragCurrent = target;
var currentIndex = target.getAttribute("data-line-index");
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") {
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style", "border:2px dashed rgba(5,0,0,0.25)");
// target.style.backgroundColor = 'rgb(235, 236, 240)';
}
};
_this.onDragEnd = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this._dragCurrent.setAttribute("style", "");
// this._dragCurrent.style = "";
document.getElementById(_this._table_none_cont_id).innerHTML = "";
var data = _this.getCurrentEventData(_this._dragCurrent);
if (!data) return;
if (!_this.currentObj || _this.currentObj.key == data.key) return;
if (!_this.props.onDrop) return;
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
};
_this.onDragLeave = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
var currentIndex = target.getAttribute("data-line-index");
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") {
target.setAttribute("style", "");
// this._dragCurrent.style = "";
}
};
_this.handlerFilterChange = function (key, value, condition) {
var onFilterChange = _this.props.onFilterChange;
@ -353,68 +429,18 @@ var TableHeader = function (_Component) {
return _this;
}
/**
*
* 动态绑定th line 事件方法
* @param {*} events
* @param {*} type type 为false 为增加事件
* @param {*} eventSource 为false 给 th 内部的div增加事件
* @memberof TableHeader
*/
TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
var _table = this.table,
ths = _table.ths,
cols = _table.cols;
for (var index = 0; index < ths.length; index++) {
var element = ths[index]; //.getAttribute('data-type');
if (!element.getAttribute('data-th-fixed')) {
var colLine = null;
if (element.children.length === 0) {
colLine = element;
} else if (element.children.length > 0) {
colLine = element.lastElementChild;
} else if (element.children.length === 1) {
colLine = element.children[0];
}
// const colLine = element.children.length > 1?element.lastElementChild:element.children[0];
for (var i = 0; i < events.length; i++) {
var _event = events[i];
var _dataSource = eventSource ? element : colLine;
if (type === "remove") {
_utils.EventUtil.removeHandler(_dataSource, _event.key, _event.fun);
} else {
_utils.EventUtil.addHandler(_dataSource, _event.key, _event.fun);
}
}
}
}
};
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
for (var i = 0; i < events.length; i++) {
var _event = events[i];
if (type == "remove") {
_utils.EventUtil.removeHandler(document.body, _event.key, _event.fun);
} else {
_utils.EventUtil.addHandler(document.body, _event.key, _event.fun);
}
}
};
TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
this.initTable();
this.initEvent();
};
TableHeader.prototype.componentDidMount = function componentDidMount() {
var uid = "_table_uid_" + new Date().getTime();
this._table_none_cont_id = uid;
var div = getDiv(uid);
document.querySelector("body").appendChild(div);
};
TableHeader.prototype.componentWillUnmount = function componentWillUnmount() {
if (!this.table) return;
if (this.props.draggable) {
@ -423,44 +449,7 @@ var TableHeader = function (_Component) {
if (this.props.dragborder) {
this.removeDragBorderEvent();
}
};
// componentDidMount(){
// this.initTable();
// this.initEvent();
// }
/**
* 初始化拖拽列宽的事件处理
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.initEvent = function initEvent() {
var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
if (this.props.dragborder) {
this.thEventListen(events, '', true); //表示把事件添加到th元素上
this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }]); //表示把事件添加到竖线
this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }]);
}
if (!this.props.draggable) return;
//拖拽交换列事件
this.thEventListen([{ key: 'mousedown', fun: this.dragAbleMouseDown }], '', true); //表示把事件添加到th元素上
};
/**
* 移除当前全局事件对象
* @memberof TableHeader
*/
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
this.thEventListen(events, 'remove', true); //表示把事件添加到th元素上
this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }], 'remove'); //表示把事件添加到竖线
this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }], 'remove');
this.eventListen([{ key: 'mousedown', fun: this.onTrMouseDown }], 'remove', this.table.tr[0]);
};
/**
@ -474,13 +463,13 @@ var TableHeader = function (_Component) {
var contentTable = this.props.contentTable;
if (!this.props.dragborder && !this.props.draggable) return;
// let el = ReactDOM.findDOMNode(this);
var tableDome = this._thead.parentNode;
var table = {};
if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
table.table = tableDome;
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr");
}
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
@ -505,13 +494,69 @@ var TableHeader = function (_Component) {
}
}
};
/**
* 事件初始化
*/
TableHeader.prototype.initEvent = function initEvent() {
this.dragBorderEventInit(); //列宽
this.dragAbleEventInit(); //交换列
if (this.table && this.table.tr) {
this.eventListen([{ key: 'mousedown', fun: this.onTrMouseDown }], '', this.table.tr[0]); //body mouseup
}
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
};
/**
* 拖拽列宽事件的监听
*/
TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
if (!this.props.dragborder) return;
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
};
/**
* 删除拖动改变列宽的事件监听
*/
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
this.eventListen(events, 'remove', this.table.tr[0]);
};
TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
if (!this.table) return;
var tr = this.table.tr;
for (var i = 0; i < events.length; i++) {
var _event = events[i];
if (type === "remove") {
_utils.EventUtil.removeHandler(eventSource, _event.key, _event.fun);
} else {
_utils.EventUtil.addHandler(eventSource, _event.key, _event.fun);
}
}
};
/**
*相关滚动条联动操作
*
*根据 data-type 来获取当前拖拽的对象的Object，如果为null表示拖动的对象并非是online
* @memberof TableHeader
*/
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
/**
* 调整列宽的move事件
* @memberof TableHeader
@ -519,23 +564,12 @@ var TableHeader = function (_Component) {
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
* 调整列宽的up事件
* @memberof TableHeader
*/
/**
* 调整列宽的up事件
* @memberof TableHeader
*/
/**
* 调整列宽到区域以外的up事件
*/
TableHeader.prototype.clearDragBorder = function clearDragBorder() {
TableHeader.prototype.mouseClear = function mouseClear() {
if (!this.drag || !this.drag.option) return;
var rows = this.props.rows;
@ -544,32 +578,36 @@ var TableHeader = function (_Component) {
this.drag = {
option: ""
};
if (this.props.draggable) {
this.removeDragAbleEvent();
}
this.clearThsDr();
};
//---拖拽列宽代码逻辑----start-----
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
/**
* 调整交换列down事件
* @memberof TableHeader
*/
/**
* 调整交换列up事件
*相关滚动条联动操作
*
* @memberof TableHeader
*/
//---拖拽交换列代码----start-----
/**
* 添加换列的事件监听
*/
TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
TableHeader.prototype.dragAbleEventInit = function dragAbleEventInit() {
if (!this.props.draggable) return;
var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
{ key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{ key: 'drop', fun: this.onDrop }];
this.thEventListen(events, '', true);
{ key: 'drop', fun: this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
{ key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }];
this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
};
/**
@ -578,8 +616,8 @@ var TableHeader = function (_Component) {
TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() {
var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }];
this.thEventListen(events, 'remove', true);
var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }];
this.eventListen(events, 'remove', this.table.tr[0]);
};
/**
@ -588,9 +626,9 @@ var TableHeader = function (_Component) {
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
/**
@ -599,9 +637,7 @@ var TableHeader = function (_Component) {
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
var event = _utils.Event.getEvent(e);
var th = this.getThDome(event.target);
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(th) {
if (!th) {
console.log(" event target is not th ! ");
return null;
@ -617,26 +653,6 @@ var TableHeader = function (_Component) {
return null;
}
};
/**
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns <th />对象
* @memberof TableHeader
*/
TableHeader.prototype.getThDome = function getThDome(element) {
var _tagName = element.tagName.toLowerCase();
if (element.getAttribute('data-filter-type') === 'filterContext') return null;
if (_tagName === 'i') return null;
if (_tagName != 'th') {
return this.getThDome(element.parentElement);
} else {
return element;
}
};
//---拖拽列交换----end-----
/**
@ -675,9 +691,10 @@ var TableHeader = function (_Component) {
return _this2._thead = _thead;
} }),
rows.map(function (row, index) {
var _rowLeng = row.length - 1;
return _react2["default"].createElement(
"tr",
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
{ key: index, style: rowStyle, aaaa: true, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
row.map(function (da, columIndex, arr) {
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
delete da.drgHover;
@ -719,22 +736,20 @@ var TableHeader = function (_Component) {
thClassName += " " + clsPrefix + "-thead-th " + canDotDrag;
}
thClassName += " " + fixedStyle;
if (!da.fixed) {
return _react2["default"].createElement(
"th",
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed,
"data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width }),
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, "data-line-key": da.key,
"data-line-index": columIndex, "data-th-width": da.width, "data-type": "draggable" }),
da.children,
dragborder ? _react2["default"].createElement(
dragborder && columIndex != _rowLeng ? _react2["default"].createElement(
"div",
{ ref: function ref(el) {
return _this2.gap = el;
}, "data-line-key": da.key,
"data-line-index": columIndex, "data-th-width": da.width,
"data-type": "online", className: clsPrefix + "-thead-th-drag-gap" },
_react2["default"].createElement("div", { id: "th-online", className: "online", "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width })
_react2["default"].createElement("div", { className: "online" })
) : ""
);
} else {

6
build/TableRow.js
View File

@ -241,7 +241,8 @@ var TableRow = function (_Component) {
indent = _props9.indent,
indentSize = _props9.indentSize,
isHiddenExpandIcon = _props9.isHiddenExpandIcon,
fixed = _props9.fixed;
fixed = _props9.fixed,
bodyDisplayInRow = _props9.bodyDisplayInRow;
var showSum = false;
var className = this.props.className;
@ -288,7 +289,8 @@ var TableRow = function (_Component) {
key: index + "_" + (columns[i].key || columns[i].dataIndex || i),
fixed: fixed,
showSum: showSum,
expandIcon: isColumnHaveExpandIcon ? expandIcon : null
expandIcon: isColumnHaveExpandIcon ? expandIcon : null,
bodyDisplayInRow: bodyDisplayInRow
}));
}
var style = { height: height };

38
build/lib/dragColumn.js
View File

@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
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; };
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
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; };
exports["default"] = dragColumn;
var _react = require('react');
@ -28,7 +28,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var cloneDeep = require('lodash.clonedeep');
/**
* 参数: 列拖拽
* @param {*} Table
@ -66,23 +65,23 @@ function dragColumn(Table) {
targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key;
});
// for (let index = 0; index < columns.length; index++) {
// const da = columns[index];
// if(da.key === dragSource.key){
// columns[index] = dragTargColum;
// }
// if(da.key === dragTarg.key){
// columns[index] = dragSourceColum;
// }
// }
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
}
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
_this.setState({
columns: cloneDeep(columns)
var _newColumns = [];
columns.forEach(function (da, i) {
var newDate = _extends(da, {});
newDate.title = da.title;
_newColumns.push(newDate);
});
// console.log(" onDrop-------columns--- ",columns);
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
// console.log(columns === _newColumns);
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
}
@ -106,14 +105,6 @@ function dragColumn(Table) {
}
};
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
return obj;
}
var resultData = {};
return this.recursion(obj, resultData);
};
DragColumn.prototype.recursion = function (_recursion) {
function recursion(_x) {
return _recursion.apply(this, arguments);
@ -150,7 +141,6 @@ function dragColumn(Table) {
onDrop = _props.onDrop,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
var key = new Date().getTime();
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
@ -161,8 +151,6 @@ function dragColumn(Table) {
onDragEnter: this.onDragEnter,
draggable: draggable,
dragborder: dragborder
// dragborder={false}
, dragborderKey: key
}));
};

11
build/lib/filterColumn.js
View File

@ -236,11 +236,14 @@ function filterColumn(Table, Popover) {
key: da.key + "_" + i,
className: prefixCls + "-pop-cont-item"
},
_react2["default"].createElement(_beeCheckbox2["default"], paramObj),
_react2["default"].createElement(
"span",
null,
da.title
_beeCheckbox2["default"],
paramObj,
_react2["default"].createElement(
"span",
null,
da.title
)
)
);
});

2
build/lib/multiSelect.js
View File

@ -97,7 +97,7 @@ function multiSelect(Table, Checkbox) {
var count = 0;
var disabledCount = 0;
data.forEach(function (da) {
if (da._checked) {
if (da._checked && !da._disabled) {
count++;
}
if (da._disabled) {

184
build/lib/newMultiSelect.js
View File

@ -1,191 +1,17 @@
"use strict";
'use strict';
Object.defineProperty(exports, "__esModule", {
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; };
exports["default"] = newMultiSelect;
var _react = require("react");
var _multiSelect = require('./multiSelect');
var _react2 = _interopRequireDefault(_react);
var _util = require("./util");
var _multiSelect2 = _interopRequireDefault(_multiSelect);
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; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
/**
* 参数: 过滤表头
* @param {*} Table
* @param {*} Checkbox
* @param {*} Popover
* @param {*} Icon
*/
function newMultiSelect(Table, Checkbox) {
var _class, _temp, _initialiseProps;
return _temp = _class = function (_Component) {
_inherits(NewMultiSelect, _Component);
function NewMultiSelect(props) {
_classCallCheck(this, NewMultiSelect);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_initialiseProps.call(_this);
var checkedAll = _this.setChecked(props.data);
_this.state = {
checkedAll: checkedAll,
data: (0, _util.ObjectAssign)(props.data)
};
return _this;
}
NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.data != nextProps.data) {
this.setState({
data: (0, _util.ObjectAssign)(nextProps.data),
checkedAll: this.setChecked(nextProps.data)
});
}
};
NewMultiSelect.prototype.setChecked = function setChecked(data) {
var allCheck = true;
if (data) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var da = _step.value;
if (!da._checked) {
allCheck = false;
break;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator["return"]) {
_iterator["return"]();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return allCheck;
};
NewMultiSelect.prototype.render = function render() {
var columns = this.props.columns;
var data = this.state.data;
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
};
return NewMultiSelect;
}(_react.Component), _class.defaultProps = {
prefixCls: "u-table-mult-select"
}, _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.onAllCheckChange = function () {
var _state = _this2.state,
data = _state.data,
checkedAll = _state.checkedAll;
var selectList = [];
var check = checkedAll ? false : true;
data.forEach(function (item) {
item._checked = check;
if (item._checked) {
selectList.push(item);
}
});
_this2.setState({
checkedAll: check
});
_this2.props.getSelectedDataFunc(selectList);
};
this.handleClick = function () {};
this.onCheckboxChange = function (text, record, index) {
return function () {
var data = _this2.state.data;
var selectList = [];
record._checked = record._checked ? false : true;
var checkedAll = true;
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (!item._checked || item._checked == false) {
checkedAll = false;
break;
}
}
_this2.setState(_extends({}, _this2.state, {
checkedAll: checkedAll
}));
data.forEach(function (da) {
if (da._checked) {
selectList.push(da);
}
});
_this2.props.getSelectedDataFunc(selectList, record, index);
};
};
this.getDefaultColumns = function (columns) {
// let checkedAll = init?false:this.state.checkedAll;
var checkedAll = _this2.state.checkedAll;
var _defaultColumns = [{
title: _react2["default"].createElement(Checkbox, {
className: "table-checkbox",
checked: checkedAll
// indeterminate={indeterminate_bool && !this.state.checkedAll}
, onChange: _this2.onAllCheckChange
}),
key: "checkbox",
dataIndex: "checkbox",
fixed: "left",
width: 50,
render: function render(text, record, index) {
var attr = {};
record._disabled ? attr.disabled = record._disabled : "";
return _react2["default"].createElement(Checkbox, _extends({
key: index,
className: "table-checkbox"
}, attr, {
checked: record._checked,
onClick: _this2.handleClick,
onChange: _this2.onCheckboxChange(text, record, index)
}));
}
}];
return _defaultColumns.concat(columns);
};
}, _temp;
return (0, _multiSelect2["default"])(Table, Checkbox);
}
module.exports = exports["default"];
module.exports = exports['default'];

32
demo/TableDemo.scss
View File

@ -1,20 +1,20 @@
@import "../node_modules/tinper-bee-core/scss/index.scss";
@import "../node_modules/bee-panel/src/Panel.scss";
@import "../node_modules/bee-layout/src/Layout.scss";
@import "../node_modules/bee-button/src/Button.scss";
@import "../node_modules/bee-transition/src/Transition.scss";
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
@import "../node_modules/bee-form-control/src/FormControl.scss";
@import "../node_modules/bee-pagination/src/Pagination.scss";
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
@import "../node_modules/bee-select/src/Select.scss";
// @import "../node_modules/tinper-bee-core/scss/index.scss";
// @import "../node_modules/bee-panel/src/Panel.scss";
// @import "../node_modules/bee-layout/src/Layout.scss";
// @import "../node_modules/bee-button/src/Button.scss";
// @import "../node_modules/bee-transition/src/Transition.scss";
// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
// @import "../node_modules/bee-form-control/src/FormControl.scss";
// @import "../node_modules/bee-pagination/src/Pagination.scss";
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
// @import "../node_modules/bee-select/src/Select.scss";
// @import "../node_modules/bee-form/src/Form.scss";
@import "../node_modules/bee-popover/src/Popover.scss";
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
@import "../node_modules/bee-message/build/Message.css";
@import "../node_modules/bee-dropdown/build/Dropdown.css";
@import "../node_modules/bee-input-number/build/InputNumber.css";
@import "../node_modules/bee-modal/build/Modal.css";
// @import "../node_modules/bee-popover/src/Popover.scss";
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
// @import "../node_modules/bee-message/build/Message.css";
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
// @import "../node_modules/bee-input-number/build/InputNumber.css";
// @import "../node_modules/bee-modal/build/Modal.css";
@import "../src/Table.scss";

32
demo/demolist/Demo0101.js
View File

@ -2,7 +2,8 @@
*
* @title 基本表格
* @parent 基础 Basic
* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
* @description 单元格数据过长时，可结合Tooltip组件使用。
* demo0101
*/
import React, { Component } from "react";
@ -11,9 +12,8 @@ import Table from "../../src";
const columns = [
{
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
fixed:'left',
textAlign:'center',
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
@ -29,15 +29,16 @@ const columns = [
);
}
},
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
{ title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
{ title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
{ title: "员工姓名", dataIndex: "b", key: "b", width:100 },
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
];
const data = [
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
];
class Demo01 extends Component {
@ -53,24 +54,11 @@ class Demo01 extends Component {
console.log('内容：' , this.currentRecord);
}
onRowHover=(index,record)=>{
this.currentIndex = index;
this.currentRecord = record;
}
getHoverContent=()=>{
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
}
render() {
return (
<Table
columns={columns}
data={data}
parentNodeId='parent'
bordered = {true}
hoverContent={this.getHoverContent}
onRowHover={this.onRowHover}
/>
);
}

15
demo/demolist/Demo0102.js
View File

@ -2,8 +2,8 @@
*
* @title 默认无数据展示
* @parent 基础 Basic
* @description 无数据时显示效果展示（可自定义）
*
* @description 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。
* demo0102
*/
@ -33,11 +33,18 @@ const columns02 = [
const data02 = [];
const emptyFunc = () => <Icon type="uf-nodata"></Icon>
// 在此自定义无数据时的展示内容
const emptyFunc = () => 'No Data';
class Demo02 extends Component {
render() {
return <Table className="demo02" columns={columns02} data={data02} emptyText={emptyFunc} />;
return (
<Table
columns={columns02}
data={data02}
// emptyText={emptyFunc}
/>
)
}
}

6
demo/demolist/Demo0102.scss
View File

@ -1,6 +0,0 @@
.demo02 {
.u-table-placeholder i{
font-size: 60px;
line-height: 60px;
}
}

1
demo/demolist/Demo0103.js
View File

@ -3,6 +3,7 @@
* @title 固定表头
* @parent 基础 Basic
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
* demo0103
*/
import React, { Component } from 'react';

126
demo/demolist/Demo0104.js
View File

@ -3,7 +3,7 @@
* @title 隔行换色
* @parent 基础 Basic
* @description 可自定义斑马线颜色
*
* demo0104
*/
@ -11,64 +11,92 @@ import React, { Component } from 'react';
import Table from '../../src';
const columns04 = [
{
title: "员工姓名",
width: 100,
dataIndex: "name",
key: "name"
{title: "序号",dataIndex: "index",key: "index",width: 80,
render(text, record, index) {
return index + 1;
}
},
{ title: "年龄", width: 100, dataIndex: "age", key: "age"},
{ title: "住址", dataIndex: "address", key: "1" }
{title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
{title: "供应商名称",dataIndex: "supplierName",key: "supplierName",width: 200},
{title: "类型",dataIndex: "type_name",key: "type_name",width: 200},
{title: "采购组织",dataIndex: "purchasing",key: "purchasing",width: 200},
{title: "采购组",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
{title: "凭证日期",dataIndex: "voucherDate",key: "voucherDate",width: 200}
];
const data04 = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York Park"
{
orderCode:"NU0391025",
supplierName: "xx供应商",
type_name: "1",
purchasing:'组织c',
purchasingGroup:"aa",
voucherDate:"2018年03月18日",
key: "1"
},
{
orderCode:"NU0391026",
supplierName: "xx供应商",
type_name: "2",
purchasing:'组织a',
purchasingGroup:"bb",
voucherDate:"2018年02月05日",
key: "2"
},
{
key: "2",
name: "Jim Green",
age: 40,
address: "London Park"
{
orderCode:"NU0391027",
supplierName: "xx供应商",
type_name: "3",
purchasing:'组织b',
purchasingGroup:"aa",
voucherDate:"2018年07月01日",
key: "3"
},
{
key: "3",
name: "Jim Green",
age: 40,
address: "London Park"
{
orderCode:"NU0391028",
supplierName: "xx供应商",
type_name: "4",
purchasing:'组织c',
purchasingGroup:"cc",
voucherDate:"2019年03月01日",
key: "4"
},
{
key: "4",
name: "Jim Green",
age: 40,
address: "London Park"
},{
key: "11",
name: "John Brown",
age: 32,
address: "New York Park"
{
orderCode:"NU0391029",
supplierName: "xx供应商",
type_name: "5",
purchasing:'组织d',
purchasingGroup:"ss",
voucherDate:"2019年02月14日",
key: "5"
},
{
key: "12",
name: "Jim Green",
age: 40,
address: "London Park"
{
orderCode:"NU0391030",
supplierName: "xx供应商",
type_name: "1",
purchasing:'组织e',
purchasingGroup:"zz",
voucherDate:"2019年02月18日",
key: "6"
},
{
key: "13",
name: "Jim Green",
age: 40,
address: "London Park"
{
orderCode:"NU0391031",
supplierName: "xx供应商",
type_name: "2",
purchasing:'组织f',
purchasingGroup:"qq",
voucherDate:"2019年01月01日",
key: "7"
},
{
orderCode:"NU0391032",
supplierName: "xx供应商",
type_name: "3",
purchasing:'组织g',
purchasingGroup:"pp",
voucherDate:"2019年01月31日",
key: "8"
},
{
key: "14",
name: "Jim Green",
age: 40,
address: "London Park"
}
];
class Demo04 extends Component {

2
demo/demolist/Demo0105.js
View File

@ -3,7 +3,7 @@
* @title 表格 Loading 加载
* @parent 基础 Basic
* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
*
* demo0105
*/
import React, { Component } from "react";

69
demo/demolist/Demo0106.js Normal file
View File

@ -0,0 +1,69 @@
/**
*
* @title 单元格内容居中
* @parent 基础 Basic
* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。
* demo0106
*/
import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import Table from "../../src";
const columns = [
{
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
fixed:'left',
textAlign:'center',
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "80px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ title: "员工姓名", dataIndex: "b", key: "b", width:100,textAlign:'center'},
{ title: "性别", dataIndex: "c", key: "c", width: 100,textAlign:'center'},
{ title: "部门", dataIndex: "d", key: "d", width: 100,textAlign:'center' },
{ title: "职级", dataIndex: "e", key: "e", width: 100,textAlign:'center' }
];
const data = [
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
];
class Demo06 extends Component {
constructor(props) {
super(props);
this.state = {
data: data
}
}
handleClick = () => {
console.log('这是第' , this.currentIndex , '行');
console.log('内容：' , this.currentRecord);
}
render() {
return (
<Table
columns={columns}
data={data}
bordered
/>
);
}
}
export default Demo06;

1
demo/demolist/Demo0201.js
View File

@ -3,6 +3,7 @@
* @title 横向滚动条
* @parent 滚动 Scroll View
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
* demo0201
*/
import React, { Component } from "react";

133
demo/demolist/Demo0202.js
View File

@ -3,75 +3,104 @@
* @title 纵向滚动条
* @parent 滚动 Scroll View
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
* demo0202
*/
import React, { Component } from "react";
import Table from "../../src";
const columns12 = [
{
title: "Full Name",
width: 100,
dataIndex: "name",
key: "name"
const columns = [
{title: "序号",dataIndex: "index",key: "index",width: 80,
render(text, record, index) {
return index + 1;
}
},
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
{ title: "Address", dataIndex: "address", key: "1" }
{title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
{title: "供应商名称",dataIndex: "supplierName",key: "supplierName",width: 200},
{title: "类型",dataIndex: "type_name",key: "type_name",width: 200},
{title: "采购组织",dataIndex: "purchasing",key: "purchasing",width: 200},
{title: "采购组",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
{title: "凭证日期",dataIndex: "voucherDate",key: "voucherDate",width: 200}
];
const data12 = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York Park"
const data = [
{
orderCode:"NU0391025",
supplierName: "xx供应商",
type_name: "1",
purchasing:'组织c',
purchasingGroup:"aa",
voucherDate:"2018年03月18日",
key: "1"
},
{
orderCode:"NU0391026",
supplierName: "xx供应商",
type_name: "2",
purchasing:'组织a',
purchasingGroup:"bb",
voucherDate:"2018年02月05日",
key: "2"
},
{
key: "2",
name: "Jim Green",
age: 40,
address: "London Park"
{
orderCode:"NU0391027",
supplierName: "xx供应商",
type_name: "3",
purchasing:'组织b',
purchasingGroup:"aa",
voucherDate:"2018年07月01日",
key: "3"
},
{
key: "3",
name: "Jim Green",
age: 40,
address: "London Park"
{
orderCode:"NU0391028",
supplierName: "xx供应商",
type_name: "4",
purchasing:'组织c',
purchasingGroup:"cc",
voucherDate:"2019年03月01日",
key: "4"
},
{
key: "4",
name: "Jim Green",
age: 40,
address: "London Park"
},{
key: "11",
name: "John Brown",
age: 32,
address: "New York Park"
{
orderCode:"NU0391029",
supplierName: "xx供应商",
type_name: "5",
purchasing:'组织d',
purchasingGroup:"ss",
voucherDate:"2019年02月14日",
key: "5"
},
{
key: "12",
name: "Jim Green",
age: 40,
address: "London Park"
{
orderCode:"NU0391030",
supplierName: "xx供应商",
type_name: "1",
purchasing:'组织e',
purchasingGroup:"zz",
voucherDate:"2019年02月18日",
key: "6"
},
{
key: "13",
name: "Jim Green",
age: 40,
address: "London Park"
{
orderCode:"NU0391031",
supplierName: "xx供应商",
type_name: "2",
purchasing:'组织f',
purchasingGroup:"qq",
voucherDate:"2019年01月01日",
key: "7"
},
{
orderCode:"NU0391032",
supplierName: "xx供应商",
type_name: "3",
purchasing:'组织g',
purchasingGroup:"pp",
voucherDate:"2019年01月31日",
key: "8"
},
{
key: "14",
name: "Jim Green",
age: 40,
address: "London Park"
}
];
class Demo12 extends Component {
render() {
return (
<Table bordered columns={columns12} data={data12} scroll={{y:150 }} />
<Table columns={columns} data={data} scroll={{y:150 }} />
);
}
}

1
demo/demolist/Demo0301.js
View File

@ -3,6 +3,7 @@
* @title 渲染本地数据
* @parent 数据操作 Data Opetation
* @description 可自定义页头和页脚。
* demo0301
*/
import React, { Component } from "react";

1
demo/demolist/Demo0302.js
View File

@ -3,6 +3,7 @@
* @title 渲染远程数据
* @parent 数据操作 Data Opetation
* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
* demo0302
*/
import React, { Component } from "react";

2
demo/demolist/Demo0402.js
View File

@ -4,7 +4,7 @@
* @parent 列渲染 Custom Render
* @description columns[n] 可以内嵌 children，以渲染分组表头。
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
*
* demo0402
*/
import React, { Component } from "react";

3
demo/demolist/Demo0404.js
View File

@ -3,12 +3,13 @@
* @title 数据关联
* @parent 列渲染 Custom Render
* @description 数据行关联自定义菜单显示
* demo0404
*/
import React, { Component } from 'react';
import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
import Table from '../../src';
import multiSelect from "../../src/lib/multiSelect";
import multiSelect from "../../src/lib/newMultiSelect";
import sort from "../../src/lib/sort";
const { Item } = Menu;

2
demo/demolist/Demo0405.js
View File

@ -3,7 +3,7 @@
* @title 列合计（总计）
* @parent 列渲染 Custom Render
* @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。
*
* demo0405
*/
import React, { Component } from "react";

2
demo/demolist/Demo0502.scss
View File

@ -53,4 +53,4 @@
.tooltip-inner {
border-color: #F44336 !important;
}
}
}

2
demo/demolist/Demo0601.js
View File

@ -3,7 +3,7 @@
* @title 左侧固定列
* @parent 列操作-锁定 Fixed
* @description 固定列到表格的左侧
*
* demo0601
*/

2
demo/demolist/Demo0602.js
View File

@ -3,7 +3,7 @@
* @title 右侧固定列
* @parent 列操作-锁定 Fixed
* @description 固定列到表格的右侧
*
* demo0602
*/

2
demo/demolist/Demo0603.js
View File

@ -3,7 +3,7 @@
* @title 动态设置列锁定、解除锁定
* @parent 列操作-锁定 Fixed
* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
*
* demo0603
*/
import React, { Component } from 'react';
import {Icon,Menu,Dropdown} from "tinper-bee";

2
demo/demolist/Demo0701.js
View File

@ -3,7 +3,7 @@
* @title 按条件、值过滤
* @parent 列操作-过滤 Filter
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。
*
* demo0701
*/
import React, { Component } from 'react';

2
demo/demolist/Demo0702.js
View File

@ -3,7 +3,7 @@
* @title 复杂表格中行过滤
* @parent 列操作-过滤 Filter
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
*
* demo0702
*/
/**

2
demo/demolist/Demo0802.js
View File

@ -3,7 +3,7 @@
* @title 列过滤面板
* @parent 列操作-隐藏 Hide
* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
*
* demo0802
*/

49
demo/demolist/Demo0901.js
View File

@ -2,7 +2,7 @@
* @title 列排序
* @parent 列操作-排序 Sort
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
*
* demo0901
*/
@ -14,35 +14,42 @@ import sort from "../../src/lib/sort.js";
let ComplexTable = sort(Table, Icon);
const columns11 = [
{
title: "名字",
dataIndex: "a",
key: "a",
width: 100
title: "单据编号",
dataIndex: "num",
key: "num",
width: 120,
fixed: "left"
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
title: "单据日期",
dataIndex: "date",
key: "date",
width: 200,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
title: "供应商",
dataIndex: "supplier",
key: "supplier",
width: 100
},
{
title: "联系人",
dataIndex: "contact",
key: "contact",
},
{
title: "整单数量",
dataIndex: "total",
key: "total",
width: 150,
sorter: (a, b) => a.total - b.total
}
];
const data11 = [
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
{ num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,key: "1" },
{ num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,key: "2" },
{ num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,key: "3" }
];
const defaultProps11 = {

95
demo/demolist/Demo0902.js
View File

@ -2,6 +2,7 @@
* @title 后端列排序
* @parent 列操作-排序 Sort
* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
* demo0902
*/
@ -11,43 +12,89 @@ import Table from '../../src';
import sort from "../../src/lib/sort.js";
let ComplexTable = sort(Table, Icon);
// const columns11 = [
// {
// title: "名字",
// dataIndex: "a",
// key: "a",
// width: 100
// },
// {
// title: "性别",
// dataIndex: "b",
// key: "b",
// width: 100
// },
// {
// title: "年龄",
// dataIndex: "c",
// key: "c",
// width: 200,
// sorter: (a, b) => a.c - b.c
// },
// {
// title: "武功级别",
// dataIndex: "d",
// key: "d"
// },
// {
// title: "分数",
// dataIndex: "e",
// key: "e",
// sorter: (a, b) => a.c - b.c
// },
// ];
// const data11 = [
// { a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
// { a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
// { a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
// ];
const columns11 = [
{
title: "名字",
dataIndex: "a",
key: "a",
width: 100
title: "单据编号",
dataIndex: "num",
key: "num",
width: 120,
fixed: "left"
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
title: "单据日期",
dataIndex: "date",
key: "date",
width: 200,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
title: "供应商",
dataIndex: "supplier",
key: "supplier",
width: 100
},
{
title: "分数",
dataIndex: "e",
key: "e",
sorter: (a, b) => a.c - b.c
title: "联系人",
dataIndex: "contact",
key: "contact",
},
{
title: "整单数量",
dataIndex: "total",
key: "total",
width: 150,
sorter: (a, b) => a.total - b.total
},
{
title: "金额",
dataIndex: "money",
key: "money",
width: 100,
sorter: (a, b) => a.money - b.money
}
];
const data11 = [
{ a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
{ num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: "1" },
{ num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: "2" },
{ num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,key: "3" }
];
const defaultProps = {

22
demo/demolist/Demo0903.js
View File

@ -3,7 +3,7 @@
* @title 多列排序
* @parent 列操作-排序 Sort
* @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
*
* demo0903
*/
import React, { Component } from "react";
@ -15,14 +15,14 @@ import sum from "../../src/lib/sum.js";
const columns13 = [
{
title: "名字",
title: "订单编号",
dataIndex: "a",
key: "a",
className:'dfasd',
width: 200
},
{
title: "功力指数",
title: "金额",
dataIndex: "b",
key: "b",
width: 200,
@ -34,7 +34,7 @@ const columns13 = [
}
},
{
title: "年龄",
title: "整单数量",
dataIndex: "c",
key: "c",
width: 200,
@ -46,7 +46,7 @@ const columns13 = [
}
},
{
title: "成绩",
title: "日销售量",
dataIndex: "e",
key: "e",
width: 200,
@ -54,7 +54,7 @@ const columns13 = [
sorter: (a, b) => a.c - b.c,
},
{
title: "武功级别",
title: "供应商",
dataIndex: "d",
key: "d",
width: 200
@ -62,11 +62,11 @@ const columns13 = [
];
const data13 = [
{ a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
{ a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
{ a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
{ a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
{ a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
{ a: "NU0391001", b: 675, c: 30, d: "xx供应商",e:100, key: "2" },
{ a: "NU0391002", b: 43, c: 41, d: "yy供应商",e:90, key: "1" },
{ a: "NU0391003", b: 43, c: 81, d: "zz供应商", e:120,key: "4" },
{ a: "NU0391004", b: 43, c: 81, d: "aa供应商", e:130,key: "5" },
{ a: "NU0391005", b: 153, c: 25, d: "bb供应商",e:90, key: "3" }
];

15
demo/demolist/Demo1001.js
View File

@ -3,6 +3,7 @@
* @title 拖拽改变列顺序
* @parent 列操作-拖拽 Drag
* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
* demo1001
*/
import React, { Component } from 'react';
import {Icon} from "tinper-bee";
@ -12,19 +13,19 @@ import dragColumn from '../../src/lib/dragColumn';
const columns = [
{
title: "名字",
title: "订单编号",
dataIndex: "a",
key: "a",
width: 100
},
{
title: "性别",
title: "单据日期",
dataIndex: "b",
key: "b",
width: 200
},
{
title: "年龄",
title: "供应商",
dataIndex: "c",
key: "c",
width: 200,
@ -32,7 +33,7 @@ const columns = [
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
title: "联系人",
dataIndex: "d",
key: "d",
width: 200,
@ -40,9 +41,9 @@ const columns = [
];
const data = [
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
{ a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom', key: "2" },
{ a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack', key: "1" },
{ a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane', key: "3" }
];
const DragColumnTable = dragColumn(Table);

1
demo/demolist/Demo1002.js
View File

@ -3,6 +3,7 @@
* @title 拖拽改变列宽度
* @parent 列操作-拖拽 Drag
* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。
* demo1002
*/
import React, { Component } from 'react';
import {Icon} from "tinper-bee";

2
demo/demolist/Demo1101.js
View File

@ -3,7 +3,7 @@
* @title 嵌套子表格
* @parent 扩展行 Expanded Row
* @description 通过expandedRowRender参数来实现子表格
*
* demo1101
*/
import React, { Component } from "react";

2
demo/demolist/Demo1102.js
View File

@ -3,7 +3,7 @@
* @title 树型表格数据展示
* @parent 扩展行 Expanded Row
* @description 通过在data中配置children数据，来自动生成树形表格
*
* demo1102
*/

1
demo/demolist/Demo1103.js
View File

@ -3,6 +3,7 @@
* @title 自定义表格标题、表尾、选中行颜色
* @parent 扩展行 Expanded Row
* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
* demo1103
*/
import React, { Component } from "react";

1
demo/demolist/Demo1105.js
View File

@ -3,6 +3,7 @@
* @title 紧凑型、宽松型
* @parent 扩展行 Expanded Row
* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
* demo1105
*/
import React, { Component } from "react";

3
demo/demolist/Demo1106.js
View File

@ -2,7 +2,8 @@
*
* @title 自定义行高
* @parent 扩展行 Expanded Row
* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。
* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。
* demo1106
*/
import React, { Component } from "react";

3
demo/demolist/Demo1107.js
View File

@ -2,7 +2,8 @@
*
* @title 图片在表格中的展示
* @parent 扩展行 Expanded Row
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注：如果图片在固定列中，可以使用heightConsistent属性，当此属性为true，就不会出现错行问题
* demo1107
*/
import React, { Component } from "react";

2
demo/demolist/Demo1108.js
View File

@ -3,7 +3,7 @@
* @title 自定义行、列合并
* @parent 扩展行 Expanded Row
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
*
* demo1108
*/
import React, { Component } from "react";

52
demo/demolist/Demo1301.js
View File

@ -2,8 +2,8 @@
*
* @title 多选表格
* @parent 行操作-选择
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
*
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
* demo1301
*/
@ -13,39 +13,19 @@ import {Checkbox} from "tinper-bee";
import Table from '../../src';
import multiSelect from "../../src/lib/multiSelect.js";
const columns12 = [
{
title: "名字",
dataIndex: "a",
key: "a",
width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
}
const columns = [
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
];
const data12 = [
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false},
{ a: "郭靖1", b: "男", c: 25,d:'大侠', key: "4" ,_disabled:true},
{ a: "郭靖2", b: "男", c: 25,d:'大侠', key: "5" ,_checked:false}
const data = [
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1",_checked:true },
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2",_checked:false },
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3",_checked:false },
{ a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4",_disabled:true },
{ a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5",_checked:false}
];
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
let MultiSelectTable = multiSelect(Table, Checkbox);
@ -54,7 +34,7 @@ class Demo12 extends Component {
constructor(props) {
super(props);
this.state = {
data: data12
data: data
};
}
/**
@ -85,8 +65,8 @@ class Demo12 extends Component {
};
return (
<MultiSelectTable
columns={columns12}
data={data12}
columns={columns}
data={data}
multiSelect={multiObj}
rowClassName={(record,index,indent)=>{
if (record._checked) {

1
demo/demolist/Demo1401.js
View File

@ -3,6 +3,7 @@
* @title 万行以上数据渲染
* @parent 无限滚动 Infinite-scroll
* @description 万行数据渲染
* demo1401
*/
import React, { Component } from "react";

2
demo/demolist/Demo1402.js
View File

@ -3,7 +3,7 @@
* @title 嵌套子表格滚动加载
* @parent 无限滚动 Infinite-scroll
* @description 通过expandedRowRender参数来实现子表格
*
* demo1402
*/
import React, { Component } from "react";

1
demo/demolist/Demo1403.js
View File

@ -3,6 +3,7 @@
* @title 多功能表格滚动加载
* @parent 无限滚动 Infinite-scroll
* @description
* demo1403
*/
import React, { Component } from "react";

1
demo/demolist/Demo1404.js
View File

@ -2,6 +2,7 @@
* @title 层级树大数据场景
* @parent 无限滚动 Infinite-scroll
* @description
* demo1404
*/
import React, { Component } from "react";
import {Tooltip} from "tinper-bee";

27
demo/demolist/Demo1601.js
View File

@ -2,6 +2,7 @@
* @title 表格+分页
* @parent 分页 Pagination
* @description 点击分页联动表格
* demo1601
*/
import React, { Component } from "react";
@ -9,26 +10,22 @@ import {Pagination} from "tinper-bee";
import Table from "../../src";
const columns8 = [
{ title: "姓名", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{
title: "武功级别",
dataIndex: "d",
key: "d"
}
const columns = [
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
];
const pageData = {
1: [
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
],
2: [
{ a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
{ a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
{ a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4" },
{ a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5" },
]
};
@ -51,7 +48,7 @@ class Demo8 extends Component {
render() {
return (
<div className="demo8">
<Table columns={columns8} data={this.state.data} />
<Table columns={columns} data={this.state.data} />
<Pagination
first
last

39
demo/demolist/Demo1602.js
View File

@ -3,7 +3,7 @@
* @title 表格+搜索
* @parent 搜索 search
* @description 搜索刷新表格数据
*
* demo1602
*/
import React, { Component } from "react";
@ -86,36 +86,17 @@ class Search extends Component {
}
}
const columns9 = [
{
title: "姓名",
dataIndex: "a",
key: "a",
width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
}
const columns = [
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
];
const userData = [
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
];
class Demo9 extends Component {
@ -151,7 +132,7 @@ class Demo9 extends Component {
<div className="clearfix">
<Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
</div>
<Table columns={columns9} data={this.state.data} />
<Table columns={columns} data={this.state.data} />
</div>
);
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

9310
dist/demo.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

3271
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

5
docs/api.md
View File

@ -102,8 +102,9 @@ import 'bee-table/build/Table.css';
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
| textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
| textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
| bodyDisplayInRow | 设置表体的内容显示一行，超出显示省略号 | bool |
## mixin

30
package.json
View File

@ -1,19 +1,19 @@
{
"name": "bee-table",
"version": "2.0.12",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
],
"engines": {
"node": ">=6.0.0"
},
"jest": {
"name": "bee-table",
"version": "2.0.13",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
],
"engines": {
"node": ">=6.0.0"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"

23
src/Table.js
View File

@ -9,6 +9,7 @@ import addEventListener from 'tinper-bee-core/lib/addEventListener';
import ColumnManager from './ColumnManager';
import createStore from './createStore';
import Loading from 'bee-loading';
import Icon from 'bee-icon';
import { Event,EventUtil,closest} from "./utils";
const propTypes = {
@ -78,7 +79,7 @@ const defaultProps = {
scroll: {},
rowRef: () => null,
getBodyWrapper: body => body,
emptyText: () => 'No Data',
emptyText: () => <Icon type="uf-nodata" className="table-nodata"></Icon>,
columns:[],
minColumnWidth: 80,
locale:{},
@ -233,9 +234,13 @@ class Table extends Component {
}
}
resize(){
resize = ()=>{
debounce(this.syncFixedTableRowHeight, 150);
this.computeTableWidth();
let renderFlag = this.state.renderFlag;
this.setState({
renderFlag: !renderFlag
});
}
computeTableWidth() {
@ -654,6 +659,7 @@ class Table extends Component {
fixedIndex={fixedIndex+lazyCurrentIndex}
rootIndex = {rootIndex}
syncHover = {props.syncHover}
bodyDisplayInRow = {props.bodyDisplayInRow}
/>
);
this.treeRowIndex++;
@ -1179,7 +1185,7 @@ class Table extends Component {
render() {
const props = this.props;
const clsPrefix = props.clsPrefix;
const hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
let className = props.clsPrefix;
if (props.className) {
className += ` ${props.className}`;
@ -1195,6 +1201,12 @@ class Table extends Component {
if(props.height){
className += ' fixed-height';
}
if(props.bodyDisplayInRow){
className += ' body-dispaly-in-row'
}
if(props.headerDisplayInRow){
className += ' header-dispaly-in-row'
}
const isTableScroll = this.columnManager.isAnyColumnsFixed() ||
props.scroll.x ||
props.scroll.y;
@ -1207,6 +1219,9 @@ class Table extends Component {
if (props.size) {
className += ` ${clsPrefix}-${props.size}`;
}
if(hasFixedLeft){
className += ` has-fixed-left`;
}
return (
<div className={className} style={props.style} ref={el => this.contentTable = el}
@ -1220,7 +1235,7 @@ class Table extends Component {
{this.getFooter()}
</div>
{this.columnManager.isAnyColumnsLeftFixed() &&
{hasFixedLeft &&
<div className={`${clsPrefix}-fixed-left`}>
{this.getLeftFixedTable()}
</div>}

64
src/Table.scss
View File

@ -10,7 +10,8 @@ $table-border-color: unquote("rgb(#{$table-border-color-base})");
// $table-head-background-color: #f7f7f7;
// $table-head-text-color: #666;
$vertical-padding: 12px;
$horizontal-padding: 16px;
$horizontal-padding: 8px;
$first-horizontal-padding: 12px;
// $table-border-color: #e9e9e9;
$table-hover-color: #E7F2FC;
@ -78,7 +79,9 @@ $icon-color:#505F79;
tr:last-child{
border-bottom: 1px solid $table-th-bottom-border;
}
tr>th:last-child{
border-right: none;
}
}
tr {
// transition: all 0.3s ease;
@ -244,6 +247,7 @@ $icon-color:#505F79;
border-bottom: 1px solid $table-border-color;
text-align: center;
position: relative;
.table-nodata{ font-size:48px; }
}
&-expand-icon-col {
@ -544,7 +548,7 @@ $icon-color:#505F79;
width: 30px;
height: 38px ;
line-height: 38px;
right: 12px ;
right: 0px ;
top:1px ;
z-index: 2;
background: $table-head-background-color;
@ -557,6 +561,7 @@ $icon-color:#505F79;
}
&-pop-cont-item{
margin-top: 8px;
font-size: 12px;
// line-height: 30px;
cursor: pointer;
.u-checkbox {
@ -564,7 +569,7 @@ $icon-color:#505F79;
}
}
&-pop-cont-item>span{
&-pop-cont-item span.drop-menu-title{
margin-left: -3px;
max-width: 132px;
width: auto !important;
@ -600,6 +605,22 @@ $icon-color:#505F79;
}
}
}
.u-table-scroll,.u-table-fixed-left{
tr{
td:first-child, th:first-child{
padding-left: $first-horizontal-padding
}
}
}
&.has-fixed-left{
.u-table-scroll{
tr{
td:first-child, th:first-child{
padding-left: $horizontal-padding
}
}
}
}
}
.u-table:focus{
outline: none;
@ -904,4 +925,37 @@ $icon-color:#505F79;
::-webkit-scrollbar-track-piece {
display: none;
}
}
// 表格显示里面的内容显示在一行
.header-dispaly-in-row{
&.u-table{
table{
table-layout: fixed;
}
}
th{
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden;
}
}
.body-dispaly-in-row{
&.u-table{
table{
table-layout: fixed;
}
}
td{
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden;
}
}
.u-table-drag-hidden-cont{
position: absolute;
top:-1000px;
}

8
src/TableCell.js
View File

@ -30,14 +30,14 @@ class TableCell extends Component{
}
render() {
const { record, indentSize, clsPrefix, indent,
index, expandIcon, column ,fixed,showSum} = this.props;
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow} = this.props;
const { dataIndex, render } = column;
let {className = ''} = column;
let text = objectPath.get(record, dataIndex);
let tdProps;
let colSpan;
let rowSpan;
let rowSpan,title;
if (render && !showSum) {
text = render(text, record, index);
@ -71,12 +71,16 @@ class TableCell extends Component{
if(column.textAlign){
className = className+` text-${column.textAlign}`;
}
if(typeof text == 'string' && bodyDisplayInRow){
title = text
}
return (
<td
colSpan={colSpan}
rowSpan={rowSpan}
className={className}
onClick={this.handleClick}
title = {title}
>
{indentText}
{expandIcon}

634
src/TableHeader.js
View File

@ -11,6 +11,14 @@ const propTypes = {
rows: PropTypes.array
};
function getDiv(id){
let div = document.createElement("div");
div.className = "u-table-drag-hidden-cont";
div.id = id;
return div;
}
class TableHeader extends Component {
constructor(props) {
super(props);
@ -28,64 +36,17 @@ class TableHeader extends Component {
contentWidthDiff: 0
};
/**
*
* 动态绑定th line 事件方法
* @param {*} events
* @param {*} type type 为false 为增加事件
* @param {*} eventSource 为false 给 th 内部的div增加事件
* @memberof TableHeader
*/
thEventListen(events,type,eventSource){
let {ths,cols} = this.table;
for (let index = 0; index < ths.length; index++) {
const element = ths[index];//.getAttribute('data-type');
if(!element.getAttribute('data-th-fixed')){
let colLine = null;
if(element.children.length === 0){
colLine = element;
}else if(element.children.length > 0){
colLine = element.lastElementChild;
}else if(element.children.length === 1){
colLine = element.children[0];
}
// const colLine = element.children.length > 1?element.lastElementChild:element.children[0];
for (let i = 0; i < events.length; i++) {
const _event = events[i];
let _dataSource = eventSource?element:colLine;
if(type === "remove"){
EventUtil.removeHandler(_dataSource,_event.key,_event.fun);
}else{
EventUtil.addHandler(_dataSource,_event.key,_event.fun);
}
}
}
}
}
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
bodyEventListen(events,type){
for (let i = 0; i < events.length; i++) {
const _event = events[i];
if(type == "remove"){
EventUtil.removeHandler(document.body,_event.key,_event.fun);
}else{
EventUtil.addHandler(document.body,_event.key,_event.fun);
}
}
}
componentDidUpdate(){
this.initTable();
this.initTable();
this.initEvent();
}
componentDidMount(){
let uid = "_table_uid_"+new Date().getTime();
this._table_none_cont_id = uid;
let div = getDiv(uid);
document.querySelector("body").appendChild(div);
}
componentWillUnmount(){
if(!this.table)return;
@ -95,46 +56,7 @@ class TableHeader extends Component {
if(this.props.dragborder){
this.removeDragBorderEvent();
}
}
// componentDidMount(){
// this.initTable();
// this.initEvent();
// }
/**
* 初始化拖拽列宽的事件处理
* @returns
* @memberof TableHeader
*/
initEvent(){
let events = [
{key:'mouseup', fun:this.onLineMouseUp},
{key:'mousemove', fun:this.onLineMouseMove}
];
if(this.props.dragborder){
this.thEventListen(events,'',true);//表示把事件添加到th元素上
this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}]);//表示把事件添加到竖线
this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}]);
}
if(!this.props.draggable)return;
//拖拽交换列事件
this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'',true);//表示把事件添加到th元素上
}
/**
* 移除当前全局事件对象
* @memberof TableHeader
*/
removeDragBorderEvent(){
let events = [
{key:'mouseup', fun:this.onLineMouseUp},
{key:'mousemove', fun:this.onLineMouseMove}
];
this.thEventListen(events,'remove',true);//表示把事件添加到th元素上
this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}],'remove');//表示把事件添加到竖线
this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}],'remove');
this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]);
}
/**
@ -145,13 +67,13 @@ class TableHeader extends Component {
initTable(){
const {contentTable} = this.props;
if(!this.props.dragborder && !this.props.draggable)return;
// let el = ReactDOM.findDOMNode(this);
let tableDome = this._thead.parentNode;
let table = {};
if(tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE"){
table.table = tableDome;
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr");
}
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
@ -161,7 +83,6 @@ class TableHeader extends Component {
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
this.table = table;
if(!this.props.dragborder)return;
@ -177,6 +98,222 @@ class TableHeader extends Component {
}
}
}
/**
* 事件初始化
*/
initEvent(){
this.dragBorderEventInit();//列宽
this.dragAbleEventInit();//交换列
if(this.table && this.table.tr){
this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
}
this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
}
/**
* 拖拽列宽事件的监听
*/
dragBorderEventInit (){
if(!this.props.dragborder )return;
let events = [
{key:'mouseup', fun:this.onTrMouseUp},
{key:'mousemove', fun:this.onTrMouseMove},
// {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
];
this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
}
/**
* 删除拖动改变列宽的事件监听
*/
removeDragBorderEvent(){
let events = [
{key:'mouseup', fun:this.onTrMouseUp},
{key:'mousemove', fun:this.onTrMouseMove},
];
this.eventListen(events,'remove',this.table.tr[0]);
}
eventListen(events,type,eventSource){
if(!this.table)return;
let {tr} = this.table;
for (let i = 0; i < events.length; i++) {
const _event = events[i];
if(type === "remove"){
EventUtil.removeHandler(eventSource,_event.key,_event.fun);
}else{
EventUtil.addHandler(eventSource,_event.key,_event.fun);
}
}
}
/**
*
*根据 data-type 来获取当前拖拽的对象的Object，如果为null表示拖动的对象并非是online
* @memberof TableHeader
*/
getOnLineObject = (_element) =>{
let type = _element.getAttribute('data-type'),elementObj = null;
if(!type){
let element = _element.parentElement||parentNode;//兼容写法。
if(element.getAttribute('data-type')){
elementObj = element;
}
}else{
elementObj = _element;
}
return elementObj;
}
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
onTrMouseDown = (e) => {
Event.stopPropagation(e);
let event = Event.getEvent(e) ,
targetEvent = Event.getTarget(event);
const { clsPrefix, contentTable } = this.props;
let currentElement = this.getOnLineObject(targetEvent);
if(!currentElement)return;
let type = currentElement.getAttribute('data-type');
if(!this.props.dragborder && !this.props.draggable)return;
if(type == 'online' && this.props.dragborder){
if(!this.props.dragborder)return;
targetEvent.setAttribute('draggable',false);//添加交换列效果
let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
let defaultWidth = currentElement.getAttribute("data-th-width");
let currentObj = this.table.cols[currentIndex];
this.drag.option = "border";//拖拽操作
this.drag.currIndex = currentIndex;
this.drag.oldLeft = event.x;
this.drag.oldWidth = parseInt((currentObj).style.width);
this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
}else if(type != 'online' && this.props.draggable){
if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
targetEvent.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.currentDome = event.target;
let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
this.drag.currIndex = currentIndex;
}else{
// console.log("onTrMouseDown dragborder or draggable is all false !");
return ;
}
};
/**
* 调整列宽的move事件
* @memberof TableHeader
*/
onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
//移动改变宽度
let currentCols = this.table.cols[this.drag.currIndex];
let diff = (event.x - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){
if(newWidth > this.minWidth){
currentCols.style.width = newWidth +'px';
//hao 支持固定表头拖拽 修改表体的width
if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
}
const newTableWidth = this.drag.tableWidth + diff +'px';
this.table.table.style.width = newTableWidth;//改变table的width
if(this.table.innerTableBody){//TODO 后续需要处理此处
this.table.innerTableBody.style.width = newTableWidth ;
}
let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
//表头滚动条处理
if(headerScroll){
if(showScroll < 0){
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
this.table.contentTableHeader.style.overflowX = 'scroll';
this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
this.optTableMargin( this.table.fixedRighHeadertTable,scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
}else{
this.table.contentTableHeader.style.overflowX = 'hidden';
this.optTableMargin( this.table.fixedLeftHeaderTable,0);
this.optTableMargin( this.table.fixedRighHeadertTable,0);
}
}else{
if(showScroll < 0){
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
}else{
this.optTableMargin( this.table.fixedLeftBodyTable,0);
this.optTableMargin( this.table.fixedRightBodyTable,0);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
}
}
}
}else if(this.props.draggable && this.drag.option == "draggable"){
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
}else{
// console.log("onTrMouseMove dragborder or draggable is all false !");
}
}
/**
* 调整列宽的up事件
* @memberof TableHeader
*/
onTrMouseUp = (e) => {
let event = Event.getEvent(e);
let width = this.drag.newWidth;
this.mouseClear();
this.props.onDropBorder && this.props.onDropBorder(event,width);
};
mouseClear(){
if(!this.drag || !this.drag.option)return;
let {rows} = this.props;
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
this.drag = {
option:""
};
this.clearThsDr();
}
clearThsDr =()=>{
let ths = this.table.ths;
for (let index = 0; index < ths.length; index++) {
ths[index].setAttribute('draggable',false);//去掉交换列效果
}
}
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
bodyonLineMouseUp = (events,type) =>{
if(!this.drag || !this.drag.option)return;
this.mouseClear();
}
/**
*相关滚动条联动操作
*
@ -199,165 +336,24 @@ class TableHeader extends Component {
}
}
/**
* 调整列宽的move事件
* @memberof TableHeader
*/
onLineMouseMove = (e) => {
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
if (!this.props.dragborder) return;
if(this.drag.option != "border"){
return false;
}
//移动改变宽度
let currentCols = this.table.cols[this.drag.currIndex];
let diff = (event.x - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){
if(newWidth > this.minWidth){
currentCols.style.width = newWidth +'px';
//hao 支持固定表头拖拽 修改表体的width
if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
}
const newTableWidth = this.drag.tableWidth + diff +'px';
this.table.table.style.width = newTableWidth;//改变table的width
this.table.innerTableBody.style.width = newTableWidth ;
let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
//表头滚动条处理
if(headerScroll){
if(showScroll < 0){
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
this.table.contentTableHeader.style.overflowX = 'scroll';
this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
this.optTableMargin( this.table.fixedRighHeadertTable,scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
}else{
this.table.contentTableHeader.style.overflowX = 'hidden';
this.optTableMargin( this.table.fixedLeftHeaderTable,0);
this.optTableMargin( this.table.fixedRighHeadertTable,0);
}
}else{
if(showScroll < 0){
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
}else{
this.optTableMargin( this.table.fixedLeftBodyTable,0);
this.optTableMargin( this.table.fixedRightBodyTable,0);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
}
}
}
};
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
onLineMouseDown = (e) => {
Event.stopPropagation(e);
let event = Event.getEvent(e);
const { clsPrefix, contentTable } = this.props;
if (!this.props.dragborder) return;
let currentIndex = parseInt(Event.getTarget(event).getAttribute("data-line-index"));
let defaultWidth = Event.getTarget(event).getAttribute("data-th-width");
let currentObj = this.table.cols[currentIndex];
this.drag.option = "border";//拖拽操作
this.drag.currIndex = currentIndex;
this.drag.oldLeft = event.x;
this.drag.oldWidth = parseInt((currentObj).style.width);
this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
};
/**
* 调整列宽的up事件
* @memberof TableHeader
*/
onLineMouseUp = (event) => {
let width = this.drag.newWidth;
this.clearDragBorder(event);
this.props.onDropBorder && this.props.onDropBorder(event,width);
};
/**
* 调整列宽到区域以外的up事件
*/
bodyonLineMouseMove = (event) => {
this.clearDragBorder(event);
};
clearDragBorder(){
if(!this.drag || !this.drag.option)return;
let {rows} = this.props;
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
this.drag = {
option:""
};
if (this.props.draggable){
this.removeDragAbleEvent();
}
}
//---拖拽列宽代码逻辑----start-----
/**
* 调整交换列down事件
* @memberof TableHeader
*/
dragAbleMouseDown = (e) => {
// Event.stopPropagation(e);
let event = Event.getEvent(e);
if (!this.props.draggable) return;
let th = this.getThDome(event.target);
if(!th)return;
event.target.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.currentDome = event.target;
this.thEventListen([{key:'mouseup',fun:this.dragAbleMouseUp}],'',true);//th
this.removeDragBorderEvent();//清理掉拖拽列宽的事件
this.addDragAbleEvent(); //添加拖拽交换列的事件
}
/**
* 调整交换列up事件
* @memberof TableHeader
*/
dragAbleMouseUp = (e) => {
this.currentDome.setAttribute('draggable',false);//添加交换列效果
this.removeDragAbleEvent();
this.thEventListen([{key:'mouseup',fun:this.dragAbleMouseUp}],'remove',true);//th
//拖拽交换列事件
this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'remove',true);//表示把事件添加到th元素上
this.initEvent();
}
//---拖拽交换列代码----start-----
/**
* 添加换列的事件监听
*/
addDragAbleEvent (){
dragAbleEventInit (){
if (!this.props.draggable) return;
let events = [
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
{key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件
{key:'dragenter', fun:this.onDragEnter},
{key:'dragend', fun:this.onDragEnd},
{key:'dragleave', fun:this.onDragLeave},
];
this.thEventListen(events,'',true);
this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
}
/**
* 删除换列的事件监听
*/
@ -366,57 +362,106 @@ class TableHeader extends Component {
{key:'dragstart',fun:this.onDragStart},
{key:'dragover', fun:this.onDragOver},
{key:'drop', fun:this.onDrop},
{key:'dragenter', fun:this.onDragEnter}
{key:'dragenter', fun:this.onDragEnter},
{key:'dragend', fun:this.onDragEnd},
{key:'dragleave', fun:this.onDragLeave},
];
this.thEventListen(events,'remove',true);
this.eventListen(events,'remove',this.table.tr[0]);
}
/**
* 开始调整交换列的事件
*/
onDragStart = (e) => {
let event = Event.getEvent(e);
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
let th = this.getThDome(event.target);
if(!th)return;
let currentIndex = parseInt(th.getAttribute("data-line-index"));
let currentKey = event.target.getAttribute('data-line-key');
if(this.drag && this.drag.option != 'dragAble'){return;}
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
let currentIndex = parseInt(target.getAttribute("data-line-index"));
let currentKey = target.getAttribute('data-line-key');
if(event.dataTransfer.setDragImage){
var crt = target.cloneNode(true);
crt.style.backgroundColor = "#ebecf0";
crt.style.width = this.table.cols[currentIndex].style.width;//拖动后再交换列的时候，阴影效果可同步
crt.style.height = "40px";
// crt.style['line-height'] = "40px";
// document.body.appendChild(crt);
document.getElementById(this._table_none_cont_id).appendChild(crt);
event.dataTransfer.setDragImage(crt, 0, 0);
}
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey);
this.currentObj = this.props.rows[0][currentIndex];
// event.dataTransfer.setDragImage(event.target, 0, 0);
};
onDragOver = (e) => {
event.preventDefault();
};
/**
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
onDrop = (e) => {
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
if(this.drag && this.drag.option != 'dragAble'){return;}
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this.currentDome.setAttribute('draggable',false);//添加交换列效果
let data = this.getCurrentEventData(e);
};
onDragEnter = (e) => {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this._dragCurrent = target;
let currentIndex = target.getAttribute("data-line-index");
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
if(target.nodeName.toUpperCase() === "TH"){
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style","border:2px dashed rgba(5,0,0,0.25)");
// target.style.backgroundColor = 'rgb(235, 236, 240)';
}
}
onDragEnd = (e) => {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this._dragCurrent.setAttribute("style","");
// this._dragCurrent.style = "";
document.getElementById(this._table_none_cont_id).innerHTML = "";
let data = this.getCurrentEventData(this._dragCurrent);
if(!data)return;
if (!this.currentObj || this.currentObj.key == data.key) return;
if(!this.props.onDrop)return;
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
};
}
onDragLeave = (e) => {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
let currentIndex = target.getAttribute("data-line-index");
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
if(target.nodeName.toUpperCase() === "TH"){
target.setAttribute("style","");
// this._dragCurrent.style = "";
}
}
/**
* 获取当前th上的对象数据
* @param {*} e
* @returns
* @memberof TableHeader
*/
getCurrentEventData(e){
let event = Event.getEvent(e);
let th = this.getThDome(event.target)
getCurrentEventData(th){
if(!th){
console.log(" event target is not th ! ");
return null;
@ -430,24 +475,6 @@ class TableHeader extends Component {
return null;
}
}
/**
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns <th />对象
* @memberof TableHeader
*/
getThDome(element){
let _tagName = element.tagName.toLowerCase();
if(element.getAttribute('data-filter-type') === 'filterContext')return null;
if(_tagName === 'i')return null;
if(_tagName != 'th'){
return this.getThDome(element.parentElement);
}else{
return element;
}
}
//---拖拽列交换----end-----
/**
@ -593,8 +620,9 @@ class TableHeader extends Component {
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
return (
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
{rows.map((row, index) => (
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
{rows.map((row, index) => {
let _rowLeng = (row.length-1);
return(<tr key={index} style={rowStyle} aaaa className={(filterable && index == rows.length - 1)?'filterable':''}>
{row.map((da, columIndex, arr) => {
let thHover = da.drgHover
? ` ${clsPrefix}-thead th-drag-hover`
@ -635,26 +663,24 @@ class TableHeader extends Component {
let thDefaultObj = {};
if(draggable){
thClassName += ` ${clsPrefix}-thead th-drag ${thHover} `;
}
if(dragborder){
thClassName += ` ${clsPrefix}-thead-th ${canDotDrag}`;
}
thClassName += ` ${fixedStyle}`;
if(!da.fixed){
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed}
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
{da.children}
{
dragborder ? <div ref={el => (this.gap = el)} data-line-key={da.key}
data-line-index={columIndex} data-th-width={da.width}
data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}>
<div id='th-online' className='online' data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} /></div>:""
}
</th>)
if(draggable){
thClassName += ` ${clsPrefix}-thead th-drag ${thHover} `;
}
if(dragborder){
thClassName += ` ${clsPrefix}-thead-th ${canDotDrag}`;
}
thClassName += ` ${fixedStyle}`;
if(!da.fixed ){
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-key={da.key}
data-line-index={columIndex} data-th-width={da.width} data-type="draggable">
{da.children}
{
dragborder && columIndex != _rowLeng? <div ref={el => (this.gap = el)} data-line-key={da.key}
data-line-index={columIndex} data-th-width={da.width}
data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}>
<div className='online' /></div>:""
}
</th>)
}else{
thDefaultObj = {
...da,
@ -665,7 +691,7 @@ class TableHeader extends Component {
}
})}
</tr>
))}
)})}
</thead>
);
}

3
src/TableRow.js
View File

@ -164,7 +164,7 @@ class TableRow extends Component{
const {
clsPrefix, columns, record, height, visible, index,
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
} = this.props;
let showSum = false;
let { className } = this.props;
@ -215,6 +215,7 @@ class TableRow extends Component{
fixed= {fixed}
showSum={showSum}
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
bodyDisplayInRow = {bodyDisplayInRow}
/>
);
}

36
src/lib/dragColumn.js
View File

@ -1,6 +1,5 @@
import React, { Component } from "react";
import {compare,ObjectAssign} from './util';
let cloneDeep = require('lodash.clonedeep');
import {compare,ObjectAssign} from './util';
/**
* 参数: 列拖拽
* @param {*} Table
@ -33,14 +32,6 @@ export default function dragColumn(Table) {
return _column;
}
cloneDeep(obj){
if( typeof obj !== 'object' || Object.keys(obj).length === 0 ){
return obj
}
let resultData = {}
return this.recursion(obj, resultData)
}
recursion(obj, data={}){
for(key in obj){
if( typeof obj[key] == 'object' && Object.keys(obj[key].length>0 )){
@ -59,15 +50,6 @@ export default function dragColumn(Table) {
sourceIndex = columns.findIndex((da,i)=>da.key == dragSource.key);
targetIndex = columns.findIndex((da,i)=>da.key == dragTarg.key);
// for (let index = 0; index < columns.length; index++) {
// const da = columns[index];
// if(da.key === dragSource.key){
// columns[index] = dragTargColum;
// }
// if(da.key === dragTarg.key){
// columns[index] = dragSourceColum;
// }
// }
// 向前移动
if(targetIndex < sourceIndex){
targetIndex = targetIndex + 1;
@ -77,9 +59,18 @@ export default function dragColumn(Table) {
0,
columns.splice(sourceIndex, 1)[0]
);
this.setState({
columns:cloneDeep(columns)
let _newColumns = [];
columns.forEach((da,i)=>{
let newDate = Object.assign(da,{});
newDate.title = da.title;
_newColumns.push(newDate);
});
// console.log(" onDrop-------columns--- ",columns);
this.setState({
columns:_newColumns//cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
// console.log(columns === _newColumns);
if(this.props.onDrop){
this.props.onDrop(event,data,columns);
}
@ -102,7 +93,6 @@ export default function dragColumn(Table) {
onDrop,
...others
} = this.props;
let key = new Date().getTime();
return (
<Table
{...others}
@ -115,8 +105,6 @@ export default function dragColumn(Table) {
onDragEnter={this.onDragEnter}
draggable={draggable}
dragborder={dragborder}
// dragborder={false}
dragborderKey={key}
/>)
}
};

3
src/lib/filterColumn.js
View File

@ -108,9 +108,10 @@ export default function filterColumn(Table, Popover) {
key={da.key + "_" + i}
className={`${prefixCls}-pop-cont-item`}
>
<Checkbox {...paramObj}/>
<Checkbox {...paramObj}>
<span>{da.title}</span>
</Checkbox>
</div>
);

2
src/lib/multiSelect.js
View File

@ -175,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
key: "checkbox",
dataIndex: "checkbox",
fixed:"left",
width: 60,
width: 50,
render: (text, record, index) => {
let attr = {};
record._disabled?attr.disabled = record._disabled:"";

132
src/lib/newMultiSelect.js
View File

@ -1,133 +1,5 @@
import React, { Component } from "react";
import {ObjectAssign} from './util';
/**
* 参数: 过滤表头
* @param {*} Table
* @param {*} Checkbox
* @param {*} Popover
* @param {*} Icon
*/
import multiSelect from './multiSelect';
export default function newMultiSelect(Table, Checkbox) {
return class NewMultiSelect extends Component {
static defaultProps = {
prefixCls: "u-table-mult-select"
}
constructor(props) {
super(props);
let checkedAll = this.setChecked(props.data);
this.state = {
checkedAll,
data:ObjectAssign(props.data),
}
}
componentWillReceiveProps(nextProps){
if(this.props.data != nextProps.data){
this.setState({
data:ObjectAssign(nextProps.data),
checkedAll:this.setChecked(nextProps.data),
})
}
}
setChecked(data){
let allCheck = true;
if(data){
for (const da of data) {
if(!da._checked){
allCheck = false;
break;
}
}
}
return allCheck;
}
onAllCheckChange=()=>{
let {data,checkedAll} = this.state;
let selectList = [];
let check = checkedAll?false:true;
data.forEach(item => {
item._checked = check;
if(item._checked){
selectList.push(item);
}
});
this.setState({
checkedAll:check
});
this.props.getSelectedDataFunc(selectList);
}
handleClick=()=>{
}
onCheckboxChange = (text, record, index) => () => {
let {data} = this.state;
let selectList = [];
record._checked = record._checked?false:true;
let checkedAll = true;
for(let i=0;i<data.length;i++){
let item = data[i];
if(!item._checked || item._checked == false){
checkedAll = false;
break;
}
}
this.setState({
...this.state,
checkedAll
})
data.forEach((da)=>{
if(da._checked){
selectList.push(da);
}
})
this.props.getSelectedDataFunc(selectList,record,index);
};
getDefaultColumns=(columns)=>{
// let checkedAll = init?false:this.state.checkedAll;
let {checkedAll} = this.state;
let _defaultColumns =[{
title: (
<Checkbox
className="table-checkbox"
checked={checkedAll}
// indeterminate={indeterminate_bool && !this.state.checkedAll}
onChange={this.onAllCheckChange}
/>
),
key: "checkbox",
dataIndex: "checkbox",
fixed:"left",
width: 50,
render: (text, record, index) => {
let attr = {};
record._disabled?attr.disabled = record._disabled:"";
return <Checkbox
key={index}
className="table-checkbox"
{...attr}
checked={record._checked}
onClick={this.handleClick}
onChange={this.onCheckboxChange(text, record, index)}
></Checkbox>
}
}]
return _defaultColumns.concat(columns);
}
render() {
const {columns} = this.props;
const {data} = this.state;
return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
}
};
return multiSelect(Table, Checkbox);
}