merge
This commit is contained in:
yangchch6
commit
c2b615a296
|
|
@ -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,17 +114,17 @@
|
|||
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;
|
||||
|
|
@ -323,6 +331,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 +361,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 +598,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; }
|
||||
|
|
|
|||
|
|
@ -100,7 +100,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 = {
|
||||
|
|
@ -145,7 +146,8 @@ var defaultProps = {
|
|||
setRowHeight: function setRowHeight() {},
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
tabIndex: '0',
|
||||
heightConsistent: false
|
||||
heightConsistent: false,
|
||||
size: 'md'
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -156,6 +158,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 +281,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 +796,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 +1321,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 +1337,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 +1350,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 +1374,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()
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
)
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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'];
|
||||
|
|
@ -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";
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* demo0502
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { Table } from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import { Icon, Select, Tooltip } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
|
||||
|
|
@ -58,6 +58,7 @@ class StringEditCell extends Component {
|
|||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="tp-501"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="help-tip">
|
||||
|
|
@ -79,7 +80,7 @@ class StringEditCell extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["普通", "精良", "稀有", "传奇", "远古传奇", "太古传奇"];
|
||||
const SELECT_SOURCE = ["xx供应商", "yy供应商", "zz供应商", "aa供应商", "bb供应商"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
|
|
@ -136,11 +137,11 @@ class SelectEditCell extends Component {
|
|||
}
|
||||
|
||||
const dataSource = [
|
||||
{ name: "全能法戒", quality: "远古传奇", level: 70.11 },
|
||||
{ name: "绝命", quality: "太古传奇", level: 70 },
|
||||
{ name: "蚀刻符印", quality: "太古传奇", level: 70 },
|
||||
{ name: "虹光", quality: "传奇", level: 70 },
|
||||
{ name: "复仇者护腕", quality: "传奇", level: 70 }
|
||||
{ name: "NU03910001", quality: "xx供应商", level: 70, key: "1" },
|
||||
{ name: "NU03910002", quality: "yy供应商", level: 75, key: "2" },
|
||||
{ name: "NU03910003", quality: "zz供应商", level: 50, key: "3" },
|
||||
{ name: "NU03910004", quality: "aa供应商", level: 70, key: "4" },
|
||||
{ name: "NU03910005", quality: "bb供应商", level: 60, key: "5" }
|
||||
];
|
||||
|
||||
class Demo501 extends Component {
|
||||
|
|
@ -148,19 +149,19 @@ class Demo501 extends Component {
|
|||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "装备名称",
|
||||
title: "订单编号",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
value={text}
|
||||
colName={"装备名称"}
|
||||
colName={"订单编号"}
|
||||
onChange={this.onCellChange(index, "name")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "品质",
|
||||
title: "供应商名称",
|
||||
dataIndex: "quality",
|
||||
key: "quality",
|
||||
render: (text, record, index) => (
|
||||
|
|
@ -171,7 +172,7 @@ class Demo501 extends Component {
|
|||
)
|
||||
},
|
||||
{
|
||||
title: "需求等级",
|
||||
title: "采购数量",
|
||||
dataIndex: "level",
|
||||
key: "level"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
border: 1px dashed #A5ADBA;
|
||||
}
|
||||
}
|
||||
|
||||
.require {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
|
|
@ -11,12 +12,17 @@
|
|||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.help-tip {
|
||||
color: #F44336;
|
||||
}
|
||||
// .tooltip-arrow {
|
||||
// border-bottom-color: #F44336 !important;
|
||||
// }
|
||||
// .tooltip-inner {
|
||||
// border-color: #F44336 !important;
|
||||
// }
|
||||
|
||||
.tp-501 {
|
||||
.tooltip-arrow {
|
||||
border-bottom-color: #F44336 !important;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
border-color: #F44336 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.0.12",
|
||||
"version": "2.0.13",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -91,4 +91,4 @@
|
|||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/Table.js
20
src/Table.js
|
|
@ -234,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() {
|
||||
|
||||
|
|
@ -655,6 +659,7 @@ class Table extends Component {
|
|||
fixedIndex={fixedIndex+lazyCurrentIndex}
|
||||
rootIndex = {rootIndex}
|
||||
syncHover = {props.syncHover}
|
||||
bodyDisplayInRow = {props.bodyDisplayInRow}
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
|
@ -1180,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}`;
|
||||
|
|
@ -1196,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;
|
||||
|
|
@ -1208,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}
|
||||
|
|
@ -1221,7 +1235,7 @@ class Table extends Component {
|
|||
{this.getFooter()}
|
||||
</div>
|
||||
|
||||
{this.columnManager.isAnyColumnsLeftFixed() &&
|
||||
{hasFixedLeft &&
|
||||
<div className={`${clsPrefix}-fixed-left`}>
|
||||
{this.getLeftFixedTable()}
|
||||
</div>}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -558,6 +561,7 @@ $icon-color:#505F79;
|
|||
}
|
||||
&-pop-cont-item{
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
// line-height: 30px;
|
||||
cursor: pointer;
|
||||
.u-checkbox {
|
||||
|
|
@ -601,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;
|
||||
|
|
@ -905,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>)
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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:"";
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
Loading…
Reference in New Issue