feat: 支持表头自定义mouseDown事件
This commit is contained in:
parent
3e3b11508d
commit
dc00d42445
|
@ -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
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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") {
|
||||||
//移动改变宽度
|
//移动改变宽度
|
||||||
|
|
|
@ -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,
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"){
|
||||||
//移动改变宽度
|
//移动改变宽度
|
||||||
|
|
Loading…
Reference in New Issue