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

fix: footer 返回含有固定列Table时,拖拽主表格高度不同步

This commit is contained in:
izbz wh 2020-09-07 13:48:01 +08:00
parent 4b551c777e
commit 7147516dd3
4 changed files with 143 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build/Table.js
View File

@ -163,7 +163,7 @@ var defaultProps = {
minColumnWidth: 80, minColumnWidth: 80,
locale: {}, locale: {},
syncHover: true, syncHover: true,
setRowHeight: function setRowHeight() {}, // setRowHeight:()=>{},
setRowParentIndex: function setRowParentIndex() {}, setRowParentIndex: function setRowParentIndex() {},
tabIndex: '0', tabIndex: '0',
heightConsistent: false, heightConsistent: false,
@ -637,7 +637,8 @@ var Table = function (_Component) {
headerScroll = _props2.headerScroll, headerScroll = _props2.headerScroll,
bordered = _props2.bordered, bordered = _props2.bordered,
onDropBorder = _props2.onDropBorder, onDropBorder = _props2.onDropBorder,
onDraggingBorder = _props2.onDraggingBorder; onDraggingBorder = _props2.onDraggingBorder,
bodyDisplayInRow = _props2.bodyDisplayInRow;
this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空 this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
var rows = this.getHeaderRows(columns); var rows = this.getHeaderRows(columns);
@ -684,7 +685,8 @@ var Table = function (_Component) {
headerScroll: headerScroll, headerScroll: headerScroll,
bordered: bordered, bordered: bordered,
leftFixedWidth: leftFixedWidth, leftFixedWidth: leftFixedWidth,
rightFixedWidth: rightFixedWidth rightFixedWidth: rightFixedWidth,
bodyDisplayInRow: bodyDisplayInRow
})) : null; })) : null;
}; };

44
build/TableHeader.js
View File

