Compare commits

...

1 Commits

Author SHA1 Message Date
gx ecd8c5e211 fix: rebind events when rowDraggable changes 2021-04-21 15:14:13 +08:00
7 changed files with 361 additions and 232 deletions

View File

@ -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({
@ -478,7 +481,19 @@ 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 distance = this.bodyTable.scrollTop + (currentScrollY - prevScrollY);
if (distance < 0) {
this.bodyTable.scrollTop = 0;
} else {
this.bodyTable.scrollTop = distance;
}
}
// 是否传入 scroll中的y属性如果传入判断是否是整数如果是则进行比较 。bodyTable 的clientHeight进行判断
this.isShowScrollY();
};
@ -1416,8 +1431,6 @@ var Table = function (_Component) {
};
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
var _this5 = this;
//this.props.height、headerHeight分别为用户传入的行高和表头高度如果有值所有行的高度都是固定的主要为了避免在千行数据中有固定列时获取行高度有问题
var _props9 = this.props,
clsPrefix = _props9.clsPrefix,
@ -1451,13 +1464,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 +1478,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 +1511,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 +1658,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 +1712,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 +1744,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)
)

View File

@ -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;
}
}
}
}

View File

@ -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') || [];
@ -230,13 +231,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 +252,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 +437,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 +455,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 +501,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 +522,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 +530,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 +544,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 +575,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 +592,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 +627,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 +674,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 +684,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 +692,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 +716,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 +739,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 +868,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 +901,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 +939,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 +964,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 +972,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 +980,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 +995,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 +1009,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 +1044,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 +1060,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 +1075,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 +1090,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 +1105,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 +1120,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 +1133,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);
}
};
};

View File

@ -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);
}
};
@ -347,6 +360,15 @@ var TableRow = function (_Component) {
return _this;
}
TableRow.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var rowDraggAble = this.props.rowDraggAble;
if (rowDraggAble !== nextProps.rowDraggAble) {
this.event = false;
this.initEvent();
}
};
TableRow.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
@ -678,7 +700,8 @@ 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
},

View File

@ -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() {

View File

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

View File

@ -67,6 +67,13 @@ class TableRow extends Component{
this.canBeTouch = true //受否允许拖动该行
}
componentWillReceiveProps (nextProps) {
const { rowDraggAble } = this.props;
if(rowDraggAble !== nextProps.rowDraggAble) {
this.event = false
this.initEvent();
}
}
componentDidMount() {
const { store, hoverKey,treeType,rowDraggAble } = this.props;