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

fix: rebind events when rowDraggable changes

This commit is contained in:
gx 2021-04-21 15:14:13 +08:00
parent 7c71bcf6eb
commit ecd8c5e211
7 changed files with 361 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
build/Table.js
View File

@ -241,6 +241,9 @@ var Table = function (_Component) {
} }
}); });
if (currentIndex > -1) { if (currentIndex > -1) {
if (_this.contentTable.dragType == 'top') {
targetIndex = targetIndex - 1;
}
data = _this.swapArray(data, currentIndex, targetIndex); data = _this.swapArray(data, currentIndex, targetIndex);
_this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex); _this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
_this.setState({ _this.setState({
@ -478,7 +481,19 @@ var Table = function (_Component) {
// if (prevProps.data.length === 0 || this.props.data.length === 0 ) { // if (prevProps.data.length === 0 || this.props.data.length === 0 ) {
// this.resetScrollX(); // 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进行判断 // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
this.isShowScrollY(); this.isShowScrollY();
}; };
@ -1416,8 +1431,6 @@ var Table = function (_Component) {
}; };
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() { Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
var _this5 = this;
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题 //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
var _props9 = this.props, var _props9 = this.props,
clsPrefix = _props9.clsPrefix, clsPrefix = _props9.clsPrefix,
@ -1451,13 +1464,13 @@ var Table = function (_Component) {
rightHeight = void 0, rightHeight = void 0,
currentHeight = void 0, currentHeight = void 0,
maxHeight = void 0; maxHeight = void 0;
leftHeight = leftBodyRows[index] ? parseInt(leftBodyRows[index].getBoundingClientRect().height) : 0; leftHeight = leftBodyRows[index] ? Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理
rightHeight = rightBodyRows[index] ? parseInt(rightBodyRows[index].getBoundingClientRect().height) : 0; rightHeight = rightBodyRows[index] ? Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0;
currentHeight = parseInt(row.getBoundingClientRect().height); currentHeight = Number(row.getBoundingClientRect().height).toFixed(2);
maxHeight = Math.max(leftHeight, rightHeight, currentHeight); maxHeight = Math.max(leftHeight, rightHeight, currentHeight);
return maxHeight || 'auto'; return maxHeight || 'auto';
} else { } 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为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) { expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"); var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
var exHeight = height; var exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
if (!exHeight) { // fix: ie 展开表格计算渲染bug
exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto'; // try {//子表数据减少时，动态计算高度
try { // let td = row.querySelector('td');
//子表数据减少时，动态计算高度 // let tdPadding = this.getTdPadding(td);
var td = row.querySelector('td'); // let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
var tdPadding = _this5.getTdPadding(td); // exHeight = trueheight+tdPadding;
var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height); // } catch (error) {
exHeight = trueheight + tdPadding;
} catch (error) {} // }
}
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight); 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)) { 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) { Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
var _this6 = this; var _this5 = this;
var rows = this.getExpandedRows().filter(function (i) { var rows = this.getExpandedRows().filter(function (i) {
return i === _this6.getRowKey(record, index); return i === _this5.getRowKey(record, index);
}); });
return rows[0]; return rows[0];
}; };
@ -1646,7 +1658,7 @@ var Table = function (_Component) {
}; };
Table.prototype.render = function render() { Table.prototype.render = function render() {
var _this7 = this; var _this6 = this;
var _state3 = this.state, var _state3 = this.state,
currentHoverRecord = _state3.currentHoverRecord, currentHoverRecord = _state3.currentHoverRecord,
@ -1700,7 +1712,7 @@ var Table = function (_Component) {
return _react2["default"].createElement( return _react2["default"].createElement(
'div', 'div',
{ className: className, style: props.style, ref: function ref(el) { { 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') }, tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
this.getTitle(), this.getTitle(),
@ -1732,7 +1744,7 @@ var Table = function (_Component) {
'div', 'div',
{ className: 'u-row-hover', { className: 'u-row-hover',
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) { onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
return _this7.hoverDom = el; return _this6.hoverDom = el;
} }, } },
props.hoverContent(currentHoverRecord, currentHoverIndex) props.hoverContent(currentHoverRecord, currentHoverIndex)
) )

130
build/TableCell.js
View File

@ -356,70 +356,74 @@ var TableCell = function (_Component) {
var colSpan = void 0; var colSpan = void 0;
var rowSpan = void 0, var rowSpan = void 0,
title = 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); var colMenu = this.renderColumnMenu(column.cellMenu, text, record, index);
// 根据 fieldType 来渲染数据 // 如果是固定列在主表格上就渲染null
if (!render) { if (column.fixed && !fixed) {
switch (column.fieldType) { text = null;
case 'link': } else {
{ if (render && !showSum) {
text = this.renderLinkType(text, record, index, column.linkConfig); text = render(text, record, index, _extends({
break; dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
} if (this.isInvalidRenderCellText(text)) {
case 'bool': tdProps = text.props || {};
{ rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
text = this.renderBoolType(text, column.boolConfig); colSpan = tdProps.colSpan;
break; text = text.children;
} }
case 'currency': }
{
var config = { // 根据 fieldType 来渲染数据
precision: 2, // 精度值,需要大于0 if (!render) {
thousand: true, // 是否显示千分符号 switch (column.fieldType) {
makeUp: true, // 末位是否补零 case 'link':
preSymbol: '', // 前置符号 {
nextSymbol: '' // 后置符号 text = this.renderLinkType(text, record, index, column.linkConfig);
}; break;
text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width); }
break; case 'bool':
} {
case 'number': text = this.renderBoolType(text, column.boolConfig);
{ break;
var _config = { }
precision: 0, // 精度值,需要大于0 case 'currency':
thousand: true, // 是否显示千分符号 {
makeUp: false, // 末位是否补零 var config = {
preSymbol: '', // 前置符号 precision: 2, // 精度值,需要大于0
nextSymbol: '' // 后置符号 thousand: true, // 是否显示千分符号
}; makeUp: true, // 末位是否补零
text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width); preSymbol: '', // 前置符号
break; nextSymbol: '' // 后置符号
} };
case 'date': text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
{ break;
text = this.renderDate(text, column.dateConfig); }
break; case 'number':
} {
case 'select': var _config = {
{ precision: 0, // 精度值,需要大于0
text = this.renderSelect(text, column.selectConfig); thousand: true, // 是否显示千分符号
break; makeUp: false, // 末位是否补零
} preSymbol: '', // 前置符号
default: nextSymbol: '' // 后置符号
{ };
break; 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;
}
}
} }
} }

354
build/TableHeader.js
View File

@ -142,6 +142,7 @@ var TableHeader = function (_Component) {
table.cols = tableDome.getElementsByTagName("col"); table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th"); table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr"); 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.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') || [];
@ -230,13 +231,18 @@ var TableHeader = function (_Component) {
TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() { TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
var _this5 = this;
if (!this.props.dragborder) return; if (!this.props.dragborder) return;
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }]; this.eventListen([{ key: 'mouseup', fun: this.onTrMouseUp }], '', document.body);
this.doEventList(this.table.tr, function (tr) { this.eventListen([{ key: 'mousemove', fun: this.onTrMouseMove }], '', document.body);
_this5.eventListen(events, '', tr); //表示把事件添加到th元素上
}); // 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元素上 // this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
}; };
@ -246,12 +252,12 @@ var TableHeader = function (_Component) {
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() { TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
var _this6 = this; var _this5 = this;
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }]; var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
// this.eventListen(events,'remove',this.table.tr[0]); // this.eventListen(events,'remove',this.table.tr[0]);
this.doEventList(this.table.tr, function (tr) { 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() { TableHeader.prototype.render = function render() {
var _this7 = this; var _this6 = this;
var _props2 = this.props, var _props2 = this.props,
clsPrefix = _props2.clsPrefix, clsPrefix = _props2.clsPrefix,
@ -449,7 +455,7 @@ var TableHeader = function (_Component) {
return _react2["default"].createElement( return _react2["default"].createElement(
"thead", "thead",
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_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) { rows.map(function (row, index) {
var _rowLeng = row.length - 1; var _rowLeng = row.length - 1;
@ -495,7 +501,7 @@ var TableHeader = function (_Component) {
// } // }
if (filterable && index == rows.length - 1) { 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) { if (da.key === undefined) {
keyTemp.key = keyTemp.key + '-filterable'; keyTemp.key = keyTemp.key + '-filterable';
} }
@ -516,7 +522,7 @@ var TableHeader = function (_Component) {
"th", "th",
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, "data-line-key": da.key, _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) { "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, da.children,
@ -524,10 +530,10 @@ var TableHeader = function (_Component) {
dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement( dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement(
"div", "div",
{ ref: function ref(el) { { ref: function ref(el) {
return _this7.gap = el; return _this6.gap = el;
}, "data-line-key": da.key, }, "data-line-key": da.key,
"data-line-index": columIndex, "data-th-width": da.width, "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" }) _react2["default"].createElement("div", { className: "online" })
) : "" ) : ""
); );
@ -538,7 +544,22 @@ var TableHeader = function (_Component) {
da.onClick ? thDefaultObj.onClick = function (e) { da.onClick ? thDefaultObj.onClick = function (e) {
da.onClick(da, 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 _initialiseProps = function _initialiseProps() {
var _this8 = this; var _this7 = this;
this.getOnLineObject = function (_element) { this.getOnLineObject = function (_element) {
var type = _element.getAttribute('data-type'), var type = _element.getAttribute('data-type'),
@ -571,28 +592,29 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.onTrMouseDown = function (e) { this.onTrMouseDown = function (e) {
var eventNoStop = _this8.props.eventNoStop; var eventNoStop = _this7.props.eventNoStop;
!eventNoStop && _utils.Event.stopPropagation(e); !eventNoStop && _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
targetEvent = _utils.Event.getTarget(event); targetEvent = _utils.Event.getTarget(event);
var _props3 = _this8.props, var _props3 = _this7.props,
clsPrefix = _props3.clsPrefix, clsPrefix = _props3.clsPrefix,
contentTable = _props3.contentTable, contentTable = _props3.contentTable,
lastShowIndex = _props3.lastShowIndex, lastShowIndex = _props3.lastShowIndex,
columnsChildrenList = _props3.columnsChildrenList; columnsChildrenList = _props3.columnsChildrenList;
// let currentElement = this.getOnLineObject(targetEvent); // let currentElement = this.getOnLineObject(targetEvent);
var currentElement = _this8.getTargetToType(targetEvent); var currentElement = _this7.getTargetToType(targetEvent);
if (!currentElement) return; if (!currentElement) return;
var type = currentElement.getAttribute('data-type'); var type = currentElement.getAttribute('data-type');
if (!_this8.props.dragborder && !_this8.props.draggable) return; var fixedType = currentElement.getAttribute('data-th-fixed');
if (type == 'online' && _this8.props.dragborder) { if (!_this7.props.dragborder && !_this7.props.draggable) return;
if (type == 'online' && _this7.props.dragborder) {
// if(!this.props.dragborder)return; // if(!this.props.dragborder)return;
targetEvent.setAttribute('draggable', false); //添加交换列效果 targetEvent.setAttribute('draggable', false); //添加交换列效果
var currentIndex = -1; var currentIndex = -1;
var defaultWidth = currentElement.getAttribute("data-th-width"); var defaultWidth = currentElement.getAttribute("data-th-width");
_this8.drag.option = "border"; //拖拽操作 _this7.drag.option = "border"; //拖拽操作
if (columnsChildrenList) { if (columnsChildrenList) {
var columnKey = currentElement.getAttribute("data-line-key"); var columnKey = currentElement.getAttribute("data-line-key");
if (columnKey) { if (columnKey) {
@ -605,27 +627,44 @@ var _initialiseProps = function _initialiseProps() {
console.log('Key must be set for column!'); console.log('Key must be set for column!');
return; return;
} }
var currentObj = _this8.table.cols[currentIndex]; var currentObj = _this7.table.cols[currentIndex];
_this8.drag.currIndex = currentIndex; _this7.drag.currIndex = currentIndex;
_this8.drag.oldLeft = event.clientX; _this7.drag.oldLeft = event.clientX;
_this8.drag.oldWidth = parseInt(currentObj.style.width); _this7.drag.oldWidth = parseInt(currentObj.style.width);
_this8.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth; _this7.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); _this7.drag.tableWidth = parseInt(_this7.table.table.style.width ? _this7.table.table.style.width : _this7.table.table.scrollWidth);
if (!_this8.tableOldWidth) { if (!_this7.tableOldWidth) {
_this8.tableOldWidth = _this8.drag.tableWidth; //this.getTableWidth(); _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 (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!_this8.props.draggable) return; if (!_this7.props.draggable) return;
var th = _this8.getTargetToType(targetEvent); var th = _this7.getTargetToType(targetEvent);
th.setAttribute('draggable', true); //添加交换列效果 th.setAttribute('draggable', true); //添加交换列效果
_this8.drag.option = 'dragAble'; _this7.drag.option = 'dragAble';
_this8.currentDome = th; _this7.currentDome = th;
var _currentIndex = parseInt(th.getAttribute("data-line-index")); var _currentIndex = parseInt(th.getAttribute("data-line-index"));
_this8.drag.currIndex = _currentIndex; _this7.drag.currIndex = _currentIndex;
} else { } else {
// console.log("onTrMouseDown dragborder or draggable is all false !"); // console.log("onTrMouseDown dragborder or draggable is all false !");
return; return;
@ -635,8 +674,8 @@ var _initialiseProps = function _initialiseProps() {
this.getTableWidth = function () { this.getTableWidth = function () {
var tableWidth = 0, var tableWidth = 0,
offWidth = 0; //this.table.cols.length; offWidth = 0; //this.table.cols.length;
for (var index = 0; index < _this8.table.cols.length; index++) { for (var index = 0; index < _this7.table.cols.length; index++) {
var da = _this8.table.cols[index]; var da = _this7.table.cols[index];
tableWidth += parseInt(da.style.width); tableWidth += parseInt(da.style.width);
} }
return tableWidth - offWidth; return tableWidth - offWidth;
@ -645,7 +684,7 @@ var _initialiseProps = function _initialiseProps() {
this.getTargetToType = function (targetEvent) { this.getTargetToType = function (targetEvent) {
var tag = targetEvent; var tag = targetEvent;
if (targetEvent && !targetEvent.getAttribute("data-type")) { if (targetEvent && !targetEvent.getAttribute("data-type")) {
tag = _this8.getTargetToType(targetEvent.parentElement); tag = _this7.getTargetToType(targetEvent.parentElement);
} }
return tag; return tag;
}; };
@ -653,15 +692,15 @@ var _initialiseProps = function _initialiseProps() {
this.getTargetToTh = function (targetEvent) { this.getTargetToTh = function (targetEvent) {
var th = targetEvent; var th = targetEvent;
if (targetEvent.nodeName.toUpperCase() != "TH") { if (targetEvent.nodeName.toUpperCase() != "TH") {
th = _this8.getThDome(targetEvent); th = _this7.getThDome(targetEvent);
} }
// console.log(" getTargetToTh: ", th); // console.log(" getTargetToTh: ", th);
return th; return th;
}; };
this.onTrMouseMove = function (e) { this.onTrMouseMove = function (e) {
if (!_this8.props.dragborder && !_this8.props.draggable) return; if (!_this7.props.dragborder && !_this7.props.draggable) return;
var _props4 = _this8.props, var _props4 = _this7.props,
clsPrefix = _props4.clsPrefix, clsPrefix = _props4.clsPrefix,
dragborder = _props4.dragborder, dragborder = _props4.dragborder,
contentDomWidth = _props4.contentDomWidth, contentDomWidth = _props4.contentDomWidth,
@ -677,20 +716,20 @@ var _initialiseProps = function _initialiseProps() {
!eventNoStop && _utils.Event.stopPropagation(e); !eventNoStop && _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(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 currentCols = _this7.table.cols[_this7.drag.currIndex];
var diff = event.clientX - _this8.drag.oldLeft; var diff = event.clientX - _this7.drag.oldLeft;
var newWidth = _this8.drag.oldWidth + diff; var newWidth = _this7.drag.oldWidth + diff;
_this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth; _this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
if (newWidth > _this8.minWidth) { if (newWidth > _this7.minWidth) {
currentCols.style.width = newWidth + 'px'; currentCols.style.width = newWidth + 'px';
// displayinrow 判断、 固定行高判断 // displayinrow 判断、 固定行高判断
if (!bodyDisplayInRow) { if (!bodyDisplayInRow) {
_this8.table.bodyRows.forEach(function (row, index) { _this7.table.bodyRows.forEach(function (row, index) {
var leftRow = _this8.table.fixedLeftBodyRows[index]; var leftRow = _this7.table.fixedLeftBodyRows[index];
var rightRow = _this8.table.fixedRightBodyRows[index]; var rightRow = _this7.table.fixedRightBodyRows[index];
if (leftRow || rightRow) { if (leftRow || rightRow) {
var height = row.getBoundingClientRect().height; var height = row.getBoundingClientRect().height;
leftRow && (leftRow.style.height = height + "px"); leftRow && (leftRow.style.height = height + "px");
@ -700,74 +739,113 @@ var _initialiseProps = function _initialiseProps() {
} }
//hao 支持固定表头拖拽 修改表体的width //hao 支持固定表头拖拽 修改表体的width
if (_this8.fixedTable.cols) { if (_this7.fixedTable.cols) {
_this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px"; _this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
} }
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width); var contentTableSWidth = _this7.drag.contentTableSWidth - _this7.drag.contentTableCWidth;
if (newDiff > 0) { // console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
//缩小 if (diff < 0 && contentTableSWidth + diff < 0) {
var lastWidth = _this8.lastColumWidth + newDiff; var headerCols = _this7.table.tableHeaderCols || _this7.table.cols;
_this8.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头 var lastWidth = _this7.lastColumWidth - (contentTableSWidth + diff);
_this8.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体 // 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 (!_this7.drag.fixedType) {
if (headerScroll) {
if (showScroll < 0) { // let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
//小于 0 出现滚动条 // if(newDiff > 0){//缩小
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth; // let lastWidth = this.lastColumWidth + newDiff;
_this8.table.contentTableHeader.style.overflowX = 'scroll'; // this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
_this8.optTableMargin(_this8.table.fixedLeftHeaderTable, scrollbarWidth); // this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
_this8.optTableMargin(_this8.table.fixedRighHeadertTable, scrollbarWidth);
// }
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 { } else {
//大于 0 不显示滚动条 if (showScroll < 0) {
_this8.table.contentTableHeader.style.overflowX = 'hidden'; _this7.table.tableBody.style.overflowX = 'auto';
_this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0); _this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
_this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0); _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 { } else if (_this7.drag.fixedType) {
if (showScroll < 0) { if (_this7.table.ths[_this7.drag.currIndex]) {
_this8.table.tableBody.style.overflowX = 'auto'; _this7.table.ths[_this7.drag.currIndex].width = newWidth;
_this8.optTableMargin(_this8.table.fixedLeftBodyTable, '-' + scrollbarWidth); }
_this8.optTableMargin(_this8.table.fixedRightBodyTable, '-' + scrollbarWidth); // console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
_this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'scroll' }); // debugger
_this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'scroll' });
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 { } else {
_this8.table.tableBody.style.overflowX = 'hidden'; contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px';
_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' });
} }
} }
} else { } 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) { this.onTrMouseUp = function (e) {
var event = _utils.Event.getEvent(e); var event = _utils.Event.getEvent(e);
var width = _this8.drag.newWidth; var width = _this7.drag.newWidth;
var opt = _this8.drag.option; var opt = _this7.drag.option;
_this8.mouseClear(); _this7.mouseClear();
if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题 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 () { this.clearThsDr = function () {
var ths = _this8.table.ths; var ths = _this7.table.ths;
for (var index = 0; index < ths.length; index++) { for (var index = 0; index < ths.length; index++) {
ths[index].setAttribute('draggable', false); //去掉交换列效果 ths[index].setAttribute('draggable', false); //去掉交换列效果
} }
}; };
this.bodyonLineMouseUp = function (events, type) { this.bodyonLineMouseUp = function (events, type) {
if (!_this8.drag || !_this8.drag.option) return; if (!_this7.drag || !_this7.drag.option) return;
_this8.mouseClear(); _this7.mouseClear();
}; };
this.optTableMargin = function (table, scrollbarWidth) { this.optTableMargin = function (table, scrollbarWidth) {
@ -790,31 +868,31 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.onDragStart = function (e) { this.onDragStart = function (e) {
if (!_this8.props.draggable) return; if (!_this7.props.draggable) return;
if (_this8.drag && _this8.drag.option != 'dragAble') { if (_this7.drag && _this7.drag.option != 'dragAble') {
return; return;
} }
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
// target = Event.getTarget(event); // 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 currentIndex = parseInt(target.getAttribute("data-line-index"));
var currentKey = target.getAttribute('data-line-key'); var currentKey = target.getAttribute('data-line-key');
if (event.dataTransfer.setDragImage) { if (event.dataTransfer.setDragImage) {
var crt = target.cloneNode(true); var crt = target.cloneNode(true);
crt.style.backgroundColor = "#ebecf0"; 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.height = "40px";
// crt.style['line-height'] = "40px"; // crt.style['line-height'] = "40px";
// document.body.appendChild(crt); // 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.setDragImage(crt, 0, 0);
} }
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey); event.dataTransfer.setData("Text", currentKey);
_this8.currentObj = _this8.props.rows[0][currentIndex]; _this7.currentObj = _this7.props.rows[0][currentIndex];
}; };
this.onDragOver = function (e) { this.onDragOver = function (e) {
@ -823,34 +901,34 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.onDrop = function (e) { this.onDrop = function (e) {
if (!_this8.props.draggable) return; if (!_this7.props.draggable) return;
var props = _this8.getCurrentEventData(_this8._dragCurrent); var props = _this7.getCurrentEventData(_this7._dragCurrent);
e.column = { props: props }; e.column = { props: props };
if (_this8.drag && _this8.drag.option != 'dragAble') { if (_this7.drag && _this7.drag.option != 'dragAble') {
_this8.props.onDrop(e); _this7.props.onDrop(e);
return; return;
} }
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event); target = _utils.Event.getTarget(event);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
_this8.currentDome.setAttribute('draggable', false); //添加交换列效果 _this7.currentDome.setAttribute('draggable', false); //添加交换列效果
// let data = this.getCurrentEventData(this._dragCurrent); // let data = this.getCurrentEventData(this._dragCurrent);
// if(!data){ // if(!data){
// this.props.onDrop(e); // this.props.onDrop(e);
// return; // return;
// } // }
if (!_this8.props.onDrop) return; if (!_this7.props.onDrop) return;
// this.props.onDrop(event,target); // 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) { this.onDragEnter = function (e) {
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event); target = _utils.Event.getTarget(event);
_this8._dragCurrent = target; _this7._dragCurrent = target;
var currentIndex = target.getAttribute("data-line-index"); 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") { if (target.nodeName.toUpperCase() === "TH") {
// target.style.border = "2px dashed rgba(5,0,0,0.25)"; // target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)"); target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
@ -861,24 +939,24 @@ var _initialiseProps = function _initialiseProps() {
this.onDragEnd = function (e) { this.onDragEnd = function (e) {
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event); target = _utils.Event.getTarget(event);
_this8._dragCurrent.setAttribute("style", ""); _this7._dragCurrent.setAttribute("style", "");
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
// this._dragCurrent.style = ""; // 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 (!data) return;
if (!_this8.currentObj || _this8.currentObj.key == data.key) return; if (!_this7.currentObj || _this7.currentObj.key == data.key) return;
if (!_this8.props.onDragEnd) return; if (!_this7.props.onDragEnd) return;
_this8.props.onDragEnd(event, { dragSource: _this8.currentObj, dragTarg: data }); _this7.props.onDragEnd(event, { dragSource: _this7.currentObj, dragTarg: data });
}; };
this.onDragLeave = function (e) { this.onDragLeave = function (e) {
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event); target = _utils.Event.getTarget(event);
var currentIndex = target.getAttribute("data-line-index"); 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") { if (target.nodeName.toUpperCase() === "TH") {
target.setAttribute("style", ""); target.setAttribute("style", "");
// this._dragCurrent.style = ""; // this._dragCurrent.style = "";
@ -886,7 +964,7 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.handlerFilterChange = function (key, value, condition) { this.handlerFilterChange = function (key, value, condition) {
var onFilterChange = _this8.props.onFilterChange; var onFilterChange = _this7.props.onFilterChange;
if (onFilterChange) { if (onFilterChange) {
onFilterChange(key, value, condition); onFilterChange(key, value, condition);
@ -894,7 +972,7 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.handlerFilterClear = function (field) { this.handlerFilterClear = function (field) {
var onFilterClear = _this8.props.onFilterClear; var onFilterClear = _this7.props.onFilterClear;
if (onFilterClear) { if (onFilterClear) {
onFilterClear(field); onFilterClear(field);
@ -902,7 +980,7 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.filterRenderType = function (type, dataIndex, index) { this.filterRenderType = function (type, dataIndex, index) {
var _props5 = _this8.props, var _props5 = _this7.props,
clsPrefix = _props5.clsPrefix, clsPrefix = _props5.clsPrefix,
rows = _props5.rows, rows = _props5.rows,
filterDelay = _props5.filterDelay, filterDelay = _props5.filterDelay,
@ -917,8 +995,8 @@ var _initialiseProps = function _initialiseProps() {
, clsPrefix: clsPrefix //css前缀 , clsPrefix: clsPrefix //css前缀
, className: clsPrefix + " filter-text", , className: clsPrefix + " filter-text",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调 , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调
, onFilterClear: _this8.handlerFilterClear //清除回调 , onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件 , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -931,8 +1009,8 @@ var _initialiseProps = function _initialiseProps() {
clsPrefix: clsPrefix, clsPrefix: clsPrefix,
className: clsPrefix + " filter-text", className: clsPrefix + " filter-text",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调并且函数防抖动 , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调并且函数防抖动
, onFilterClear: _this8.handlerFilterClear //清除回调 , onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -966,8 +1044,8 @@ var _initialiseProps = function _initialiseProps() {
data: selectDataSource, data: selectDataSource,
notFoundContent: "Loading" //没有数据显示的默认字 notFoundContent: "Loading" //没有数据显示的默认字
, dataIndex: dataIndex //字段 , dataIndex: dataIndex //字段
, onFilterChange: _this8.handlerFilterChange //输入框回调 , onFilterChange: _this7.handlerFilterChange //输入框回调
, onFilterClear: _this8.handlerFilterClear //清除回调 , onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
onFocus: rows[1][index]["filterdropdownfocus"], onFocus: rows[1][index]["filterdropdownfocus"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
@ -982,8 +1060,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-MM-DD", format: rows[1][index]["format"] || "YYYY-MM-DD",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this8.handlerFilterChange //输入框回调 , onFilterChange: _this7.handlerFilterChange //输入框回调
, onFilterClear: _this8.handlerFilterClear //清除回调 , onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -997,8 +1075,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY", format: rows[1][index]["format"] || "YYYY",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this8.handlerFilterChange //输入框回调 , onFilterChange: _this7.handlerFilterChange //输入框回调
, onFilterClear: _this8.handlerFilterClear //清除回调 , onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -1012,8 +1090,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-MM", format: rows[1][index]["format"] || "YYYY-MM",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this8.handlerFilterChange //输入框回调 , onFilterChange: _this7.handlerFilterChange //输入框回调
, onFilterClear: _this8.handlerFilterClear //清除回调 , onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -1027,8 +1105,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-Wo", format: rows[1][index]["format"] || "YYYY-Wo",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this8.handlerFilterChange //输入框回调 , onFilterChange: _this7.handlerFilterChange //输入框回调
, onFilterClear: _this8.handlerFilterClear //清除回调 , onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -1042,8 +1120,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-MM-DD", format: rows[1][index]["format"] || "YYYY-MM-DD",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this8.handlerFilterChange //输入框回调 , onFilterChange: _this7.handlerFilterChange //输入框回调
, onFilterClear: _this8.handlerFilterClear //清除回调 , onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -1055,8 +1133,8 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.onCopy = function (data, index, event) { this.onCopy = function (data, index, event) {
if (_this8.props.onCopy) { if (_this7.props.onCopy) {
_this8.props.onCopy(_extends(data, { col: index }), event); _this7.props.onCopy(_extends(data, { col: index }), event);
} }
}; };
}; };

37
build/TableRow.js
View File

@ -122,6 +122,9 @@ var TableRow = function (_Component) {
target = target.parentNode; target = target.parentNode;
} }
_this.currentIndex = target.getAttribute("data-row-key"); _this.currentIndex = target.getAttribute("data-row-key");
// 拖拽其实index
_this.props.contentTable.startI = target.getAttribute("data-row-index");
_this._dragCurrent = target; _this._dragCurrent = target;
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", _this.currentIndex); event.dataTransfer.setData("Text", _this.currentIndex);
@ -134,7 +137,9 @@ var TableRow = function (_Component) {
}; };
_this.onDrop = function (e) { _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), var event = _utils.Event.getEvent(e),
_target = _utils.Event.getTarget(event), _target = _utils.Event.getTarget(event),
@ -224,9 +229,9 @@ var TableRow = function (_Component) {
}; };
_this.synchronizeTableTrShadow = function () { _this.synchronizeTableTrShadow = function () {
var _this$props = _this.props, var _this$props2 = _this.props,
contentTable = _this$props.contentTable, contentTable = _this$props2.contentTable,
index = _this$props.index; index = _this$props2.index;
var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index], var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
@ -277,21 +282,29 @@ var TableRow = function (_Component) {
currentObj = element; currentObj = element;
} }
} }
if (type) { if (type == 'down') {
currentObj && currentObj.setAttribute("style", "border-bottom:2px solid #02B1FD"); currentObj && currentObj.setAttribute("style", "border-bottom:2px solid #02B1FD");
} else if (type) {
currentObj && currentObj.setAttribute("style", "border-top:2px solid #02B1FD");
} else { } else {
currentObj && currentObj.setAttribute("style", ""); currentObj && currentObj.setAttribute("style", "");
} }
}; };
_this.onDragEnter = function (e) { _this.onDragEnter = function (e) {
var contentTable = _this.props.contentTable;
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
_target = _utils.Event.getTarget(event), _target = _utils.Event.getTarget(event),
target = _target.parentNode; target = _target.parentNode;
var currentIndex = target.getAttribute("data-row-key"); var currentIndex = target.getAttribute("data-row-key");
var dragEnterIndex = target.getAttribute("data-row-index");
if (!currentIndex || currentIndex === _this.currentIndex) return; if (!currentIndex || currentIndex === _this.currentIndex) return;
var dragType = parseInt(dragEnterIndex) > parseInt(contentTable.startI) ? 'down' : 'top';
contentTable.dragType = dragType;
if (target.nodeName.toUpperCase() === "TR") { if (target.nodeName.toUpperCase() === "TR") {
_this.synchronizeTableTr(currentIndex, true); _this.synchronizeTableTr(currentIndex, dragType);
} }
}; };
@ -347,6 +360,15 @@ var TableRow = function (_Component) {
return _this; 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() { TableRow.prototype.componentDidMount = function componentDidMount() {
var _this2 = this; var _this2 = this;
@ -678,7 +700,8 @@ var TableRow = function (_Component) {
onMouseLeave: this.onMouseLeave, onMouseLeave: this.onMouseLeave,
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent, className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
style: style, 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} // key={hoverKey}
, ref: this.bindElement , ref: this.bindElement
}, },

5
build/lib/sort.js
View File

@ -228,8 +228,13 @@ function sort(Table, Icon) {
this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) { this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
var currentCol = orderCols[currentIndex]; var currentCol = orderCols[currentIndex];
var getMultiSorterValueFunc = currentCol.getMultiSorterValue;
var preKey = pre[currentCol.key]; var preKey = pre[currentCol.key];
var afterKey = after[currentCol.key]; var afterKey = after[currentCol.key];
if (getMultiSorterValueFunc) {
preKey = getMultiSorterValueFunc(pre, currentCol);
afterKey = getMultiSorterValueFunc(after, currentCol);
}
var colSortFun = currentCol.sorter; var colSortFun = currentCol.sorter;
if (typeof colSortFun !== 'function') { if (typeof colSortFun !== 'function') {
colSortFun = function colSortFun() { colSortFun = function colSortFun() {

2
package.json
View File

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

7
src/TableRow.js
View File

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