Compare commits
22 Commits
master
...
2.3.15-bet
| Author | SHA1 | Date |
|---|---|---|
gx
|
85ca312b51 | |
|
gx
|
4215c4ec1e | |
|
gx
|
4db60bd1b6 | |
|
gx
|
a2024a9827 | |
|
gx
|
0c7e3d9d7e | |
|
gx
|
b98ef9d4e8 | |
|
gx
|
b0914c928e | |
=gx
|
d6e16c2ef1 | |
|
gx-mac
|
ffd42b97e6 | |
|
gx-mac
|
f1c585a850 | |
|
gx-mac
|
f1dfb9c85f | |
|
gx-mac
|
e072df43fb | |
|
gx-mac
|
290ba7aed8 | |
|
gx-mac
|
43193e089b | |
|
gx-mac
|
3c0aa855a7 | |
|
gx-mac
|
cb7d54be80 | |
|
gx-mac
|
06a8d7f6ff | |
|
gx-mac
|
6b8ad2414e | |
|
gx-mac
|
abf567d6da | |
houjitong
|
e1d73a9c33 | |
|
gx
|
6b609d1a3d | |
|
gx
|
d867fdff33 |
|
|
@ -902,3 +902,28 @@
|
|||
line-height: 30px; }
|
||||
.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
|
||||
font-size: 12px; }
|
||||
|
||||
.loading-td {
|
||||
position: relative !important;
|
||||
width: 1000px !important;
|
||||
height: 500px !important;
|
||||
display: block !important; }
|
||||
|
||||
.loading-div {
|
||||
position: absolute;
|
||||
margin: 80px 0 0 0;
|
||||
animation-fill-mode: both;
|
||||
border: none !important;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 0;
|
||||
left: 30%;
|
||||
background: transparent !important;
|
||||
display: inline-block;
|
||||
animation: rotate1 1s 0s linear infinite !important;
|
||||
text-align: center;
|
||||
line-height: 40px; }
|
||||
.loading-div.pre {
|
||||
bottom: 0; }
|
||||
.loading-div.suf {
|
||||
top: 0; }
|
||||
|
|
|
|||
175
build/Table.js
175
build/Table.js
|
|
@ -241,6 +241,9 @@ var Table = function (_Component) {
|
|||
}
|
||||
});
|
||||
if (currentIndex > -1) {
|
||||
if (_this.contentTable.dragType == 'top') {
|
||||
targetIndex = targetIndex - 1;
|
||||
}
|
||||
data = _this.swapArray(data, currentIndex, targetIndex);
|
||||
_this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
|
||||
_this.setState({
|
||||
|
|
@ -289,6 +292,17 @@ var Table = function (_Component) {
|
|||
return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', ''));
|
||||
};
|
||||
|
||||
_this.getFlatRecords = function (data) {
|
||||
var result = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
result.push(data[i]);
|
||||
if ((data[i].children || []).length) {
|
||||
result = result.concat(_this.getFlatRecords(data[i].children));
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
_this.clearBodyMouseLeaveTimer = function () {
|
||||
if (_this.bodyMouseLeaveTimmer) {
|
||||
clearTimeout(_this.bodyMouseLeaveTimmer);
|
||||
|
|
@ -370,6 +384,7 @@ var Table = function (_Component) {
|
|||
_this.getFooter = _this.getFooter.bind(_this);
|
||||
_this.getEmptyText = _this.getEmptyText.bind(_this);
|
||||
_this.getHeaderRowStyle = _this.getHeaderRowStyle.bind(_this);
|
||||
_this.manualSyncFixedTableRowHeight = _this.manualSyncFixedTableRowHeight.bind(_this);
|
||||
_this.syncFixedTableRowHeight = _this.syncFixedTableRowHeight.bind(_this);
|
||||
_this.resetScrollX = _this.resetScrollX.bind(_this);
|
||||
_this.findExpandedRow = _this.findExpandedRow.bind(_this);
|
||||
|
|
@ -384,6 +399,7 @@ var Table = function (_Component) {
|
|||
_this.leftColumnsLength; //左侧固定列的长度
|
||||
_this.centerColumnsLength; //非固定列的长度
|
||||
_this.columnsChildrenList = []; //复杂表头、所有叶子节点
|
||||
_this.dataChanged = false; // 数据是否改变
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -478,9 +494,61 @@ var Table = function (_Component) {
|
|||
// if (prevProps.data.length === 0 || this.props.data.length === 0 ) {
|
||||
// this.resetScrollX();
|
||||
// }
|
||||
// 当懒加载手动设置的scroll.y发生变化时，滚动条回到顶部
|
||||
var prevScrollY = prevProps.scroll.y;
|
||||
var currentScrollY = this.props.scroll.y;
|
||||
if (prevScrollY && currentScrollY && prevScrollY !== currentScrollY && this.props.lazyLoad && !this.props.ignoreScrollYChange) {
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY && prevScrollY !== currentScrollY) {
|
||||
var bodyScrollTop = this.bodyTable.scrollTop;
|
||||
if (bodyScrollTop === 0) {
|
||||
// 在顶部的时候，滚动条不用动
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else {
|
||||
var distance = bodyScrollTop + currentScrollY - prevScrollY;
|
||||
if (distance < 0) {
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else {
|
||||
var _bodyTable = this.bodyTable,
|
||||
scrollHeight = _bodyTable.scrollHeight,
|
||||
scrollTop = _bodyTable.scrollTop;
|
||||
|
||||
var bottomDistance = Math.abs(scrollHeight - scrollTop - prevScrollY); // 在最底部的时候也不用滚动滚动条
|
||||
if (bottomDistance < 5) {
|
||||
// 有些dom计算不是十分精确，设置一个值来缓冲一下
|
||||
this.bodyTable.scrollTop = scrollTop + prevScrollY - currentScrollY;
|
||||
} else {
|
||||
this.bodyTable.scrollTop = distance;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
this.isShowScrollY();
|
||||
if (this.bodyTable) {
|
||||
var currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX;
|
||||
if (!this.props.scroll.x && currentOverflowX === 'scroll') {
|
||||
this.bodyTable.style.overflowX = 'hidden';
|
||||
}
|
||||
if (this.props.scroll.x && currentOverflowX !== 'scroll') {
|
||||
// 此处应该对比一下实际的
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
this.bodyTable.style.overflowX = 'scroll';
|
||||
} else {
|
||||
this.bodyTable.style.overflowX = 'hidden';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.bodyTableOuter) {
|
||||
// 隐藏几个不需要真正滚动的父元素的滚动条
|
||||
this.bodyTableOuter.style.overflowY = 'hidden';
|
||||
}
|
||||
if (this.fixedColumnsBodyLeftOuter) {
|
||||
this.fixedColumnsBodyLeftOuter.style.overflowY = 'hidden';
|
||||
}
|
||||
if (this.fixedColumnsBodyRightOuter) {
|
||||
this.fixedColumnsBodyRightOuter.style.overflowY = 'hidden';
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
|
|
@ -916,7 +984,7 @@ var Table = function (_Component) {
|
|||
var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
|
||||
var expandIconColumnIndex = props.expandIconColumnIndex;
|
||||
if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, isPre: true, height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
|
||||
}
|
||||
var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
|
||||
var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0;
|
||||
|
|
@ -926,7 +994,7 @@ var Table = function (_Component) {
|
|||
var record = data[i];
|
||||
var key = this.getRowKey(record, i);
|
||||
// 兼容 NCC 以前的业务逻辑，支持外部通过 record 中的 isleaf 字段，判断是否为叶子节点
|
||||
record['_isLeaf'] = typeof record['isleaf'] === 'boolean' ? record['isleaf'] : record['_isLeaf'];
|
||||
typeof record['isleaf'] === 'boolean' && (record['_isLeaf'] = record['isleaf']);
|
||||
// _isLeaf 字段是在 bigData 里添加的，只有层级树大数据场景需要该字段
|
||||
// _isLeaf 有三种取值情况：true / false / null。（Table内部字段）
|
||||
var _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
|
||||
|
|
@ -1049,7 +1117,7 @@ var Table = function (_Component) {
|
|||
}
|
||||
|
||||
if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, isSuf: true, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
||||
}
|
||||
if (!this.isTreeType) {
|
||||
this.treeType = false;
|
||||
|
|
@ -1165,7 +1233,7 @@ var Table = function (_Component) {
|
|||
if (this.props.data.length == 0 && this.props.headerScroll) {
|
||||
bodyStyle.overflowX = 'hidden';
|
||||
}
|
||||
if (!footerScroll) {
|
||||
if (!footerScroll && this.computeWidth > this.contentDomWidth) {
|
||||
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
|
||||
}
|
||||
}
|
||||
|
|
@ -1177,6 +1245,11 @@ var Table = function (_Component) {
|
|||
// bodyStyle.height = bodyStyle.height || scroll.y;
|
||||
innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
innerBodyStyle.overflowX = 'scroll';
|
||||
} else {
|
||||
innerBodyStyle.overflowX = 'hidden';
|
||||
}
|
||||
} else {
|
||||
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
}
|
||||
|
|
@ -1210,7 +1283,9 @@ var Table = function (_Component) {
|
|||
headStyle.overflow = 'hidden';
|
||||
innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
|
||||
} else {
|
||||
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 没有数据时，表头滚动条隐藏问题
|
||||
|
|
@ -1262,7 +1337,6 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
var headTable = void 0;
|
||||
|
||||
if (useFixedHeader) {
|
||||
headTable = _react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -1284,16 +1358,21 @@ var Table = function (_Component) {
|
|||
{
|
||||
className: clsPrefix + '-body',
|
||||
style: bodyStyle,
|
||||
ref: function ref(el) {
|
||||
_this4.bodyTable = el;
|
||||
},
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
onTouchStart: this.detectScrollTarget,
|
||||
onScroll: this.handleBodyScroll,
|
||||
ref: function ref(el) {
|
||||
_this4.bodyTableOuter = el;
|
||||
},
|
||||
onMouseLeave: this.onBodyMouseLeave
|
||||
},
|
||||
this.renderDragHideTable(),
|
||||
renderTable(!useFixedHeader)
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: 'scroll-container', onScroll: this.handleBodyScroll, ref: function ref(el) {
|
||||
_this4.bodyTable = el;
|
||||
}, style: _extends({}, bodyStyle) },
|
||||
renderTable(!useFixedHeader)
|
||||
)
|
||||
);
|
||||
|
||||
if (fixed && columns.length) {
|
||||
|
|
@ -1316,12 +1395,17 @@ var Table = function (_Component) {
|
|||
{
|
||||
style: _extends({}, innerBodyStyle),
|
||||
className: clsPrefix + '-body-inner',
|
||||
ref: refName,
|
||||
ref: function ref(el) {
|
||||
return _this4[refName + 'Outer'] = el;
|
||||
},
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
onTouchStart: this.detectScrollTarget,
|
||||
onScroll: this.handleBodyScroll
|
||||
onTouchStart: this.detectScrollTarget
|
||||
},
|
||||
renderTable(!useFixedHeader)
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: 'fixed-scroll-container', ref: refName, style: _extends({}, innerBodyStyle), onScroll: this.handleBodyScroll },
|
||||
renderTable(!useFixedHeader)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -1415,9 +1499,12 @@ var Table = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||||
var _this5 = this;
|
||||
Table.prototype.manualSyncFixedTableRowHeight = function manualSyncFixedTableRowHeight() {
|
||||
this.dataChanged = true;
|
||||
this.syncFixedTableRowHeight();
|
||||
};
|
||||
|
||||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
var _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
|
|
@ -1430,8 +1517,9 @@ var Table = function (_Component) {
|
|||
var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
|
||||
var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];
|
||||
var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var rightBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
this.dataChanged = false;
|
||||
var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
|
||||
var height = headerHeight;
|
||||
if (headerHeight) {
|
||||
|
|
@ -1439,11 +1527,21 @@ var Table = function (_Component) {
|
|||
}
|
||||
return headerHeight ? height : parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
});
|
||||
var flatRecords = this.getFlatRecords(this.props.data || []);
|
||||
var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row, index) {
|
||||
var rsHeight = height;
|
||||
if (bodyDisplayInRow && rsHeight) {
|
||||
return rsHeight;
|
||||
} else {
|
||||
var rowKey = row.getAttribute('data-row-key');
|
||||
var record = flatRecords.find(function (record) {
|
||||
return record.key === rowKey;
|
||||
}) || {};
|
||||
var leafKey = 'isleaf' in record ? 'isleaf' : '_isLeaf' in record ? '_isLeaf' : null; // ncc传递这俩属性区分是否是子节点
|
||||
var isLeaf = leafKey && record[leafKey] === true;
|
||||
if (isLeaf) {
|
||||
return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto';
|
||||
}
|
||||
// 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
|
||||
// 内容折行显示，并又设置了 height 的情况下，也要获取主表高度
|
||||
if (heightConsistent || !bodyDisplayInRow && rsHeight) {
|
||||
|
|
@ -1451,13 +1549,13 @@ var Table = function (_Component) {
|
|||
rightHeight = void 0,
|
||||
currentHeight = void 0,
|
||||
maxHeight = void 0;
|
||||
leftHeight = leftBodyRows[index] ? parseInt(leftBodyRows[index].getBoundingClientRect().height) : 0;
|
||||
rightHeight = rightBodyRows[index] ? parseInt(rightBodyRows[index].getBoundingClientRect().height) : 0;
|
||||
currentHeight = parseInt(row.getBoundingClientRect().height);
|
||||
leftHeight = leftBodyRows[index] ? Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理
|
||||
rightHeight = rightBodyRows[index] ? Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0;
|
||||
currentHeight = Number(row.getBoundingClientRect().height).toFixed(2);
|
||||
maxHeight = Math.max(leftHeight, rightHeight, currentHeight);
|
||||
return maxHeight || 'auto';
|
||||
} else {
|
||||
return parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1465,17 +1563,16 @@ var Table = function (_Component) {
|
|||
// expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
|
||||
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
|
||||
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
|
||||
var exHeight = height;
|
||||
if (!exHeight) {
|
||||
exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
try {
|
||||
//子表数据减少时，动态计算高度
|
||||
var td = row.querySelector('td');
|
||||
var tdPadding = _this5.getTdPadding(td);
|
||||
var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
|
||||
exHeight = trueheight + tdPadding;
|
||||
} catch (error) {}
|
||||
}
|
||||
var exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
// fix: ie 展开表格计算渲染bug
|
||||
// try {//子表数据减少时，动态计算高度
|
||||
// let td = row.querySelector('td');
|
||||
// let tdPadding = this.getTdPadding(td);
|
||||
// let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
|
||||
// exHeight = trueheight+tdPadding;
|
||||
// } catch (error) {
|
||||
|
||||
// }
|
||||
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight);
|
||||
});
|
||||
if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
|
||||
|
|
@ -1499,10 +1596,10 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
|
||||
var _this6 = this;
|
||||
var _this5 = this;
|
||||
|
||||
var rows = this.getExpandedRows().filter(function (i) {
|
||||
return i === _this6.getRowKey(record, index);
|
||||
return i === _this5.getRowKey(record, index);
|
||||
});
|
||||
return rows[0];
|
||||
};
|
||||
|
|
@ -1646,7 +1743,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
var _this7 = this;
|
||||
var _this6 = this;
|
||||
|
||||
var _state3 = this.state,
|
||||
currentHoverRecord = _state3.currentHoverRecord,
|
||||
|
|
@ -1700,7 +1797,7 @@ var Table = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
return _this7.contentTable = el;
|
||||
return _this6.contentTable = el;
|
||||
},
|
||||
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
|
||||
this.getTitle(),
|
||||
|
|
@ -1732,7 +1829,7 @@ var Table = function (_Component) {
|
|||
'div',
|
||||
{ className: 'u-row-hover',
|
||||
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
|
||||
return _this7.hoverDom = el;
|
||||
return _this6.hoverDom = el;
|
||||
} },
|
||||
props.hoverContent(currentHoverRecord, currentHoverIndex)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -356,70 +356,74 @@ var TableCell = function (_Component) {
|
|||
var colSpan = void 0;
|
||||
var rowSpan = void 0,
|
||||
title = void 0;
|
||||
|
||||
if (render && !showSum) {
|
||||
text = render(text, record, index, _extends({
|
||||
dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
}
|
||||
|
||||
var colMenu = this.renderColumnMenu(column.cellMenu, text, record, index);
|
||||
// 根据 fieldType 来渲染数据
|
||||
if (!render) {
|
||||
switch (column.fieldType) {
|
||||
case 'link':
|
||||
{
|
||||
text = this.renderLinkType(text, record, index, column.linkConfig);
|
||||
break;
|
||||
}
|
||||
case 'bool':
|
||||
{
|
||||
text = this.renderBoolType(text, column.boolConfig);
|
||||
break;
|
||||
}
|
||||
case 'currency':
|
||||
{
|
||||
var config = {
|
||||
precision: 2, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: true, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'number':
|
||||
{
|
||||
var _config = {
|
||||
precision: 0, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: false, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'date':
|
||||
{
|
||||
text = this.renderDate(text, column.dateConfig);
|
||||
break;
|
||||
}
|
||||
case 'select':
|
||||
{
|
||||
text = this.renderSelect(text, column.selectConfig);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
{
|
||||
break;
|
||||
}
|
||||
// 如果是固定列在主表格上就渲染null
|
||||
if (column.fixed && !fixed) {
|
||||
text = null;
|
||||
} else {
|
||||
if (render && !showSum) {
|
||||
text = render(text, record, index, _extends({
|
||||
dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
}
|
||||
|
||||
// 根据 fieldType 来渲染数据
|
||||
if (!render) {
|
||||
switch (column.fieldType) {
|
||||
case 'link':
|
||||
{
|
||||
text = this.renderLinkType(text, record, index, column.linkConfig);
|
||||
break;
|
||||
}
|
||||
case 'bool':
|
||||
{
|
||||
text = this.renderBoolType(text, column.boolConfig);
|
||||
break;
|
||||
}
|
||||
case 'currency':
|
||||
{
|
||||
var config = {
|
||||
precision: 2, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: true, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'number':
|
||||
{
|
||||
var _config = {
|
||||
precision: 0, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: false, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'date':
|
||||
{
|
||||
text = this.renderDate(text, column.dateConfig);
|
||||
break;
|
||||
}
|
||||
case 'select':
|
||||
{
|
||||
text = this.renderSelect(text, column.selectConfig);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -142,6 +142,7 @@ var TableHeader = function (_Component) {
|
|||
table.cols = tableDome.getElementsByTagName("col");
|
||||
table.ths = tableDome.getElementsByTagName("th");
|
||||
table.tr = tableDome.getElementsByTagName("tr");
|
||||
table.tableHeaderCols = contentTable.querySelector('.u-table-scroll .u-table-header') && contentTable.querySelector('.u-table-scroll .u-table-header').getElementsByTagName("col");
|
||||
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
|
||||
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
|
||||
table.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
|
||||
|
|
@ -219,8 +220,10 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
TableHeader.prototype.doEventList = function doEventList(trs, action) {
|
||||
for (var index = 0; index < trs.length; index++) {
|
||||
action(trs[index]);
|
||||
if (trs && HTMLCollection.prototype.isPrototypeOf(trs) && action) {
|
||||
for (var index = 0; index < trs.length; index++) {
|
||||
action(trs[index]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -230,13 +233,18 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
|
||||
var _this5 = this;
|
||||
|
||||
if (!this.props.dragborder) return;
|
||||
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
|
||||
this.doEventList(this.table.tr, function (tr) {
|
||||
_this5.eventListen(events, '', tr); //表示把事件添加到th元素上
|
||||
});
|
||||
this.eventListen([{ key: 'mouseup', fun: this.onTrMouseUp }], '', document.body);
|
||||
this.eventListen([{ key: 'mousemove', fun: this.onTrMouseMove }], '', document.body);
|
||||
|
||||
// let events = [
|
||||
// {key:'mouseup', fun:this.onTrMouseUp},
|
||||
// {key:'mousemove', fun:this.onTrMouseMove},
|
||||
// // {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
|
||||
// ];
|
||||
// this.doEventList(this.table.tr,(tr)=>{
|
||||
// this.eventListen(events,'',tr);//表示把事件添加到th元素上
|
||||
// })
|
||||
// this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
|
||||
};
|
||||
|
||||
|
|
@ -246,12 +254,12 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
|
||||
var _this6 = this;
|
||||
var _this5 = this;
|
||||
|
||||
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
|
||||
// this.eventListen(events,'remove',this.table.tr[0]);
|
||||
this.doEventList(this.table.tr, function (tr) {
|
||||
_this6.eventListen(events, 'remove', _this6.table.tr);
|
||||
_this5.eventListen(events, 'remove', _this5.table.tr);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -431,7 +439,7 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.render = function render() {
|
||||
var _this7 = this;
|
||||
var _this6 = this;
|
||||
|
||||
var _props2 = this.props,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
|
|
@ -449,7 +457,7 @@ var TableHeader = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
"thead",
|
||||
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
|
||||
return _this7._thead = _thead;
|
||||
return _this6._thead = _thead;
|
||||
} }),
|
||||
rows.map(function (row, index) {
|
||||
var _rowLeng = row.length - 1;
|
||||
|
|
@ -495,7 +503,7 @@ var TableHeader = function (_Component) {
|
|||
|
||||
// }
|
||||
if (filterable && index == rows.length - 1) {
|
||||
da.children = _this7.filterRenderType(da["filtertype"], da.dataindex, columIndex);
|
||||
da.children = _this6.filterRenderType(da["filtertype"], da.dataindex, columIndex);
|
||||
if (da.key === undefined) {
|
||||
keyTemp.key = keyTemp.key + '-filterable';
|
||||
}
|
||||
|
|
@ -516,7 +524,7 @@ var TableHeader = function (_Component) {
|
|||
"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, "data-type": "draggable", onCopy: function onCopy(event) {
|
||||
_this7.onCopy(da, columIndex, event);
|
||||
_this6.onCopy(da, columIndex, event);
|
||||
} }),
|
||||
da.children,
|
||||
|
||||
|
|
@ -524,10 +532,10 @@ var TableHeader = function (_Component) {
|
|||
dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement(
|
||||
"div",
|
||||
{ ref: function ref(el) {
|
||||
return _this7.gap = el;
|
||||
return _this6.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" },
|
||||
"data-type": "online", "data-th-fixed": da.fixed, className: clsPrefix + "-thead-th-drag-gap" },
|
||||
_react2["default"].createElement("div", { className: "online" })
|
||||
) : ""
|
||||
);
|
||||
|
|
@ -538,7 +546,22 @@ var TableHeader = function (_Component) {
|
|||
da.onClick ? thDefaultObj.onClick = function (e) {
|
||||
da.onClick(da, e);
|
||||
} : "";
|
||||
return _react2["default"].createElement("th", _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this7.onCopy }));
|
||||
return _react2["default"].createElement(
|
||||
"th",
|
||||
_extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this6.onCopy }),
|
||||
da.children,
|
||||
|
||||
// && columIndex != _rowLeng
|
||||
dragborder ? _react2["default"].createElement(
|
||||
"div",
|
||||
{ ref: function ref(el) {
|
||||
return _this6.gap = el;
|
||||
}, "data-line-key": da.key,
|
||||
"data-line-index": columIndex, "data-th-width": da.width,
|
||||
"data-type": "online", "data-th-fixed": da.fixed, className: clsPrefix + "-thead-th-drag-gap" },
|
||||
_react2["default"].createElement("div", { className: "online" })
|
||||
) : ""
|
||||
);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
@ -554,7 +577,7 @@ TableHeader.defaultProps = {
|
|||
};
|
||||
|
||||
var _initialiseProps = function _initialiseProps() {
|
||||
var _this8 = this;
|
||||
var _this7 = this;
|
||||
|
||||
this.getOnLineObject = function (_element) {
|
||||
var type = _element.getAttribute('data-type'),
|
||||
|
|
@ -571,28 +594,29 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onTrMouseDown = function (e) {
|
||||
var eventNoStop = _this8.props.eventNoStop;
|
||||
var eventNoStop = _this7.props.eventNoStop;
|
||||
|
||||
!eventNoStop && _utils.Event.stopPropagation(e);
|
||||
var event = _utils.Event.getEvent(e),
|
||||
targetEvent = _utils.Event.getTarget(event);
|
||||
var _props3 = _this8.props,
|
||||
var _props3 = _this7.props,
|
||||
clsPrefix = _props3.clsPrefix,
|
||||
contentTable = _props3.contentTable,
|
||||
lastShowIndex = _props3.lastShowIndex,
|
||||
columnsChildrenList = _props3.columnsChildrenList;
|
||||
// let currentElement = this.getOnLineObject(targetEvent);
|
||||
|
||||
var currentElement = _this8.getTargetToType(targetEvent);
|
||||
var currentElement = _this7.getTargetToType(targetEvent);
|
||||
if (!currentElement) return;
|
||||
var type = currentElement.getAttribute('data-type');
|
||||
if (!_this8.props.dragborder && !_this8.props.draggable) return;
|
||||
if (type == 'online' && _this8.props.dragborder) {
|
||||
var fixedType = currentElement.getAttribute('data-th-fixed');
|
||||
if (!_this7.props.dragborder && !_this7.props.draggable) return;
|
||||
if (type == 'online' && _this7.props.dragborder) {
|
||||
// if(!this.props.dragborder)return;
|
||||
targetEvent.setAttribute('draggable', false); //添加交换列效果
|
||||
var currentIndex = -1;
|
||||
var defaultWidth = currentElement.getAttribute("data-th-width");
|
||||
_this8.drag.option = "border"; //拖拽操作
|
||||
_this7.drag.option = "border"; //拖拽操作
|
||||
if (columnsChildrenList) {
|
||||
var columnKey = currentElement.getAttribute("data-line-key");
|
||||
if (columnKey) {
|
||||
|
|
@ -605,27 +629,44 @@ var _initialiseProps = function _initialiseProps() {
|
|||
console.log('Key must be set for column!');
|
||||
return;
|
||||
}
|
||||
var currentObj = _this8.table.cols[currentIndex];
|
||||
_this8.drag.currIndex = currentIndex;
|
||||
_this8.drag.oldLeft = event.clientX;
|
||||
_this8.drag.oldWidth = parseInt(currentObj.style.width);
|
||||
_this8.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
|
||||
_this8.drag.tableWidth = parseInt(_this8.table.table.style.width ? _this8.table.table.style.width : _this8.table.table.scrollWidth);
|
||||
if (!_this8.tableOldWidth) {
|
||||
_this8.tableOldWidth = _this8.drag.tableWidth; //this.getTableWidth();
|
||||
var currentObj = _this7.table.cols[currentIndex];
|
||||
_this7.drag.currIndex = currentIndex;
|
||||
_this7.drag.oldLeft = event.clientX;
|
||||
_this7.drag.oldWidth = parseInt(currentObj.style.width);
|
||||
_this7.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
|
||||
_this7.drag.tableWidth = parseInt(_this7.table.table.style.width ? _this7.table.table.style.width : _this7.table.table.scrollWidth);
|
||||
if (!_this7.tableOldWidth) {
|
||||
_this7.tableOldWidth = _this7.drag.tableWidth; //this.getTableWidth();
|
||||
}
|
||||
if (!_this8.lastColumWidth) {
|
||||
_this8.lastColumWidth = parseInt(_this8.table.cols[lastShowIndex].style.width);
|
||||
|
||||
// if(!this.lastColumWidth){
|
||||
var contentT = _this7.table.tableHeaderCols || _this7.table.cols;
|
||||
_this7.lastColumWidth = parseInt(contentT[lastShowIndex].style.width);
|
||||
// console.log('begin--lastColumnWidth',this.lastColumWidth);
|
||||
// }
|
||||
_this7.drag.contentTableCWidth = _this7.table.contentTableHeader.clientWidth;
|
||||
_this7.drag.contentTableSWidth = _this7.table.contentTableHeader.scrollWidth;
|
||||
if (fixedType) {
|
||||
var contentTablePar = _this7.table.contentTableHeader.parentNode;
|
||||
|
||||
if (contentTablePar) {
|
||||
var originL = parseInt(contentTablePar.style.marginLeft);
|
||||
var originR = parseInt(contentTablePar.style.marginRight);
|
||||
// 内容区表格marginLef
|
||||
_this7.drag.contentTableML = originL;
|
||||
_this7.drag.contentTableMR = originR;
|
||||
}
|
||||
}
|
||||
} else if (type != 'online' && _this8.props.draggable) {
|
||||
_this7.drag.fixedType = fixedType;
|
||||
} else if (type != 'online' && _this7.props.draggable) {
|
||||
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
if (!_this8.props.draggable) return;
|
||||
var th = _this8.getTargetToType(targetEvent);
|
||||
if (!_this7.props.draggable) return;
|
||||
var th = _this7.getTargetToType(targetEvent);
|
||||
th.setAttribute('draggable', true); //添加交换列效果
|
||||
_this8.drag.option = 'dragAble';
|
||||
_this8.currentDome = th;
|
||||
_this7.drag.option = 'dragAble';
|
||||
_this7.currentDome = th;
|
||||
var _currentIndex = parseInt(th.getAttribute("data-line-index"));
|
||||
_this8.drag.currIndex = _currentIndex;
|
||||
_this7.drag.currIndex = _currentIndex;
|
||||
} else {
|
||||
// console.log("onTrMouseDown dragborder or draggable is all false !");
|
||||
return;
|
||||
|
|
@ -635,8 +676,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTableWidth = function () {
|
||||
var tableWidth = 0,
|
||||
offWidth = 0; //this.table.cols.length;
|
||||
for (var index = 0; index < _this8.table.cols.length; index++) {
|
||||
var da = _this8.table.cols[index];
|
||||
for (var index = 0; index < _this7.table.cols.length; index++) {
|
||||
var da = _this7.table.cols[index];
|
||||
tableWidth += parseInt(da.style.width);
|
||||
}
|
||||
return tableWidth - offWidth;
|
||||
|
|
@ -645,7 +686,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTargetToType = function (targetEvent) {
|
||||
var tag = targetEvent;
|
||||
if (targetEvent && !targetEvent.getAttribute("data-type")) {
|
||||
tag = _this8.getTargetToType(targetEvent.parentElement);
|
||||
tag = _this7.getTargetToType(targetEvent.parentElement);
|
||||
}
|
||||
return tag;
|
||||
};
|
||||
|
|
@ -653,15 +694,15 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTargetToTh = function (targetEvent) {
|
||||
var th = targetEvent;
|
||||
if (targetEvent.nodeName.toUpperCase() != "TH") {
|
||||
th = _this8.getThDome(targetEvent);
|
||||
th = _this7.getThDome(targetEvent);
|
||||
}
|
||||
// console.log(" getTargetToTh: ", th);
|
||||
return th;
|
||||
};
|
||||
|
||||
this.onTrMouseMove = function (e) {
|
||||
if (!_this8.props.dragborder && !_this8.props.draggable) return;
|
||||
var _props4 = _this8.props,
|
||||
if (!_this7.props.dragborder && !_this7.props.draggable) return;
|
||||
var _props4 = _this7.props,
|
||||
clsPrefix = _props4.clsPrefix,
|
||||
dragborder = _props4.dragborder,
|
||||
contentDomWidth = _props4.contentDomWidth,
|
||||
|
|
@ -677,20 +718,20 @@ var _initialiseProps = function _initialiseProps() {
|
|||
|
||||
!eventNoStop && _utils.Event.stopPropagation(e);
|
||||
var event = _utils.Event.getEvent(e);
|
||||
if (_this8.props.dragborder && _this8.drag.option == "border") {
|
||||
if (_this7.props.dragborder && _this7.drag.option == "border") {
|
||||
//移动改变宽度
|
||||
var currentCols = _this8.table.cols[_this8.drag.currIndex];
|
||||
var diff = event.clientX - _this8.drag.oldLeft;
|
||||
var newWidth = _this8.drag.oldWidth + diff;
|
||||
_this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth;
|
||||
if (newWidth > _this8.minWidth) {
|
||||
var currentCols = _this7.table.cols[_this7.drag.currIndex];
|
||||
var diff = event.clientX - _this7.drag.oldLeft;
|
||||
var newWidth = _this7.drag.oldWidth + diff;
|
||||
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
|
||||
if (newWidth > _this7.minWidth) {
|
||||
currentCols.style.width = newWidth + 'px';
|
||||
|
||||
// displayinrow 判断、 固定行高判断
|
||||
if (!bodyDisplayInRow) {
|
||||
_this8.table.bodyRows.forEach(function (row, index) {
|
||||
var leftRow = _this8.table.fixedLeftBodyRows[index];
|
||||
var rightRow = _this8.table.fixedRightBodyRows[index];
|
||||
_this7.table.bodyRows.forEach(function (row, index) {
|
||||
var leftRow = _this7.table.fixedLeftBodyRows[index];
|
||||
var rightRow = _this7.table.fixedRightBodyRows[index];
|
||||
if (leftRow || rightRow) {
|
||||
var height = row.getBoundingClientRect().height;
|
||||
leftRow && (leftRow.style.height = height + "px");
|
||||
|
|
@ -700,74 +741,113 @@ var _initialiseProps = function _initialiseProps() {
|
|||
}
|
||||
|
||||
//hao 支持固定表头拖拽 修改表体的width
|
||||
if (_this8.fixedTable.cols) {
|
||||
_this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px";
|
||||
if (_this7.fixedTable.cols) {
|
||||
_this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
|
||||
}
|
||||
|
||||
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
|
||||
if (newDiff > 0) {
|
||||
//缩小
|
||||
var lastWidth = _this8.lastColumWidth + newDiff;
|
||||
_this8.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||||
_this8.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||||
var contentTableSWidth = _this7.drag.contentTableSWidth - _this7.drag.contentTableCWidth;
|
||||
// console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
|
||||
if (diff < 0 && contentTableSWidth + diff < 0) {
|
||||
var headerCols = _this7.table.tableHeaderCols || _this7.table.cols;
|
||||
var lastWidth = _this7.lastColumWidth - (contentTableSWidth + diff);
|
||||
// console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex);
|
||||
headerCols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||||
_this7.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||||
}
|
||||
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this8.drag.tableWidth + diff) - scrollbarWidth;
|
||||
//表头滚动条处理
|
||||
if (headerScroll) {
|
||||
if (showScroll < 0) {
|
||||
//小于 0 出现滚动条
|
||||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||||
_this8.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftHeaderTable, scrollbarWidth);
|
||||
_this8.optTableMargin(_this8.table.fixedRighHeadertTable, scrollbarWidth);
|
||||
// 内容区非固定列场景拖拽
|
||||
if (!_this7.drag.fixedType) {
|
||||
|
||||
// let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
|
||||
// if(newDiff > 0){//缩小
|
||||
// let lastWidth = this.lastColumWidth + newDiff;
|
||||
// this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
|
||||
// this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
|
||||
|
||||
// }
|
||||
|
||||
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this7.drag.tableWidth + diff) - scrollbarWidth;
|
||||
|
||||
//表头滚动条处理
|
||||
if (headerScroll) {
|
||||
if (showScroll < 0) {
|
||||
//小于 0 出现滚动条
|
||||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||||
_this7.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
|
||||
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
|
||||
} else {
|
||||
//大于 0 不显示滚动条
|
||||
_this7.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
|
||||
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
|
||||
}
|
||||
} else {
|
||||
//大于 0 不显示滚动条
|
||||
_this8.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0);
|
||||
_this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0);
|
||||
if (showScroll < 0) {
|
||||
_this7.table.tableBody.style.overflowX = 'auto';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||
_this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth);
|
||||
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' });
|
||||
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' });
|
||||
} else {
|
||||
_this7.table.tableBody.style.overflowX = 'hidden';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0);
|
||||
_this7.optTableMargin(_this7.table.fixedRightBodyTable, 0);
|
||||
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' });
|
||||
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'auto' });
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (showScroll < 0) {
|
||||
_this8.table.tableBody.style.overflowX = 'auto';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||
_this8.optTableMargin(_this8.table.fixedRightBodyTable, '-' + scrollbarWidth);
|
||||
_this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'scroll' });
|
||||
_this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'scroll' });
|
||||
} else if (_this7.drag.fixedType) {
|
||||
if (_this7.table.ths[_this7.drag.currIndex]) {
|
||||
_this7.table.ths[_this7.drag.currIndex].width = newWidth;
|
||||
}
|
||||
// console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
|
||||
// debugger
|
||||
|
||||
var contentTablePar = _this7.table.contentTableHeader.parentNode;
|
||||
// left、right缩小的内容，在没有滚动条时，需要将宽度同步到到最后一列
|
||||
// diff<0 往里拖，
|
||||
// const contentTableSWidth = this.drag.contentTableSWidth - this.drag.contentTableCWidth;
|
||||
// console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
|
||||
// if(diff<0 && contentTableSWidth+diff < 0) {
|
||||
// const headerCols = this.table.tableHeaderCols || this.table.cols;
|
||||
// const lastWidth =this.lastColumWidth - (contentTableSWidth+diff);
|
||||
// console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex);
|
||||
// headerCols[lastShowIndex].style.width = lastWidth +"px";//同步表头
|
||||
// this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
|
||||
// }
|
||||
if (_this7.drag.fixedType == 'left') {
|
||||
contentTablePar.style.marginLeft = _this7.drag.contentTableML + diff + 'px';
|
||||
} else {
|
||||
_this8.table.tableBody.style.overflowX = 'hidden';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftBodyTable, 0);
|
||||
_this8.optTableMargin(_this8.table.fixedRightBodyTable, 0);
|
||||
_this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'auto' });
|
||||
_this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'auto' });
|
||||
contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
_this8.drag.newWidth = _this8.minWidth;
|
||||
_this7.drag.newWidth = _this7.minWidth;
|
||||
}
|
||||
}
|
||||
// 增加拖拽列宽动作的回调函数
|
||||
_this8.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this8.drag.newWidth);
|
||||
_this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
|
||||
};
|
||||
|
||||
this.onTrMouseUp = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
var width = _this8.drag.newWidth;
|
||||
var opt = _this8.drag.option;
|
||||
_this8.mouseClear();
|
||||
var width = _this7.drag.newWidth;
|
||||
var opt = _this7.drag.option;
|
||||
_this7.mouseClear();
|
||||
if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题
|
||||
_this8.props.onDropBorder && _this8.props.onDropBorder(event, width);
|
||||
_this7.props.onDropBorder && _this7.props.onDropBorder(event, width);
|
||||
};
|
||||
|
||||
this.clearThsDr = function () {
|
||||
var ths = _this8.table.ths;
|
||||
var ths = _this7.table.ths;
|
||||
for (var index = 0; index < ths.length; index++) {
|
||||
ths[index].setAttribute('draggable', false); //去掉交换列效果
|
||||
}
|
||||
};
|
||||
|
||||
this.bodyonLineMouseUp = function (events, type) {
|
||||
if (!_this8.drag || !_this8.drag.option) return;
|
||||
_this8.mouseClear();
|
||||
if (!_this7.drag || !_this7.drag.option) return;
|
||||
_this7.mouseClear();
|
||||
};
|
||||
|
||||
this.optTableMargin = function (table, scrollbarWidth) {
|
||||
|
|
@ -790,31 +870,31 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onDragStart = function (e) {
|
||||
if (!_this8.props.draggable) return;
|
||||
if (_this8.drag && _this8.drag.option != 'dragAble') {
|
||||
if (!_this7.props.draggable) return;
|
||||
if (_this7.drag && _this7.drag.option != 'dragAble') {
|
||||
return;
|
||||
}
|
||||
var event = _utils.Event.getEvent(e),
|
||||
|
||||
// target = Event.getTarget(event);
|
||||
target = _this8.getTargetToTh(_utils.Event.getTarget(event));
|
||||
target = _this7.getTargetToTh(_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 = _this8.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
|
||||
crt.style.width = _this7.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
|
||||
crt.style.height = "40px";
|
||||
// crt.style['line-height'] = "40px";
|
||||
// document.body.appendChild(crt);
|
||||
document.getElementById(_this8._table_none_cont_id).appendChild(crt);
|
||||
document.getElementById(_this7._table_none_cont_id).appendChild(crt);
|
||||
event.dataTransfer.setDragImage(crt, 0, 0);
|
||||
}
|
||||
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", currentKey);
|
||||
_this8.currentObj = _this8.props.rows[0][currentIndex];
|
||||
_this7.currentObj = _this7.props.rows[0][currentIndex];
|
||||
};
|
||||
|
||||
this.onDragOver = function (e) {
|
||||
|
|
@ -823,34 +903,34 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onDrop = function (e) {
|
||||
if (!_this8.props.draggable) return;
|
||||
var props = _this8.getCurrentEventData(_this8._dragCurrent);
|
||||
if (!_this7.props.draggable) return;
|
||||
var props = _this7.getCurrentEventData(_this7._dragCurrent);
|
||||
e.column = { props: props };
|
||||
if (_this8.drag && _this8.drag.option != 'dragAble') {
|
||||
_this8.props.onDrop(e);
|
||||
if (_this7.drag && _this7.drag.option != 'dragAble') {
|
||||
_this7.props.onDrop(e);
|
||||
return;
|
||||
}
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
_this8.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
_this7.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
// let data = this.getCurrentEventData(this._dragCurrent);
|
||||
// if(!data){
|
||||
// this.props.onDrop(e);
|
||||
// return;
|
||||
// }
|
||||
if (!_this8.props.onDrop) return;
|
||||
if (!_this7.props.onDrop) return;
|
||||
// this.props.onDrop(event,target);
|
||||
_this8.props.onDrop(event, { dragSource: _this8.currentObj, dragTarg: e.column });
|
||||
_this7.props.onDrop(event, { dragSource: _this7.currentObj, dragTarg: e.column });
|
||||
};
|
||||
|
||||
this.onDragEnter = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this8._dragCurrent = target;
|
||||
_this7._dragCurrent = target;
|
||||
var currentIndex = target.getAttribute("data-line-index");
|
||||
if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
|
||||
if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TH") {
|
||||
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
|
||||
target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
|
||||
|
|
@ -861,24 +941,24 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.onDragEnd = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this8._dragCurrent.setAttribute("style", "");
|
||||
_this7._dragCurrent.setAttribute("style", "");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// this._dragCurrent.style = "";
|
||||
document.getElementById(_this8._table_none_cont_id).innerHTML = "";
|
||||
document.getElementById(_this7._table_none_cont_id).innerHTML = "";
|
||||
|
||||
var data = _this8.getCurrentEventData(_this8._dragCurrent);
|
||||
var data = _this7.getCurrentEventData(_this7._dragCurrent);
|
||||
if (!data) return;
|
||||
if (!_this8.currentObj || _this8.currentObj.key == data.key) return;
|
||||
if (!_this8.props.onDragEnd) return;
|
||||
_this8.props.onDragEnd(event, { dragSource: _this8.currentObj, dragTarg: data });
|
||||
if (!_this7.currentObj || _this7.currentObj.key == data.key) return;
|
||||
if (!_this7.props.onDragEnd) return;
|
||||
_this7.props.onDragEnd(event, { dragSource: _this7.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) === _this8.drag.currIndex) return;
|
||||
if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TH") {
|
||||
target.setAttribute("style", "");
|
||||
// this._dragCurrent.style = "";
|
||||
|
|
@ -886,7 +966,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.handlerFilterChange = function (key, value, condition) {
|
||||
var onFilterChange = _this8.props.onFilterChange;
|
||||
var onFilterChange = _this7.props.onFilterChange;
|
||||
|
||||
if (onFilterChange) {
|
||||
onFilterChange(key, value, condition);
|
||||
|
|
@ -894,7 +974,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.handlerFilterClear = function (field) {
|
||||
var onFilterClear = _this8.props.onFilterClear;
|
||||
var onFilterClear = _this7.props.onFilterClear;
|
||||
|
||||
if (onFilterClear) {
|
||||
onFilterClear(field);
|
||||
|
|
@ -902,7 +982,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.filterRenderType = function (type, dataIndex, index) {
|
||||
var _props5 = _this8.props,
|
||||
var _props5 = _this7.props,
|
||||
clsPrefix = _props5.clsPrefix,
|
||||
rows = _props5.rows,
|
||||
filterDelay = _props5.filterDelay,
|
||||
|
|
@ -917,8 +997,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
, clsPrefix: clsPrefix //css前缀
|
||||
, className: clsPrefix + " filter-text",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
|
||||
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -931,8 +1011,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
clsPrefix: clsPrefix,
|
||||
className: clsPrefix + " filter-text",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调并且函数防抖动
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调并且函数防抖动
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -966,8 +1046,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
data: selectDataSource,
|
||||
notFoundContent: "Loading" //没有数据显示的默认字
|
||||
, dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
onFocus: rows[1][index]["filterdropdownfocus"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
|
|
@ -982,8 +1062,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -997,8 +1077,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -1012,8 +1092,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -1027,8 +1107,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-Wo",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -1042,8 +1122,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -1055,8 +1135,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onCopy = function (data, index, event) {
|
||||
if (_this8.props.onCopy) {
|
||||
_this8.props.onCopy(_extends(data, { col: index }), event);
|
||||
if (_this7.props.onCopy) {
|
||||
_this7.props.onCopy(_extends(data, { col: index }), event);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -122,6 +122,9 @@ var TableRow = function (_Component) {
|
|||
target = target.parentNode;
|
||||
}
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
// 拖拽其实index
|
||||
_this.props.contentTable.startI = target.getAttribute("data-row-index");
|
||||
_this._dragCurrent = target;
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", _this.currentIndex);
|
||||
|
|
@ -134,7 +137,9 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onDrop = function (e) {
|
||||
var onDragRow = _this.props.onDragRow;
|
||||
var _this$props = _this.props,
|
||||
onDragRow = _this$props.onDragRow,
|
||||
contentTable = _this$props.contentTable;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
|
|
@ -224,9 +229,9 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.synchronizeTableTrShadow = function () {
|
||||
var _this$props = _this.props,
|
||||
contentTable = _this$props.contentTable,
|
||||
index = _this$props.index;
|
||||
var _this$props2 = _this.props,
|
||||
contentTable = _this$props2.contentTable,
|
||||
index = _this$props2.index;
|
||||
|
||||
|
||||
var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
|
||||
|
|
@ -277,21 +282,29 @@ var TableRow = function (_Component) {
|
|||
currentObj = element;
|
||||
}
|
||||
}
|
||||
if (type) {
|
||||
if (type == 'down') {
|
||||
currentObj && currentObj.setAttribute("style", "border-bottom:2px solid #02B1FD");
|
||||
} else if (type) {
|
||||
currentObj && currentObj.setAttribute("style", "border-top:2px solid #02B1FD");
|
||||
} else {
|
||||
currentObj && currentObj.setAttribute("style", "");
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (e) {
|
||||
var contentTable = _this.props.contentTable;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
var dragEnterIndex = target.getAttribute("data-row-index");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
var dragType = parseInt(dragEnterIndex) > parseInt(contentTable.startI) ? 'down' : 'top';
|
||||
|
||||
contentTable.dragType = dragType;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, true);
|
||||
_this.synchronizeTableTr(currentIndex, dragType);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -570,6 +583,8 @@ var TableRow = function (_Component) {
|
|||
visible = _props10.visible,
|
||||
index = _props10.index,
|
||||
onPaste = _props10.onPaste,
|
||||
isPre = _props10.isPre,
|
||||
isSuf = _props10.isSuf,
|
||||
expandIconColumnIndex = _props10.expandIconColumnIndex,
|
||||
expandIconAsCell = _props10.expandIconAsCell,
|
||||
expanded = _props10.expanded,
|
||||
|
|
@ -592,6 +607,7 @@ var TableRow = function (_Component) {
|
|||
getCellClassName = _props10.getCellClassName;
|
||||
var notRowDrag = this.state.notRowDrag;
|
||||
|
||||
var isEmptyTr = isPre || isSuf;
|
||||
var showSum = false;
|
||||
var className = this.props.className;
|
||||
|
||||
|
|
@ -667,7 +683,6 @@ var TableRow = function (_Component) {
|
|||
if (rowDraggAble && !useDragHandle && !notRowDrag) {
|
||||
className += ' row-dragg-able';
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
|
|
@ -678,11 +693,22 @@ var TableRow = function (_Component) {
|
|||
onMouseLeave: this.onMouseLeave,
|
||||
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
||||
style: style,
|
||||
'data-row-key': record && record.key ? record.key : hoverKey
|
||||
'data-row-key': record && record.key ? record.key : hoverKey,
|
||||
'data-row-index': this.props.index
|
||||
// key={hoverKey}
|
||||
, ref: this.bindElement
|
||||
},
|
||||
cells.length > 0 ? cells : _react2["default"].createElement('td', { style: { width: 0, padding: 0 } })
|
||||
cells.length > 0 ? cells : isEmptyTr ? _react2["default"].createElement(
|
||||
'td',
|
||||
{ className: 'loading-td' },
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: 'loading-div ' + (isPre ? 'pre' : 'suf') },
|
||||
_react2["default"].createElement('img', {
|
||||
alt: '',
|
||||
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDJweCIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSIwIDAgNDIgNDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUzLjIgKDcyNjQzKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT53aW5kb3U8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjQ5Ljc3NzAwMDElIiB5MT0iOTkuOTg4NjY2NyUiIHgyPSI0OS43NzcwMDAxJSIgeTI9IjIyLjc5MTY5ODQlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiM4MkQ5MDAiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iMC4wNzY1JSIgeTE9IjQ5LjgwNDUlIiB4Mj0iODQuMDAyMTY0NCUiIHkyPSI0OS44MDQ1JSIgaWQ9ImxpbmVhckdyYWRpZW50LTIiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZCRTBFIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwLjIyOTUwMDElIiB5MT0iLTAuMDgwOTk5OTQyOSUiIHgyPSI1MC4yMjk1MDAxJSIgeTI9IjgwLjA2MTg4MjglIiBpZD0ibGluZWFyR3JhZGllbnQtMyI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjQ3NDciIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iOTkuOTI1NjY2NyUiIHkxPSI0OS45MTglIiB4Mj0iMjQuMjY5MjQwMyUiIHkyPSI0OS45MTglIiBpZD0ibGluZWFyR3JhZGllbnQtNCI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMDhDREMiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLop4blm74vbG9hZGluZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDAwMDAwLCAtMy4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IndpbmRvdSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4wMDAwMDAsIDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i5YiG57uELTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjAwMDAwMCwgMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTEpIiBvcGFjaXR5PSIwLjQ5OTM3MjIxIiB4PSIwLjQwOTA5MDkwOSIgeT0iMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjM0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iIzAwQzg2NCIgY3g9IjYuNDA5MDkwOTEiIGN5PSIzNC4yNjY3MDkxIiByPSI2Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSLliIbnu4QtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC40NTE3MjksIDI4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMikiIG9wYWNpdHk9IjAuNTA5MDIxNTc3IiB4PSI2LjI2MjM1NTk1IiB5PSIzLjU1MjcxMzY4ZS0xNSIgd2lkdGg9IjM0IiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iI0ZGQkUwRSIgY3g9IjYuNTAyODE2OSIgY3k9IjYiIHI9IjYiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9IuWIhue7hCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0zKSIgb3BhY2l0eT0iMC41MDEyMzIzMjkiIHg9Ii0yLjY1NTY1MzQ3ZS0xMyIgeT0iNS43ODgyMTI4MSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjM0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iI0ZGNDc0NyIgY3g9IjYiIGN5PSI2IiByPSI2Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC45NTQ1NDUsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC00KSIgb3BhY2l0eT0iMC41MDQxODUyNjgiIHg9IjAiIHk9IjAiIHdpZHRoPSIzNiIgaGVpZ2h0PSIxMS45NDI2NTY5Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iIzAwOENEQyIgY3g9IjM1IiBjeT0iNiIgcj0iNiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==' })
|
||||
)
|
||||
) : _react2["default"].createElement('td', { style: { width: 0, padding: 0 } })
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -321,6 +321,8 @@ function bigData(Table) {
|
|||
};
|
||||
|
||||
BigData.prototype.render = function render() {
|
||||
var _this4 = this;
|
||||
|
||||
var data = this.props.data;
|
||||
var scrollTop = this.scrollTop;
|
||||
var endIndex = this.endIndex,
|
||||
|
|
@ -356,6 +358,9 @@ function bigData(Table) {
|
|||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
data: dataSource,
|
||||
lazyLoad: lazyLoad,
|
||||
ref: function ref(el) {
|
||||
return _this4.table = el;
|
||||
},
|
||||
handleScrollY: this.handleScrollY,
|
||||
scrollTop: scrollTop,
|
||||
setRowHeight: this.setRowHeight,
|
||||
|
|
@ -380,28 +385,28 @@ function bigData(Table) {
|
|||
}, _class.propTypes = {
|
||||
loadBuffer: _propTypes2["default"].number
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this4 = this;
|
||||
var _this5 = this;
|
||||
|
||||
this.getTreeData = function (expandedKeys, newData) {
|
||||
var startIndex = _this4.startIndex,
|
||||
endIndex = _this4.endIndex;
|
||||
var startIndex = _this5.startIndex,
|
||||
endIndex = _this5.endIndex;
|
||||
|
||||
var data = newData ? newData : _this4.props.data;
|
||||
_this4.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
|
||||
var data = newData ? newData : _this5.props.data;
|
||||
_this5.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
|
||||
// 深递归 data，截取可视区 data 数组，再将扁平结构转换成嵌套结构
|
||||
var sliceTreeList = [];
|
||||
var flatTreeData = _this4.deepTraversal(data);
|
||||
_this4.flatTreeData = flatTreeData;
|
||||
var flatTreeData = _this5.deepTraversal(data);
|
||||
_this5.flatTreeData = flatTreeData;
|
||||
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
|
||||
_this4.handleTreeListChange(sliceTreeList);
|
||||
_this5.handleTreeListChange(sliceTreeList);
|
||||
|
||||
_this4.cacheExpandedKeys = expandedKeys && null;
|
||||
_this5.cacheExpandedKeys = expandedKeys && null;
|
||||
};
|
||||
|
||||
this.deepTraversal = function (treeData) {
|
||||
var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||
|
||||
var _this = _this4;
|
||||
var _this = _this5;
|
||||
var cacheExpandedKeys = _this.cacheExpandedKeys,
|
||||
_this$expandedRowKeys = _this.expandedRowKeys,
|
||||
expandedRowKeys = _this$expandedRowKeys === undefined ? [] : _this$expandedRowKeys,
|
||||
|
|
@ -415,7 +420,7 @@ function bigData(Table) {
|
|||
var _dataCopy$i = dataCopy[i],
|
||||
children = _dataCopy$i.children,
|
||||
props = _objectWithoutProperties(_dataCopy$i, ["children"]),
|
||||
key = _this4.getRowKey(dataCopy[i], i),
|
||||
key = _this5.getRowKey(dataCopy[i], i),
|
||||
dataCopyI = new Object(),
|
||||
_isLeaf = children && children.length > 0 ? false : true,
|
||||
isExpanded = parentKey === null || expandedKeysSet.has(parentKey) ? expandedKeysSet.has(key) : false;
|
||||
|
|
@ -433,7 +438,7 @@ function bigData(Table) {
|
|||
|
||||
// 优化递归逻辑，如果当前节点是收起状态，则不遍历其子节点
|
||||
if (Array.isArray(children) && children.length > 0 && isExpanded) {
|
||||
flatTreeData = flatTreeData.concat(_this4.deepTraversal(children, key));
|
||||
flatTreeData = flatTreeData.concat(_this5.deepTraversal(children, key));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -448,28 +453,28 @@ function bigData(Table) {
|
|||
rootId: null,
|
||||
_isLeaf: '_isLeaf'
|
||||
};
|
||||
var treeData = (0, _utils.convertListToTree)(treeList, attr, _this4.flatTreeKeysMap);
|
||||
var treeData = (0, _utils.convertListToTree)(treeList, attr, _this5.flatTreeKeysMap);
|
||||
|
||||
_this4.startIndex = typeof startIndex !== "undefined" ? startIndex : _this4.startIndex;
|
||||
_this4.endIndex = typeof endIndex !== "undefined" ? endIndex : _this4.endIndex;
|
||||
_this5.startIndex = typeof startIndex !== "undefined" ? startIndex : _this5.startIndex;
|
||||
_this5.endIndex = typeof endIndex !== "undefined" ? endIndex : _this5.endIndex;
|
||||
|
||||
_this4.treeData = treeData;
|
||||
_this5.treeData = treeData;
|
||||
};
|
||||
|
||||
this.computeCachedRowParentIndex = function (data) {
|
||||
var isTree = _this4.props.isTree;
|
||||
var isTree = _this5.props.isTree;
|
||||
|
||||
var isTreeType = isTree ? true : _this4.checkIsTreeType();
|
||||
var isTreeType = isTree ? true : _this5.checkIsTreeType();
|
||||
treeTypeIndex = 0;
|
||||
if (isTreeType) {
|
||||
data.forEach(function (item, index) {
|
||||
_this4.firstLevelKey[index] = _this4.getRowKey(item, index);
|
||||
_this4.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
_this5.firstLevelKey[index] = _this5.getRowKey(item, index);
|
||||
_this5.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
//保存所有的keys跟小标对应起来
|
||||
_this4.keys[treeTypeIndex] = _this4.getRowKey(item, index);
|
||||
_this5.keys[treeTypeIndex] = _this5.getRowKey(item, index);
|
||||
treeTypeIndex++;
|
||||
if (item.children) {
|
||||
_this4.getData(item.children, index);
|
||||
_this5.getData(item.children, index);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -480,7 +485,7 @@ function bigData(Table) {
|
|||
// 关键点是动态的获取startIndex和endIndex
|
||||
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
|
||||
// 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
|
||||
var _this = _this4;
|
||||
var _this = _this5;
|
||||
var _this$props = _this.props,
|
||||
data = _this$props.data,
|
||||
height = _this$props.height,
|
||||
|
|
@ -506,13 +511,13 @@ function bigData(Table) {
|
|||
var temp = nextScrollTop;
|
||||
var currentKey = void 0;
|
||||
while (temp > 0) {
|
||||
var currentRowHeight = _this4.cachedRowHeight[index];
|
||||
var currentRowHeight = _this5.cachedRowHeight[index];
|
||||
if (currentRowHeight === undefined) {
|
||||
if (_this4.treeType) {
|
||||
if (_this5.treeType) {
|
||||
// currentKey = this.keys[index];
|
||||
currentKey = _this4.flatTreeData[index].key;
|
||||
currentKey = _this5.flatTreeData[index].key;
|
||||
currentRowHeight = 0;
|
||||
if (_this4.flatTreeKeysMap.hasOwnProperty(currentKey)) {
|
||||
if (_this5.flatTreeKeysMap.hasOwnProperty(currentKey)) {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
} else {
|
||||
|
|
@ -537,9 +542,9 @@ function bigData(Table) {
|
|||
if (viewHeight) {
|
||||
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
|
||||
|
||||
while (rowsHeight < viewHeight && tempIndex < _this4.cachedRowHeight.length) {
|
||||
if (_this4.cachedRowHeight[tempIndex]) {
|
||||
rowsHeight += _this4.cachedRowHeight[tempIndex];
|
||||
while (rowsHeight < viewHeight && tempIndex < _this5.cachedRowHeight.length) {
|
||||
if (_this5.cachedRowHeight[tempIndex]) {
|
||||
rowsHeight += _this5.cachedRowHeight[tempIndex];
|
||||
// if (
|
||||
// (treeType &&
|
||||
// _this.cachedRowParentIndex[tempIndex] !== tempIndex) ||
|
||||
|
|
@ -569,13 +574,13 @@ function bigData(Table) {
|
|||
if (treeType && endIndex > flatTreeData.length || !treeType && endIndex > data.length) {
|
||||
endIndex = treeType ? flatTreeData.length : data.length;
|
||||
}
|
||||
if (endIndex > _this4.endIndex) {
|
||||
_this4.startIndex = startIndex;
|
||||
_this4.endIndex = endIndex;
|
||||
if (endIndex > _this5.endIndex) {
|
||||
_this5.startIndex = startIndex;
|
||||
_this5.endIndex = endIndex;
|
||||
if (treeType) {
|
||||
_this4.handleTreeListChange(flatTreeData.slice(startIndex, endIndex), startIndex, endIndex);
|
||||
_this5.handleTreeListChange(flatTreeData.slice(startIndex, endIndex), startIndex, endIndex);
|
||||
}
|
||||
_this4.setState({ needRender: !needRender });
|
||||
_this5.setState({ needRender: !needRender });
|
||||
callback(parseInt(currentIndex + rowsInView));
|
||||
}
|
||||
}
|
||||
|
|
@ -585,13 +590,13 @@ function bigData(Table) {
|
|||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
if (startIndex < _this4.startIndex) {
|
||||
_this4.startIndex = startIndex;
|
||||
_this4.endIndex = _this4.startIndex + loadCount;
|
||||
if (startIndex < _this5.startIndex) {
|
||||
_this5.startIndex = startIndex;
|
||||
_this5.endIndex = _this5.startIndex + loadCount;
|
||||
if (treeType) {
|
||||
_this4.handleTreeListChange(flatTreeData.slice(startIndex, _this4.endIndex), startIndex, _this4.endIndex);
|
||||
_this5.handleTreeListChange(flatTreeData.slice(startIndex, _this5.endIndex), startIndex, _this5.endIndex);
|
||||
}
|
||||
_this4.setState({ needRender: !needRender });
|
||||
_this5.setState({ needRender: !needRender });
|
||||
callback(parseInt(currentIndex + rowsInView));
|
||||
}
|
||||
// console.log(
|
||||
|
|
@ -605,7 +610,7 @@ function bigData(Table) {
|
|||
};
|
||||
|
||||
this.onExpand = function (expandState, record, index) {
|
||||
var _this = _this4;
|
||||
var _this = _this5;
|
||||
var _this$expandedRowKeys2 = _this.expandedRowKeys,
|
||||
expandedRowKeys = _this$expandedRowKeys2 === undefined ? [] : _this$expandedRowKeys2;
|
||||
var needRender = _this.state.needRender;
|
||||
|
|
@ -632,7 +637,7 @@ function bigData(Table) {
|
|||
if (!_this.props.expandedRowKeys) {
|
||||
if (expandState) {
|
||||
expandedRowKeys.push(rowKey);
|
||||
_this4.setState({ needRender: !needRender });
|
||||
_this5.setState({ needRender: !needRender });
|
||||
} else {
|
||||
var _index = -1;
|
||||
expandedRowKeys.forEach(function (r, i) {
|
||||
|
|
@ -642,7 +647,7 @@ function bigData(Table) {
|
|||
});
|
||||
if (_index !== -1) {
|
||||
expandedRowKeys.splice(_index, 1);
|
||||
_this4.setState({ needRender: !needRender });
|
||||
_this5.setState({ needRender: !needRender });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -650,7 +655,7 @@ function bigData(Table) {
|
|||
// expandState为true时，记录下
|
||||
_this.props.onExpand(expandState, record);
|
||||
|
||||
if (_this4.treeType) {
|
||||
if (_this5.treeType) {
|
||||
//收起和展开时，缓存 expandedKeys
|
||||
_this.cacheExpandedKeys = new Set(expandedRowKeys);
|
||||
//重新递归数据
|
||||
|
|
|
|||
|
|
@ -228,8 +228,13 @@ function sort(Table, Icon) {
|
|||
|
||||
this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
|
||||
var currentCol = orderCols[currentIndex];
|
||||
var getMultiSorterValueFunc = currentCol.getMultiSorterValue;
|
||||
var preKey = pre[currentCol.key];
|
||||
var afterKey = after[currentCol.key];
|
||||
if (getMultiSorterValueFunc) {
|
||||
preKey = getMultiSorterValueFunc(pre, currentCol);
|
||||
afterKey = getMultiSorterValueFunc(after, currentCol);
|
||||
}
|
||||
var colSortFun = currentCol.sorter;
|
||||
if (typeof colSortFun !== 'function') {
|
||||
colSortFun = function colSortFun() {
|
||||
|
|
@ -281,7 +286,7 @@ function sort(Table, Icon) {
|
|||
var sort = _this3.props.sort;
|
||||
|
||||
var seleObj = void 0;
|
||||
if (!oldData) {
|
||||
if (!oldData.length) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
var sortCol = void 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -452,8 +452,8 @@
|
|||
color: rgb(33, 33, 33);
|
||||
background-clip: padding-box;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
|
@ -894,6 +894,31 @@
|
|||
.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
|
||||
font-size: 12px; }
|
||||
|
||||
.loading-td {
|
||||
position: relative !important;
|
||||
width: 1000px !important;
|
||||
height: 500px !important;
|
||||
display: block !important; }
|
||||
|
||||
.loading-div {
|
||||
position: absolute;
|
||||
margin: 80px 0 0 0;
|
||||
animation-fill-mode: both;
|
||||
border: none !important;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 0;
|
||||
left: 30%;
|
||||
background: transparent !important;
|
||||
display: inline-block;
|
||||
animation: rotate1 1s 0s linear infinite !important;
|
||||
text-align: center;
|
||||
line-height: 40px; }
|
||||
.loading-div.pre {
|
||||
bottom: 0; }
|
||||
.loading-div.suf {
|
||||
top: 0; }
|
||||
|
||||
.selected {
|
||||
background: #FFF7E7; }
|
||||
|
||||
|
|
|
|||
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
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.3.14",
|
||||
"version": "2.3.15-beta.15",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
106
src/Table.js
106
src/Table.js
|
|
@ -164,6 +164,7 @@ class Table extends Component {
|
|||
this.getFooter = this.getFooter.bind(this);
|
||||
this.getEmptyText = this.getEmptyText.bind(this);
|
||||
this.getHeaderRowStyle = this.getHeaderRowStyle.bind(this);
|
||||
this.manualSyncFixedTableRowHeight = this.manualSyncFixedTableRowHeight.bind(this)
|
||||
this.syncFixedTableRowHeight = this.syncFixedTableRowHeight.bind(this);
|
||||
this.resetScrollX = this.resetScrollX.bind(this);
|
||||
this.findExpandedRow = this.findExpandedRow.bind(this);
|
||||
|
|
@ -178,6 +179,7 @@ class Table extends Component {
|
|||
this.leftColumnsLength //左侧固定列的长度
|
||||
this.centerColumnsLength //非固定列的长度
|
||||
this.columnsChildrenList = [];//复杂表头、所有叶子节点
|
||||
this.dataChanged = false; // 数据是否改变
|
||||
}
|
||||
componentWillMount() {
|
||||
this.centerColumnsLength = this.columnManager.centerColumns().length
|
||||
|
|
@ -276,15 +278,49 @@ class Table extends Component {
|
|||
if (prevScrollY && currentScrollY && (prevScrollY !== currentScrollY) && this.props.lazyLoad && !this.props.ignoreScrollYChange) {
|
||||
this.bodyTable.scrollTop = 0
|
||||
} else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY && (prevScrollY !== currentScrollY)) {
|
||||
const distance = this.bodyTable.scrollTop + (currentScrollY - prevScrollY)
|
||||
if (distance < 0) {
|
||||
this.bodyTable.scrollTop = 0
|
||||
const bodyScrollTop = this.bodyTable.scrollTop
|
||||
if (bodyScrollTop === 0) { // 在顶部的时候，滚动条不用动
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else {
|
||||
this.bodyTable.scrollTop = distance
|
||||
const distance = bodyScrollTop + currentScrollY - prevScrollY;
|
||||
if (distance < 0) {
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else {
|
||||
const { scrollHeight, scrollTop } = this.bodyTable
|
||||
const bottomDistance = Math.abs(scrollHeight - scrollTop - prevScrollY) // 在最底部的时候也不用滚动滚动条
|
||||
if (bottomDistance < 5) { // 有些dom计算不是十分精确，设置一个值来缓冲一下
|
||||
this.bodyTable.scrollTop = scrollTop + prevScrollY - currentScrollY
|
||||
} else {
|
||||
this.bodyTable.scrollTop = distance;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
this.isShowScrollY();
|
||||
if (this.bodyTable) {
|
||||
const currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX;
|
||||
if (!this.props.scroll.x && currentOverflowX === 'scroll') {
|
||||
this.bodyTable.style.overflowX = 'hidden';
|
||||
}
|
||||
if (this.props.scroll.x && currentOverflowX !== 'scroll') {
|
||||
// 此处应该对比一下实际的
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
this.bodyTable.style.overflowX = 'scroll';
|
||||
} else {
|
||||
this.bodyTable.style.overflowX = 'hidden';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.bodyTableOuter) { // 隐藏几个不需要真正滚动的父元素的滚动条
|
||||
this.bodyTableOuter.style.overflowY = 'hidden'
|
||||
}
|
||||
if (this.fixedColumnsBodyLeftOuter) {
|
||||
this.fixedColumnsBodyLeftOuter.style.overflowY = 'hidden'
|
||||
}
|
||||
if (this.fixedColumnsBodyRightOuter) {
|
||||
this.fixedColumnsBodyRightOuter.style.overflowY = 'hidden'
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
|
@ -746,7 +782,7 @@ class Table extends Component {
|
|||
const expandIconColumnIndex = props.expandIconColumnIndex
|
||||
if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow onPaste={onPaste} height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
|
||||
<TableRow onPaste={onPaste} isPre height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
|
||||
)
|
||||
}
|
||||
const lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0;
|
||||
|
|
@ -757,7 +793,7 @@ class Table extends Component {
|
|||
const record = data[i];
|
||||
const key = this.getRowKey(record, i);
|
||||
// 兼容 NCC 以前的业务逻辑，支持外部通过 record 中的 isleaf 字段，判断是否为叶子节点
|
||||
record['_isLeaf'] = typeof record['isleaf'] === 'boolean' ? record['isleaf'] : record['_isLeaf'];
|
||||
typeof record['isleaf'] === 'boolean' && (record['_isLeaf'] = record['isleaf']);
|
||||
// _isLeaf 字段是在 bigData 里添加的，只有层级树大数据场景需要该字段
|
||||
// _isLeaf 有三种取值情况：true / false / null。（Table内部字段）
|
||||
const _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
|
||||
|
|
@ -889,7 +925,7 @@ class Table extends Component {
|
|||
|
||||
if(props.lazyLoad && props.lazyLoad.sufHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow onPaste={onPaste} height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
<TableRow onPaste={onPaste} isSuf height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
)
|
||||
}
|
||||
if (!this.isTreeType) {
|
||||
|
|
@ -995,7 +1031,7 @@ class Table extends Component {
|
|||
if(this.props.data.length == 0 && this.props.headerScroll ){
|
||||
bodyStyle.overflowX = 'hidden';
|
||||
}
|
||||
if (!footerScroll) {
|
||||
if (!footerScroll && this.computeWidth > this.contentDomWidth) {
|
||||
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
|
||||
}
|
||||
}
|
||||
|
|
@ -1007,6 +1043,11 @@ class Table extends Component {
|
|||
// bodyStyle.height = bodyStyle.height || scroll.y;
|
||||
innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
innerBodyStyle.overflowX = 'scroll';
|
||||
} else {
|
||||
innerBodyStyle.overflowX = 'hidden';
|
||||
}
|
||||
} else {
|
||||
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
}
|
||||
|
|
@ -1040,7 +1081,9 @@ class Table extends Component {
|
|||
headStyle.overflow = 'hidden';
|
||||
innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
|
||||
}else{
|
||||
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
}else{
|
||||
|
|
@ -1093,7 +1136,6 @@ class Table extends Component {
|
|||
};
|
||||
|
||||
let headTable;
|
||||
|
||||
if (useFixedHeader) {
|
||||
headTable = (
|
||||
<div
|
||||
|
|
@ -1112,14 +1154,15 @@ class Table extends Component {
|
|||
<div
|
||||
className={`${clsPrefix}-body`}
|
||||
style={bodyStyle}
|
||||
ref={(el)=>{this.bodyTable = el}}
|
||||
onMouseOver={this.detectScrollTarget}
|
||||
onTouchStart={this.detectScrollTarget}
|
||||
onScroll={this.handleBodyScroll}
|
||||
ref={(el)=>{this.bodyTableOuter = el}}
|
||||
onMouseLeave={this.onBodyMouseLeave}
|
||||
>
|
||||
{this.renderDragHideTable()}
|
||||
{renderTable(!useFixedHeader)}
|
||||
<div className="scroll-container" onScroll={this.handleBodyScroll} ref={(el)=>{this.bodyTable = el}} style={{...bodyStyle}}>
|
||||
{renderTable(!useFixedHeader)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -1140,13 +1183,13 @@ class Table extends Component {
|
|||
<div
|
||||
style={{...innerBodyStyle}}
|
||||
className={`${clsPrefix}-body-inner`}
|
||||
ref={refName}
|
||||
ref={el => this[`${refName}Outer`] = el}
|
||||
onMouseOver={this.detectScrollTarget}
|
||||
onTouchStart={this.detectScrollTarget}
|
||||
onScroll={this.handleBodyScroll}
|
||||
>
|
||||
{renderTable(!useFixedHeader)}
|
||||
{/* <div className="scroll-dom" style={{height:`${this.scrollbarWidth}px`}}></div> */}
|
||||
<div className="fixed-scroll-container" ref={refName} style={{...innerBodyStyle}} onScroll={this.handleBodyScroll}>
|
||||
{renderTable(!useFixedHeader)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1218,6 +1261,22 @@ class Table extends Component {
|
|||
|
||||
}
|
||||
|
||||
getFlatRecords = data => {
|
||||
var result = []
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
result.push(data[i])
|
||||
if ((data[i].children || []).length) {
|
||||
result = result.concat(this.getFlatRecords(data[i].children))
|
||||
}
|
||||
}
|
||||
return result
|
||||
};
|
||||
|
||||
manualSyncFixedTableRowHeight() {
|
||||
this.dataChanged = true
|
||||
this.syncFixedTableRowHeight()
|
||||
}
|
||||
|
||||
syncFixedTableRowHeight() {
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow } = this.props;
|
||||
|
|
@ -1226,8 +1285,9 @@ class Table extends Component {
|
|||
this.bodyTable.querySelectorAll('thead');
|
||||
const expandedRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-expanded-row`) || [];
|
||||
const bodyRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const rightBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
this.dataChanged = false
|
||||
const fixedColumnsHeadRowsHeight = [].map.call(
|
||||
headRows, row =>{
|
||||
let height = headerHeight;
|
||||
|
|
@ -1236,12 +1296,20 @@ class Table extends Component {
|
|||
}
|
||||
return headerHeight ? height : (parseInt(row.getBoundingClientRect().height) || 'auto')}
|
||||
);
|
||||
const flatRecords = this.getFlatRecords(this.props.data || [])
|
||||
const fixedColumnsBodyRowsHeight = [].map.call(
|
||||
bodyRows, (row,index) =>{
|
||||
let rsHeight = height;
|
||||
if(bodyDisplayInRow && rsHeight){
|
||||
return rsHeight;
|
||||
}else{
|
||||
const rowKey = row.getAttribute('data-row-key')
|
||||
const record = flatRecords.find(record => record.key === rowKey) || {}
|
||||
const leafKey = 'isleaf' in record ? 'isleaf' : '_isLeaf' in record ? '_isLeaf' : null // ncc传递这俩属性区分是否是子节点
|
||||
const isLeaf = leafKey && record[leafKey] === true
|
||||
if (isLeaf) {
|
||||
return Number((Number(row.getBoundingClientRect().height)).toFixed(2)) || 'auto';
|
||||
}
|
||||
// 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
|
||||
// 内容折行显示，并又设置了 height 的情况下，也要获取主表高度
|
||||
if(heightConsistent || (!bodyDisplayInRow && rsHeight)){
|
||||
|
|
|
|||
|
|
@ -1139,3 +1139,32 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loading-td {
|
||||
position: relative !important;
|
||||
width: 1000px !important;
|
||||
height: 500px !important;
|
||||
display: block !important;
|
||||
}
|
||||
.loading-div {
|
||||
position: absolute;
|
||||
margin: 80px 0 0 0;
|
||||
animation-fill-mode: both;
|
||||
border: none !important;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 0;
|
||||
&.pre {
|
||||
bottom: 0;
|
||||
}
|
||||
&.suf {
|
||||
top: 0;
|
||||
}
|
||||
left: 30%;
|
||||
background: transparent !important;
|
||||
display: inline-block;
|
||||
animation: rotate1 1s 0s linear infinite !important;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
|
@ -171,8 +171,10 @@ class TableHeader extends Component {
|
|||
|
||||
|
||||
doEventList(trs,action){
|
||||
for (let index = 0; index < trs.length; index++) {
|
||||
action(trs[index]);
|
||||
if (trs && HTMLCollection.prototype.isPrototypeOf(trs) && action) {
|
||||
for (let index = 0; index < trs.length; index++) {
|
||||
action(trs[index]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -469,12 +469,13 @@ class TableRow extends Component{
|
|||
|
||||
render() {
|
||||
const {
|
||||
clsPrefix, columns, record, height, visible, index,onPaste,
|
||||
clsPrefix, columns, record, height, visible, index,onPaste, isPre, isSuf,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, useDragHandle,rowDraggAble,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
|
||||
,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth, getCellClassName
|
||||
} = this.props;
|
||||
const {notRowDrag} = this.state;
|
||||
const isEmptyTr = isPre || isSuf
|
||||
let showSum = false;
|
||||
let { className } = this.props;
|
||||
if (this.state.hovered) {
|
||||
|
|
@ -555,7 +556,6 @@ class TableRow extends Component{
|
|||
if(rowDraggAble && !useDragHandle && !notRowDrag) {
|
||||
className += ' row-dragg-able'
|
||||
}
|
||||
|
||||
return (
|
||||
<tr
|
||||
draggable={rowDraggAble && !useDragHandle && !notRowDrag}
|
||||
|
|
@ -570,7 +570,15 @@ class TableRow extends Component{
|
|||
// key={hoverKey}
|
||||
ref={this.bindElement}
|
||||
>
|
||||
{cells.length>0?cells:<td style={{width:0,padding:0}}></td>}
|
||||
{cells.length > 0 ? cells : isEmptyTr ?
|
||||
<td className="loading-td">
|
||||
<div className={`loading-div ${ isPre ? 'pre' : 'suf' }`}>
|
||||
<img
|
||||
alt=''
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDJweCIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSIwIDAgNDIgNDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUzLjIgKDcyNjQzKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT53aW5kb3U8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjQ5Ljc3NzAwMDElIiB5MT0iOTkuOTg4NjY2NyUiIHgyPSI0OS43NzcwMDAxJSIgeTI9IjIyLjc5MTY5ODQlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiM4MkQ5MDAiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iMC4wNzY1JSIgeTE9IjQ5LjgwNDUlIiB4Mj0iODQuMDAyMTY0NCUiIHkyPSI0OS44MDQ1JSIgaWQ9ImxpbmVhckdyYWRpZW50LTIiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZCRTBFIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwLjIyOTUwMDElIiB5MT0iLTAuMDgwOTk5OTQyOSUiIHgyPSI1MC4yMjk1MDAxJSIgeTI9IjgwLjA2MTg4MjglIiBpZD0ibGluZWFyR3JhZGllbnQtMyI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjQ3NDciIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iOTkuOTI1NjY2NyUiIHkxPSI0OS45MTglIiB4Mj0iMjQuMjY5MjQwMyUiIHkyPSI0OS45MTglIiBpZD0ibGluZWFyR3JhZGllbnQtNCI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMDhDREMiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLop4blm74vbG9hZGluZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDAwMDAwLCAtMy4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IndpbmRvdSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4wMDAwMDAsIDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i5YiG57uELTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjAwMDAwMCwgMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTEpIiBvcGFjaXR5PSIwLjQ5OTM3MjIxIiB4PSIwLjQwOTA5MDkwOSIgeT0iMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjM0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iIzAwQzg2NCIgY3g9IjYuNDA5MDkwOTEiIGN5PSIzNC4yNjY3MDkxIiByPSI2Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSLliIbnu4QtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC40NTE3MjksIDI4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMikiIG9wYWNpdHk9IjAuNTA5MDIxNTc3IiB4PSI2LjI2MjM1NTk1IiB5PSIzLjU1MjcxMzY4ZS0xNSIgd2lkdGg9IjM0IiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iI0ZGQkUwRSIgY3g9IjYuNTAyODE2OSIgY3k9IjYiIHI9IjYiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9IuWIhue7hCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0zKSIgb3BhY2l0eT0iMC41MDEyMzIzMjkiIHg9Ii0yLjY1NTY1MzQ3ZS0xMyIgeT0iNS43ODgyMTI4MSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjM0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iI0ZGNDc0NyIgY3g9IjYiIGN5PSI2IiByPSI2Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC45NTQ1NDUsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC00KSIgb3BhY2l0eT0iMC41MDQxODUyNjgiIHg9IjAiIHk9IjAiIHdpZHRoPSIzNiIgaGVpZ2h0PSIxMS45NDI2NTY5Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iIzAwOENEQyIgY3g9IjM1IiBjeT0iNiIgcj0iNiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" />
|
||||
</div>
|
||||
</td> : <td style={{width: 0,padding: 0}}>
|
||||
</td>}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -573,6 +573,7 @@ export default function bigData(Table) {
|
|||
{...this.props}
|
||||
data={dataSource}
|
||||
lazyLoad={lazyLoad}
|
||||
ref={el => this.table = el}
|
||||
handleScrollY={this.handleScrollY}
|
||||
scrollTop={scrollTop}
|
||||
setRowHeight={this.setRowHeight}
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@ export default function sort(Table, Icon) {
|
|||
let { data, oldData = [], flatColumns } = this.state;
|
||||
let { sort } = this.props;
|
||||
let seleObj;
|
||||
if (!oldData) {
|
||||
if (!oldData.length) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
let sortCol ;
|
||||
|
|
|
|||
Loading…
Reference in New Issue