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

fix: 综合修改

This commit is contained in:
gx 2021-04-19 21:17:32 +08:00
parent 6524a1d9aa
commit e9f3088eb0
9 changed files with 147 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
build/Table.js
View File

@ -500,28 +500,32 @@ var Table = function (_Component) {
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) {
} else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY) {
if (prevScrollY !== currentScrollY) {
var bodyScrollTop = this.bodyTable.scrollTop;
if (bodyScrollTop === 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;
var distance = bodyScrollTop + currentScrollY - prevScrollY;
if (distance < 0) {
this.bodyTable.scrollTop = 0;
} else {
this.bodyTable.scrollTop = distance;
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;
}
}
}
} else {
this.bodyTable.scrollTop += 1;
}
}
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断

28
build/TableHeader.js
View File

@ -730,22 +730,22 @@ var _initialiseProps = function _initialiseProps() {
var diff = event.clientX - _this7.drag.oldLeft;
var newWidth = _this7.drag.oldWidth + diff;
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
// displayinrow 判断、 固定行高判断
if (!bodyDisplayInRow) {
_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");
rightRow && (rightRow.style.height = height + "px");
}
});
}
if (newWidth > _this7.minWidth) {
currentCols.style.width = newWidth + 'px';
// displayinrow 判断、 固定行高判断
if (!bodyDisplayInRow) {
_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");
rightRow && (rightRow.style.height = height + "px");
}
});
}
//hao 支持固定表头拖拽 修改表体的width
if (_this7.fixedTable.cols) {
_this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";

5
build/lib/dragColumn.js
View File

@ -126,6 +126,8 @@ function dragColumn(Table) {
});
DragColumn.prototype.render = function render() {
var _this2 = this;
var _props = this.props,
data = _props.data,
dragborder = _props.dragborder,
@ -136,6 +138,9 @@ function dragColumn(Table) {
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
ref: function ref(el) {
return _this2.table = el;
},
className: className + ' u-table-drag-border',
onDragEnd: this.onDragEnd,
draggable: draggable,

123
dist/demo.js vendored
View File

@ -48077,6 +48077,7 @@
setRowParentIndex: function setRowParentIndex() {},
tabIndex: '0',
heightConsistent: false,
syncFixedRowHeight: false,
size: 'md',
rowDraggAble: false,
hideDragHandle: false,
@ -48408,28 +48409,32 @@
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) {
} else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY) {
if (prevScrollY !== currentScrollY) {
var bodyScrollTop = this.bodyTable.scrollTop;
if (bodyScrollTop === 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;
var distance = bodyScrollTop + currentScrollY - prevScrollY;
if (distance < 0) {
this.bodyTable.scrollTop = 0;
} else {
this.bodyTable.scrollTop = distance;
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;
}
}
}
} else {
this.bodyTable.scrollTop += 1;
}
}
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
@ -49423,7 +49428,8 @@
columns = _props9.columns,
heightConsistent = _props9.heightConsistent,
bodyDisplayInRow = _props9.bodyDisplayInRow,
lazyLoad = _props9.lazyLoad;
lazyLoad = _props9.lazyLoad,
syncFixedRowHeight = _props9.syncFixedRowHeight;
var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];
@ -49455,7 +49461,7 @@
}
// 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
// 内容折行显示，并又设置了 height 的情况下，也要获取主表高度
if (heightConsistent || !bodyDisplayInRow && rsHeight) {
if (heightConsistent || !bodyDisplayInRow && rsHeight && syncFixedRowHeight) {
var leftHeight = void 0,
rightHeight = void 0,
currentHeight = void 0,
@ -50476,15 +50482,8 @@
// key={hoverKey}
, ref: this.bindElement
},
cells.length > 0 ? cells : isEmptyTr ? _react2['default'].createElement(
'td',
{ className: 'loading-td ' + (isPre ? 'pre-td' : 'suf-td'), style: { width: tdStyle.width || 1200, height: tdStyle.height || 100 } },
_react2['default'].createElement(
'div',
{ style: { left: (containerWidth || 1200) / 2 - 23 }, className: 'loading-div ' + (isPre ? 'pre' : 'suf') },
'\u52A0\u8F7D\u4E2D...'
)
) : _react2['default'].createElement('td', { style: { width: 0, padding: 0 } })
cells.length > 0 ? cells : isEmptyTr ? // loading暂时去掉
_react2['default'].createElement('td', { style: { width: 0, padding: 0 } }) : _react2['default'].createElement('td', { style: { width: 0, padding: 0 } })
);
};
@ -61978,7 +61977,7 @@
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.fixedRightHeaderTable = 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) {
@ -61993,6 +61992,10 @@
}
table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
table.fixedLeftHeaderTableBody = table.fixedLeftHeaderTable && table.fixedLeftHeaderTable.querySelector('table') || null;
table.fixedRightHeaderTableBody = table.fixedRightHeaderTable && table.fixedRightHeaderTable.querySelector('table') || null;
table.fixedLeftInnerTableBody = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelector('table') || null;
table.fixedRightInnerTableBody = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelector('table') || null;
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
}
@ -62088,9 +62091,11 @@
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) {
_this5.eventListen(events, 'remove', _this5.table.tr);
});
if (this.table && this.table.tr) {
this.doEventList(this.table.tr, function (tr) {
_this5.eventListen(events, 'remove', _this5.table.tr);
});
}
};
TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
@ -62554,22 +62559,22 @@
var diff = event.clientX - _this7.drag.oldLeft;
var newWidth = _this7.drag.oldWidth + diff;
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
// displayinrow 判断、 固定行高判断
if (!bodyDisplayInRow) {
_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");
rightRow && (rightRow.style.height = height + "px");
}
});
}
if (newWidth > _this7.minWidth) {
currentCols.style.width = newWidth + 'px';
// displayinrow 判断、 固定行高判断
if (!bodyDisplayInRow) {
_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");
rightRow && (rightRow.style.height = height + "px");
}
});
}
//hao 支持固定表头拖拽 修改表体的width
if (_this7.fixedTable.cols) {
_this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
@ -62604,12 +62609,12 @@
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
_this7.table.contentTableHeader.style.overflowX = 'scroll';
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRightHeaderTable, scrollbarWidth);
} else {
//大于 0 不显示滚动条
_this7.table.contentTableHeader.style.overflowX = 'hidden';
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
_this7.optTableMargin(_this7.table.fixedRightHeaderTable, 0);
}
} else {
var scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || [];
@ -62633,7 +62638,7 @@
}
// console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
// debugger
_this7.syncFixedBodyTableWidth(); // 同步body中table的宽度
var contentTablePar = _this7.table.contentTableHeader.parentNode;
// left、right缩小的内容，在没有滚动条时，需要将宽度同步到到最后一列
// diff<0 往里拖，
@ -62676,6 +62681,21 @@
_this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
};
this.syncFixedBodyTableWidth = function () {
var _table = _this7.table,
fixedLeftHeaderTableBody = _table.fixedLeftHeaderTableBody,
fixedLeftInnerTableBody = _table.fixedLeftInnerTableBody,
fixedRightHeaderTableBody = _table.fixedRightHeaderTableBody,
fixedRightInnerTableBody = _table.fixedRightInnerTableBody;
if (fixedLeftHeaderTableBody && fixedLeftInnerTableBody) {
fixedLeftInnerTableBody.style.width = fixedLeftHeaderTableBody.getBoundingClientRect().width + 'px';
}
if (fixedRightHeaderTableBody && fixedRightInnerTableBody) {
fixedRightInnerTableBody.style.width = fixedRightHeaderTableBody.getBoundingClientRect().width + 'px';
}
};
this.onTrMouseUp = function (e) {
var event = _utils.Event.getEvent(e);
var width = _this7.drag.newWidth;
@ -300358,6 +300378,8 @@
});
DragColumn.prototype.render = function render() {
var _this2 = this;
var _props = this.props,
data = _props.data,
dragborder = _props.dragborder,
@ -300368,6 +300390,9 @@
return _react2['default'].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
ref: function ref(el) {
return _this2.table = el;
},
className: className + ' u-table-drag-border',
onDragEnd: this.onDragEnd,
draggable: draggable,

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.3.15-beta.21",
"version": "2.3.15-beta.22",
"description": "Table ui component for react",
"keywords": [
"react",

28
src/Table.js
View File

@ -278,23 +278,27 @@ class Table extends Component {
const 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)) {
const bodyScrollTop = this.bodyTable.scrollTop
if (bodyScrollTop === 0) { // 在顶部的时候，滚动条不用动
this.bodyTable.scrollTop = 0;
} else {
const distance = bodyScrollTop + currentScrollY - prevScrollY;
if (distance < 0) {
} else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY) {
if (prevScrollY !== currentScrollY) {
const bodyScrollTop = this.bodyTable.scrollTop
if (bodyScrollTop === 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
const distance = bodyScrollTop + currentScrollY - prevScrollY;
if (distance < 0) {
this.bodyTable.scrollTop = 0;
} else {
this.bodyTable.scrollTop = distance;
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;
}
}
}
} else {
this.bodyTable.scrollTop += 1
}
}
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断

28
src/TableHeader.js
View File

@ -377,22 +377,22 @@ class TableHeader extends Component {
let diff = (event.clientX - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
// displayinrow 判断、 固定行高判断
if(!bodyDisplayInRow) {
this.table.bodyRows.forEach((row,index)=>{
const leftRow = this.table.fixedLeftBodyRows[index];
const rightRow = this.table.fixedRightBodyRows[index];
if(leftRow || rightRow) {
const height = row.getBoundingClientRect().height;
leftRow && (leftRow.style.height = height + "px")
rightRow && (rightRow.style.height = height + "px")
}
})
}
if(newWidth > this.minWidth){
currentCols.style.width = newWidth +'px';
// displayinrow 判断、 固定行高判断
if(!bodyDisplayInRow) {
this.table.bodyRows.forEach((row,index)=>{
const leftRow = this.table.fixedLeftBodyRows[index];
const rightRow = this.table.fixedRightBodyRows[index];
if(leftRow || rightRow) {
const height = row.getBoundingClientRect().height;
leftRow && (leftRow.style.height = height + "px")
rightRow && (rightRow.style.height = height + "px")
}
})
}
//hao 支持固定表头拖拽 修改表体的width
if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";

1
src/lib/dragColumn.js
View File

@ -90,6 +90,7 @@ export default function dragColumn(Table) {
{...others}
columns={this.state.columns}
data={data}
ref={el => this.table = el}
className={`${className} u-table-drag-border`}
onDragEnd={this.onDragEnd}
draggable={draggable}