@ -144,14 +144,27 @@ var TableHeader = function (_Component) {
table.tr = tableDome.getElementsByTagName("tr"); table.tr = tableDome.getElementsByTagName("tr");
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body'); 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.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') || [];
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header'); table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header'); table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header'); table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer'); table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer');
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer'); if (table.fixedLeftBodyTable) {
table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table'); var leftBodyTableIndex = table.fixedLeftBodyTable.length - 1 < 0 ? 0 : table.fixedLeftBodyTable.length - 1;
table.fixedLeftBodyTable = table.fixedLeftBodyTable[leftBodyTableIndex];
}
table.fixedRightBodyTable = contentTable.querySelectorAll('.u-table-fixed-right .u-table-body-outer');
if (table.fixedRightBodyTable) {
var rightBodyTableIndex = table.fixedRightBodyTable.length - 1 < 0 ? 0 : table.fixedRightBodyTable.length - 1;
table.fixedRightBodyTable = table.fixedRightBodyTable[rightBodyTableIndex];
}
table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
}
this.table = table; this.table = table;
@ -654,7 +667,8 @@ var _initialiseProps = function _initialiseProps() {
lastShowIndex = _props4.lastShowIndex, lastShowIndex = _props4.lastShowIndex,
onDraggingBorder = _props4.onDraggingBorder, onDraggingBorder = _props4.onDraggingBorder,
leftFixedWidth = _props4.leftFixedWidth, leftFixedWidth = _props4.leftFixedWidth,
rightFixedWidth = _props4.rightFixedWidth; rightFixedWidth = _props4.rightFixedWidth,
bodyDisplayInRow = _props4.bodyDisplayInRow;
_utils.Event.stopPropagation(e); _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e); var event = _utils.Event.getEvent(e);
@ -666,6 +680,20 @@ var _initialiseProps = function _initialiseProps() {
_this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth; _this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth;
if (newWidth > _this8.minWidth) { if (newWidth > _this8.minWidth) {
currentCols.style.width = newWidth + 'px'; 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];
if (leftRow || rightRow) {
var height = row.getBoundingClientRect().height;
leftRow && (leftRow.style.height = height + "px");
rightRow && (rightRow.style.height = height + "px");
}
});
}
//hao 支持固定表头拖拽 修改表体的width //hao 支持固定表头拖拽 修改表体的width
if (_this8.fixedTable.cols) { if (_this8.fixedTable.cols) {
_this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px"; _this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px";

159
build/TableRow.js
View File

@ -59,7 +59,8 @@ var propTypes = {
store: _propTypes2["default"].object.isRequired, store: _propTypes2["default"].object.isRequired,
rowDraggAble: _propTypes2["default"].bool, rowDraggAble: _propTypes2["default"].bool,
onDragRow: _propTypes2["default"].func, onDragRow: _propTypes2["default"].func,
onDragRowStart: _propTypes2["default"].func onDragRowStart: _propTypes2["default"].func,
syncRowHeight: _propTypes2["default"].bool
}; };
var defaultProps = { var defaultProps = {
@ -74,8 +75,9 @@ var defaultProps = {
className: '', className: '',
setRowParentIndex: function setRowParentIndex() {}, setRowParentIndex: function setRowParentIndex() {},
rowDraggAble: false rowDraggAble: false,
// onDragRow:()=>{} // onDragRow:()=>{}
syncRowHeight: false
}; };
var TableRow = function (_Component) { var TableRow = function (_Component) {
@ -423,7 +425,9 @@ var TableRow = function (_Component) {
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) { TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
var rowDraggAble = this.props.rowDraggAble; var _props2 = this.props,
rowDraggAble = _props2.rowDraggAble,
syncRowHeight = _props2.syncRowHeight;
if (!this.event) { if (!this.event) {
this.event = true; this.event = true;
@ -431,19 +435,20 @@ var TableRow = function (_Component) {
this.initEvent(); this.initEvent();
} }
} }
if (this.props.treeType) { if (this.props.treeType) {
this.setRowParentIndex(); this.setRowParentIndex();
} }
this.setRowHeight(); if (syncRowHeight) {
this.setRowHeight();
}
}; };
TableRow.prototype.componentWillUnmount = function componentWillUnmount() { TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
var _props2 = this.props, var _props3 = this.props,
record = _props2.record, record = _props3.record,
onDestroy = _props2.onDestroy, onDestroy = _props3.onDestroy,
index = _props2.index, index = _props3.index,
rowDraggAble = _props2.rowDraggAble; rowDraggAble = _props3.rowDraggAble;
onDestroy(record, index); onDestroy(record, index);
if (this.unsubscribe) { if (this.unsubscribe) {
@ -455,23 +460,23 @@ var TableRow = function (_Component) {
}; };
TableRow.prototype.setRowHeight = function setRowHeight() { TableRow.prototype.setRowHeight = function setRowHeight() {
var _props3 = this.props, var _props4 = this.props,
setRowHeight = _props3.setRowHeight, setRowHeight = _props4.setRowHeight,
_props3$expandedConte = _props3.expandedContentHeight, _props4$expandedConte = _props4.expandedContentHeight,
expandedContentHeight = _props3$expandedConte === undefined ? 0 : _props3$expandedConte, expandedContentHeight = _props4$expandedConte === undefined ? 0 : _props4$expandedConte,
fixed = _props3.fixed, fixed = _props4.fixed,
fixedIndex = _props3.fixedIndex; fixedIndex = _props4.fixedIndex;
if (!setRowHeight || !this.element || fixed) return; if (!setRowHeight || !this.element || fixed) return;
setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex); setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex);
}; };
TableRow.prototype.setRowParentIndex = function setRowParentIndex() { TableRow.prototype.setRowParentIndex = function setRowParentIndex() {
var _props4 = this.props, var _props5 = this.props,
index = _props4.index, index = _props5.index,
setRowParentIndex = _props4.setRowParentIndex, setRowParentIndex = _props5.setRowParentIndex,
fixedIndex = _props4.fixedIndex, fixedIndex = _props5.fixedIndex,
rootIndex = _props4.rootIndex; rootIndex = _props5.rootIndex;
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex); setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
}; };
@ -481,16 +486,16 @@ var TableRow = function (_Component) {
// 异步访问事件属性 // 异步访问事件属性
// 调用 event.persist() 会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。 // 调用 event.persist() 会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。
event.persist(); event.persist();
var _props5 = this.props, var _props6 = this.props,
record = _props5.record, record = _props6.record,
index = _props5.index, index = _props6.index,
onRowClick = _props5.onRowClick, onRowClick = _props6.onRowClick,
expandable = _props5.expandable, expandable = _props6.expandable,
expandRowByClick = _props5.expandRowByClick, expandRowByClick = _props6.expandRowByClick,
expanded = _props5.expanded, expanded = _props6.expanded,
onExpand = _props5.onExpand, onExpand = _props6.onExpand,
fixedIndex = _props5.fixedIndex, fixedIndex = _props6.fixedIndex,
onRowDoubleClick = _props5.onRowDoubleClick; onRowDoubleClick = _props6.onRowDoubleClick;
if (expandable && expandRowByClick) { if (expandable && expandRowByClick) {
onExpand(!expanded, record, fixedIndex, event); onExpand(!expanded, record, fixedIndex, event);
@ -505,31 +510,17 @@ var TableRow = function (_Component) {
}; };
TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) { TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
var _props6 = this.props, var _props7 = this.props,
record = _props6.record, record = _props7.record,
index = _props6.index, index = _props7.index,
onRowDoubleClick = _props6.onRowDoubleClick, onRowDoubleClick = _props7.onRowDoubleClick,
fixedIndex = _props6.fixedIndex; fixedIndex = _props7.fixedIndex;
this.clear(); this.clear();
onRowDoubleClick && onRowDoubleClick(record, fixedIndex, event); onRowDoubleClick && onRowDoubleClick(record, fixedIndex, event);
}; };
TableRow.prototype.onMouseEnter = function onMouseEnter(e) { TableRow.prototype.onMouseEnter = function onMouseEnter(e) {
var _props7 = this.props,
onHover = _props7.onHover,
hoverKey = _props7.hoverKey,
fixedIndex = _props7.fixedIndex,
syncHover = _props7.syncHover,
record = _props7.record;
if (syncHover) {
this.setState({ hovered: true });
}
onHover(true, hoverKey, e, fixedIndex, record);
};
TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
var _props8 = this.props, var _props8 = this.props,
onHover = _props8.onHover, onHover = _props8.onHover,
hoverKey = _props8.hoverKey, hoverKey = _props8.hoverKey,
@ -537,6 +528,20 @@ var TableRow = function (_Component) {
syncHover = _props8.syncHover, syncHover = _props8.syncHover,
record = _props8.record; record = _props8.record;
if (syncHover) {
this.setState({ hovered: true });
}
onHover(true, hoverKey, e, fixedIndex, record);
};
TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
var _props9 = this.props,
onHover = _props9.onHover,
hoverKey = _props9.hoverKey,
fixedIndex = _props9.fixedIndex,
syncHover = _props9.syncHover,
record = _props9.record;
if (syncHover) { if (syncHover) {
this.setState({ hovered: false }); this.setState({ hovered: false });
} }
@ -544,33 +549,33 @@ var TableRow = function (_Component) {
}; };
TableRow.prototype.render = function render() { TableRow.prototype.render = function render() {
var _props9 = this.props, var _props10 = this.props,
clsPrefix = _props9.clsPrefix, clsPrefix = _props10.clsPrefix,
columns = _props9.columns, columns = _props10.columns,
record = _props9.record, record = _props10.record,
height = _props9.height, height = _props10.height,
visible = _props9.visible, visible = _props10.visible,
index = _props9.index, index = _props10.index,
onPaste = _props9.onPaste, onPaste = _props10.onPaste,
expandIconColumnIndex = _props9.expandIconColumnIndex, expandIconColumnIndex = _props10.expandIconColumnIndex,
expandIconAsCell = _props9.expandIconAsCell, expandIconAsCell = _props10.expandIconAsCell,
expanded = _props9.expanded, expanded = _props10.expanded,
useDragHandle = _props9.useDragHandle, useDragHandle = _props10.useDragHandle,
rowDraggAble = _props9.rowDraggAble, rowDraggAble = _props10.rowDraggAble,
expandable = _props9.expandable, expandable = _props10.expandable,
onExpand = _props9.onExpand, onExpand = _props10.onExpand,
needIndentSpaced = _props9.needIndentSpaced, needIndentSpaced = _props10.needIndentSpaced,
indent = _props9.indent, indent = _props10.indent,
indentSize = _props9.indentSize, indentSize = _props10.indentSize,
isHiddenExpandIcon = _props9.isHiddenExpandIcon, isHiddenExpandIcon = _props10.isHiddenExpandIcon,
fixed = _props9.fixed, fixed = _props10.fixed,
bodyDisplayInRow = _props9.bodyDisplayInRow, bodyDisplayInRow = _props10.bodyDisplayInRow,
expandedIcon = _props9.expandedIcon, expandedIcon = _props10.expandedIcon,
collapsedIcon = _props9.collapsedIcon, collapsedIcon = _props10.collapsedIcon,
hoverKey = _props9.hoverKey, hoverKey = _props10.hoverKey,
lazyStartIndex = _props9.lazyStartIndex, lazyStartIndex = _props10.lazyStartIndex,
lazyEndIndex = _props9.lazyEndIndex, lazyEndIndex = _props10.lazyEndIndex,
expandIconCellWidth = _props9.expandIconCellWidth; expandIconCellWidth = _props10.expandIconCellWidth;
var showSum = false; var showSum = false;
var className = this.props.className; var className = this.props.className;

28
src/TableHeader.js
View File

@ -103,16 +103,28 @@ class TableHeader extends Component {
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body'); 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.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') || []; table.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer') ;
if (table.fixedLeftBodyTable) {
const leftBodyTableIndex = table.fixedLeftBodyTable.length-1 < 0 ? 0 : table.fixedLeftBodyTable.length-1
table.fixedLeftBodyTable = table.fixedLeftBodyTable[leftBodyTableIndex]
}
table.fixedRightBodyTable = contentTable.querySelectorAll('.u-table-fixed-right .u-table-body-outer') ;
if (table.fixedRightBodyTable) {
const rightBodyTableIndex = table.fixedRightBodyTable.length-1 < 0 ? 0 : table.fixedRightBodyTable.length-1
table.fixedRightBodyTable = table.fixedRightBodyTable[rightBodyTableIndex]
}
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
} }
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ;
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
this.table = table; this.table = table;
if(!this.props.dragborder)return; if(!this.props.dragborder)return;