From 7147516dd3ef5687fa28234f071a1e1dbabcdc35 Mon Sep 17 00:00:00 2001 From: izbz wh <731215820@qq.com> Date: Mon, 7 Sep 2020 13:48:01 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20footer=20=E8=BF=94=E5=9B=9E=E5=90=AB?= =?UTF-8?q?=E6=9C=89=E5=9B=BA=E5=AE=9A=E5=88=97Table=E6=97=B6,=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E4=B8=BB=E8=A1=A8=E6=A0=BC=E9=AB=98=E5=BA=A6=E4=B8=8D?= =?UTF-8?q?=E5=90=8C=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/Table.js | 8 ++- build/TableHeader.js | 44 +++++++++--- build/TableRow.js | 159 ++++++++++++++++++++++--------------------- src/TableHeader.js | 28 +++++--- 4 files changed, 143 insertions(+), 96 deletions(-) diff --git a/build/Table.js b/build/Table.js index 7f6f318..709e605 100644 --- a/build/Table.js +++ b/build/Table.js @@ -163,7 +163,7 @@ var defaultProps = { minColumnWidth: 80, locale: {}, syncHover: true, - setRowHeight: function setRowHeight() {}, + // setRowHeight:()=>{}, setRowParentIndex: function setRowParentIndex() {}, tabIndex: '0', heightConsistent: false, @@ -637,7 +637,8 @@ var Table = function (_Component) { headerScroll = _props2.headerScroll, bordered = _props2.bordered, onDropBorder = _props2.onDropBorder, - onDraggingBorder = _props2.onDraggingBorder; + onDraggingBorder = _props2.onDraggingBorder, + bodyDisplayInRow = _props2.bodyDisplayInRow; this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空 var rows = this.getHeaderRows(columns); @@ -684,7 +685,8 @@ var Table = function (_Component) { headerScroll: headerScroll, bordered: bordered, leftFixedWidth: leftFixedWidth, - rightFixedWidth: rightFixedWidth + rightFixedWidth: rightFixedWidth, + bodyDisplayInRow: bodyDisplayInRow })) : null; }; diff --git a/build/TableHeader.js b/build/TableHeader.js index 7274b91..73f49b4 100644 --- a/build/TableHeader.js +++ b/build/TableHeader.js @@ -144,14 +144,27 @@ var TableHeader = function (_Component) { table.tr = tableDome.getElementsByTagName("tr"); 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') || []; - 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.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) { + 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; @@ -654,7 +667,8 @@ var _initialiseProps = function _initialiseProps() { lastShowIndex = _props4.lastShowIndex, onDraggingBorder = _props4.onDraggingBorder, leftFixedWidth = _props4.leftFixedWidth, - rightFixedWidth = _props4.rightFixedWidth; + rightFixedWidth = _props4.rightFixedWidth, + bodyDisplayInRow = _props4.bodyDisplayInRow; _utils.Event.stopPropagation(e); var event = _utils.Event.getEvent(e); @@ -666,6 +680,20 @@ var _initialiseProps = function _initialiseProps() { _this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth; if (newWidth > _this8.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]; + if (leftRow || rightRow) { + var height = row.getBoundingClientRect().height; + leftRow && (leftRow.style.height = height + "px"); + rightRow && (rightRow.style.height = height + "px"); + } + }); + } + //hao 支持固定表头拖拽 修改表体的width if (_this8.fixedTable.cols) { _this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px"; diff --git a/build/TableRow.js b/build/TableRow.js index 8301d24..26281f1 100644 --- a/build/TableRow.js +++ b/build/TableRow.js @@ -59,7 +59,8 @@ var propTypes = { store: _propTypes2["default"].object.isRequired, rowDraggAble: _propTypes2["default"].bool, onDragRow: _propTypes2["default"].func, - onDragRowStart: _propTypes2["default"].func + onDragRowStart: _propTypes2["default"].func, + syncRowHeight: _propTypes2["default"].bool }; var defaultProps = { @@ -74,8 +75,9 @@ var defaultProps = { className: '', setRowParentIndex: function setRowParentIndex() {}, - rowDraggAble: false + rowDraggAble: false, // onDragRow:()=>{} + syncRowHeight: false }; var TableRow = function (_Component) { @@ -423,7 +425,9 @@ var TableRow = function (_Component) { TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) { - var rowDraggAble = this.props.rowDraggAble; + var _props2 = this.props, + rowDraggAble = _props2.rowDraggAble, + syncRowHeight = _props2.syncRowHeight; if (!this.event) { this.event = true; @@ -431,19 +435,20 @@ var TableRow = function (_Component) { this.initEvent(); } } - if (this.props.treeType) { this.setRowParentIndex(); } - this.setRowHeight(); + if (syncRowHeight) { + this.setRowHeight(); + } }; TableRow.prototype.componentWillUnmount = function componentWillUnmount() { - var _props2 = this.props, - record = _props2.record, - onDestroy = _props2.onDestroy, - index = _props2.index, - rowDraggAble = _props2.rowDraggAble; + var _props3 = this.props, + record = _props3.record, + onDestroy = _props3.onDestroy, + index = _props3.index, + rowDraggAble = _props3.rowDraggAble; onDestroy(record, index); if (this.unsubscribe) { @@ -455,23 +460,23 @@ var TableRow = function (_Component) { }; TableRow.prototype.setRowHeight = function setRowHeight() { - var _props3 = this.props, - setRowHeight = _props3.setRowHeight, - _props3$expandedConte = _props3.expandedContentHeight, - expandedContentHeight = _props3$expandedConte === undefined ? 0 : _props3$expandedConte, - fixed = _props3.fixed, - fixedIndex = _props3.fixedIndex; + var _props4 = this.props, + setRowHeight = _props4.setRowHeight, + _props4$expandedConte = _props4.expandedContentHeight, + expandedContentHeight = _props4$expandedConte === undefined ? 0 : _props4$expandedConte, + fixed = _props4.fixed, + fixedIndex = _props4.fixedIndex; if (!setRowHeight || !this.element || fixed) return; setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex); }; TableRow.prototype.setRowParentIndex = function setRowParentIndex() { - var _props4 = this.props, - index = _props4.index, - setRowParentIndex = _props4.setRowParentIndex, - fixedIndex = _props4.fixedIndex, - rootIndex = _props4.rootIndex; + var _props5 = this.props, + index = _props5.index, + setRowParentIndex = _props5.setRowParentIndex, + fixedIndex = _props5.fixedIndex, + rootIndex = _props5.rootIndex; setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex); }; @@ -481,16 +486,16 @@ var TableRow = function (_Component) { // 异步访问事件属性 // 调用 event.persist() 会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。 event.persist(); - var _props5 = this.props, - record = _props5.record, - index = _props5.index, - onRowClick = _props5.onRowClick, - expandable = _props5.expandable, - expandRowByClick = _props5.expandRowByClick, - expanded = _props5.expanded, - onExpand = _props5.onExpand, - fixedIndex = _props5.fixedIndex, - onRowDoubleClick = _props5.onRowDoubleClick; + var _props6 = this.props, + record = _props6.record, + index = _props6.index, + onRowClick = _props6.onRowClick, + expandable = _props6.expandable, + expandRowByClick = _props6.expandRowByClick, + expanded = _props6.expanded, + onExpand = _props6.onExpand, + fixedIndex = _props6.fixedIndex, + onRowDoubleClick = _props6.onRowDoubleClick; if (expandable && expandRowByClick) { onExpand(!expanded, record, fixedIndex, event); @@ -505,31 +510,17 @@ var TableRow = function (_Component) { }; TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) { - var _props6 = this.props, - record = _props6.record, - index = _props6.index, - onRowDoubleClick = _props6.onRowDoubleClick, - fixedIndex = _props6.fixedIndex; + var _props7 = this.props, + record = _props7.record, + index = _props7.index, + onRowDoubleClick = _props7.onRowDoubleClick, + fixedIndex = _props7.fixedIndex; this.clear(); onRowDoubleClick && onRowDoubleClick(record, fixedIndex, event); }; 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, onHover = _props8.onHover, hoverKey = _props8.hoverKey, @@ -537,6 +528,20 @@ var TableRow = function (_Component) { syncHover = _props8.syncHover, 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) { this.setState({ hovered: false }); } @@ -544,33 +549,33 @@ var TableRow = function (_Component) { }; TableRow.prototype.render = function render() { - var _props9 = this.props, - clsPrefix = _props9.clsPrefix, - columns = _props9.columns, - record = _props9.record, - height = _props9.height, - visible = _props9.visible, - index = _props9.index, - onPaste = _props9.onPaste, - expandIconColumnIndex = _props9.expandIconColumnIndex, - expandIconAsCell = _props9.expandIconAsCell, - expanded = _props9.expanded, - useDragHandle = _props9.useDragHandle, - rowDraggAble = _props9.rowDraggAble, - expandable = _props9.expandable, - onExpand = _props9.onExpand, - needIndentSpaced = _props9.needIndentSpaced, - indent = _props9.indent, - indentSize = _props9.indentSize, - isHiddenExpandIcon = _props9.isHiddenExpandIcon, - fixed = _props9.fixed, - bodyDisplayInRow = _props9.bodyDisplayInRow, - expandedIcon = _props9.expandedIcon, - collapsedIcon = _props9.collapsedIcon, - hoverKey = _props9.hoverKey, - lazyStartIndex = _props9.lazyStartIndex, - lazyEndIndex = _props9.lazyEndIndex, - expandIconCellWidth = _props9.expandIconCellWidth; + var _props10 = this.props, + clsPrefix = _props10.clsPrefix, + columns = _props10.columns, + record = _props10.record, + height = _props10.height, + visible = _props10.visible, + index = _props10.index, + onPaste = _props10.onPaste, + expandIconColumnIndex = _props10.expandIconColumnIndex, + expandIconAsCell = _props10.expandIconAsCell, + expanded = _props10.expanded, + useDragHandle = _props10.useDragHandle, + rowDraggAble = _props10.rowDraggAble, + expandable = _props10.expandable, + onExpand = _props10.onExpand, + needIndentSpaced = _props10.needIndentSpaced, + indent = _props10.indent, + indentSize = _props10.indentSize, + isHiddenExpandIcon = _props10.isHiddenExpandIcon, + fixed = _props10.fixed, + bodyDisplayInRow = _props10.bodyDisplayInRow, + expandedIcon = _props10.expandedIcon, + collapsedIcon = _props10.collapsedIcon, + hoverKey = _props10.hoverKey, + lazyStartIndex = _props10.lazyStartIndex, + lazyEndIndex = _props10.lazyEndIndex, + expandIconCellWidth = _props10.expandIconCellWidth; var showSum = false; var className = this.props.className; diff --git a/src/TableHeader.js b/src/TableHeader.js index e126404..6af3961 100644 --- a/src/TableHeader.js +++ b/src/TableHeader.js @@ -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.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.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; if(!this.props.dragborder)return;