feat: 支持表头自定义mouseDown事件

This commit is contained in:
izbz wh 2020-09-21 11:05:41 +08:00
parent 3e3b11508d
commit dc00d42445
10 changed files with 19918 additions and 27946 deletions

5
.gitignore vendored
View File

@ -40,4 +40,7 @@ coverage
.*.swp .*.swp
package-lock.json package-lock.json
demo/.DS_Store demo/.DS_Store
demo/demolist/.DS_Store demo/demolist/.DS_Store
# vsCode
.history

View File

@ -638,7 +638,8 @@ var Table = function (_Component) {
bordered = _props2.bordered, bordered = _props2.bordered,
onDropBorder = _props2.onDropBorder, onDropBorder = _props2.onDropBorder,
onDraggingBorder = _props2.onDraggingBorder, onDraggingBorder = _props2.onDraggingBorder,
bodyDisplayInRow = _props2.bodyDisplayInRow; bodyDisplayInRow = _props2.bodyDisplayInRow,
headerEventNoStop = _props2.headerEventNoStop;
this.columnsChildrenList = []; //复杂表头拖拽重新render表头前将其置空 this.columnsChildrenList = []; //复杂表头拖拽重新render表头前将其置空
var rows = this.getHeaderRows(columns); var rows = this.getHeaderRows(columns);
@ -686,7 +687,8 @@ var Table = function (_Component) {
bordered: bordered, bordered: bordered,
leftFixedWidth: leftFixedWidth, leftFixedWidth: leftFixedWidth,
rightFixedWidth: rightFixedWidth, rightFixedWidth: rightFixedWidth,
bodyDisplayInRow: bodyDisplayInRow bodyDisplayInRow: bodyDisplayInRow,
eventNoStop: headerEventNoStop
})) : null; })) : null;
}; };
@ -972,7 +974,7 @@ var Table = function (_Component) {
indent: indent, indent: indent,
indentSize: props.indentSize, indentSize: props.indentSize,
needIndentSpaced: needIndentSpaced, needIndentSpaced: needIndentSpaced,
className: className + ' ' + (props.rowDraggAble && !props.useDragHandle ? 'row-dragg-able ' : ''), className: '' + className,
record: record, record: record,
expandIconAsCell: expandIconAsCell, expandIconAsCell: expandIconAsCell,
onDestroy: this.onRowDestroy, onDestroy: this.onRowDestroy,

View File

@ -271,6 +271,12 @@ var TableCell = function (_Component) {
onPaste(e, position); onPaste(e, position);
}; };
_this.onCellMouseOver = function (e) {
var column = _this.props.column;
_this.props.stopRowDrag(column.notRowDrag);
};
_this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this); _this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
_this.handleClick = _this.handleClick.bind(_this); _this.handleClick = _this.handleClick.bind(_this);
_this.state = { _this.state = {
@ -461,6 +467,7 @@ var TableCell = function (_Component) {
onClick: this.handleClick, onClick: this.handleClick,
title: title, title: title,
onPaste: this.onPaste, onPaste: this.onPaste,
onMouseOver: this.onCellMouseOver,
style: _extends({ maxWidth: column.width, color: fontColor, backgroundColor: bgColor }, column.style) }, style: _extends({ maxWidth: column.width, color: fontColor, backgroundColor: bgColor }, column.style) },
indentText, indentText,
expandIcon, expandIcon,

View File

@ -569,7 +569,9 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.onTrMouseDown = function (e) { this.onTrMouseDown = function (e) {
_utils.Event.stopPropagation(e); var eventNoStop = _this8.props.eventNoStop;
!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 = _this8.props,
@ -668,9 +670,10 @@ var _initialiseProps = function _initialiseProps() {
onDraggingBorder = _props4.onDraggingBorder, onDraggingBorder = _props4.onDraggingBorder,
leftFixedWidth = _props4.leftFixedWidth, leftFixedWidth = _props4.leftFixedWidth,
rightFixedWidth = _props4.rightFixedWidth, rightFixedWidth = _props4.rightFixedWidth,
bodyDisplayInRow = _props4.bodyDisplayInRow; bodyDisplayInRow = _props4.bodyDisplayInRow,
eventNoStop = _props4.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 (_this8.props.dragborder && _this8.drag.option == "border") {
//移动改变宽度 //移动改变宽度

View File

@ -115,7 +115,7 @@ var TableRow = function (_Component) {
_this.onDragStart = function (e) { _this.onDragStart = function (e) {
var onDragRowStart = _this.props.onDragRowStart; var onDragRowStart = _this.props.onDragRowStart;
if (!_this.props.rowDraggAble) return; if (!_this.props.rowDraggAble || _this.notRowDrag) return;
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event); target = _utils.Event.getTarget(event);
if (target.tagName === 'TD') { if (target.tagName === 'TD') {
@ -305,6 +305,17 @@ var TableRow = function (_Component) {
} }
}; };
_this.stopRowDrag = function (isStop) {
var rowDraggAble = _this.props.rowDraggAble;
var notRowDrag = _this.state.notRowDrag;
if (rowDraggAble && isStop !== notRowDrag) {
_this.setState({
notRowDrag: isStop
});
}
};
_this.set = function (fn) { _this.set = function (fn) {
_this.clear(); _this.clear();
_this._timeout = window.setTimeout(fn, 300); _this._timeout = window.setTimeout(fn, 300);
@ -576,6 +587,7 @@ var TableRow = function (_Component) {
lazyStartIndex = _props10.lazyStartIndex, lazyStartIndex = _props10.lazyStartIndex,
lazyEndIndex = _props10.lazyEndIndex, lazyEndIndex = _props10.lazyEndIndex,
expandIconCellWidth = _props10.expandIconCellWidth; expandIconCellWidth = _props10.expandIconCellWidth;
var notRowDrag = this.state.notRowDrag;
var showSum = false; var showSum = false;
var className = this.props.className; var className = this.props.className;
@ -636,6 +648,7 @@ var TableRow = function (_Component) {
lazyStartIndex: lazyStartIndex, lazyStartIndex: lazyStartIndex,
lazyEndIndex: lazyEndIndex, lazyEndIndex: lazyEndIndex,
onPaste: onPaste, onPaste: onPaste,
stopRowDrag: this.stopRowDrag,
col: i col: i
})); }));
} }
@ -646,10 +659,15 @@ var TableRow = function (_Component) {
if (record && record._checked) { if (record && record._checked) {
className += ' selected'; className += ' selected';
} }
if (rowDraggAble && !useDragHandle && !notRowDrag) {
className += ' row-dragg-able';
}
return _react2["default"].createElement( return _react2["default"].createElement(
'tr', 'tr',
{ {
draggable: rowDraggAble && !useDragHandle, draggable: rowDraggAble && !useDragHandle && !notRowDrag,
onClick: this.onRowClick, onClick: this.onRowClick,
onDoubleClick: this.onRowDoubleClick, onDoubleClick: this.onRowDoubleClick,
onMouseEnter: this.onMouseEnter, onMouseEnter: this.onMouseEnter,

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

47799
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -436,7 +436,7 @@ class Table extends Component {
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) { getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
const { lastShowIndex } = this.state; const { lastShowIndex } = this.state;
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable, const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow} = this.props; onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow, headerEventNoStop} = this.props;
this.columnsChildrenList = []; //复杂表头拖拽重新render表头前将其置空 this.columnsChildrenList = []; //复杂表头拖拽重新render表头前将其置空
const rows = this.getHeaderRows(columns); const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') { if (expandIconAsCell && fixed !== 'right') {
@ -487,6 +487,7 @@ class Table extends Component {
leftFixedWidth = {leftFixedWidth} leftFixedWidth = {leftFixedWidth}
rightFixedWidth = {rightFixedWidth} rightFixedWidth = {rightFixedWidth}
bodyDisplayInRow = {bodyDisplayInRow} bodyDisplayInRow = {bodyDisplayInRow}
eventNoStop = {headerEventNoStop}
/> />
) : null; ) : null;
} }

View File

@ -245,7 +245,8 @@ class TableHeader extends Component {
* @memberof TableHeader * @memberof TableHeader
*/ */
onTrMouseDown = (e) => { onTrMouseDown = (e) => {
Event.stopPropagation(e); const { eventNoStop } = this.props;
!eventNoStop && Event.stopPropagation(e);
let event = Event.getEvent(e) , let event = Event.getEvent(e) ,
targetEvent = Event.getTarget(event); targetEvent = Event.getTarget(event);
const { clsPrefix, contentTable,lastShowIndex,columnsChildrenList } = this.props; const { clsPrefix, contentTable,lastShowIndex,columnsChildrenList } = this.props;
@ -337,8 +338,8 @@ class TableHeader extends Component {
*/ */
onTrMouseMove = (e) => { onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return; if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth, bodyDisplayInRow} = this.props; const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth, bodyDisplayInRow, eventNoStop} = this.props;
Event.stopPropagation(e); !eventNoStop && Event.stopPropagation(e);
let event = Event.getEvent(e); let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){ if(this.props.dragborder && this.drag.option == "border"){
//移动改变宽度 //移动改变宽度