feat: 自定义某列来控制当前行是否可以拖拽

This commit is contained in:
izbz wh 2020-09-11 14:48:13 +08:00
parent e8cb440d93
commit 8aebc77957
3 changed files with 26 additions and 3 deletions

View File

@ -802,7 +802,7 @@ class Table extends 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

@ -184,6 +184,11 @@ class TableCell extends Component{
onPaste(e,position) onPaste(e,position)
} }
onCellMouseOver = (e)=> {
const {column} = this.props
this.props.stopRowDrag(column.notRowDrag)
}
render() { render() {
const { record, indentSize, clsPrefix, indent, const { record, indentSize, clsPrefix, indent,
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props; index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props;
@ -301,6 +306,7 @@ class TableCell extends Component{
onClick={this.handleClick} onClick={this.handleClick}
title={title} title={title}
onPaste={this.onPaste} onPaste={this.onPaste}
onMouseOver={this.onCellMouseOver}
style={{maxWidth:column.width, color:fontColor, backgroundColor:bgColor, ...column.style}}> style={{maxWidth:column.width, color:fontColor, backgroundColor:bgColor, ...column.style}}>
{indentText} {indentText}
{expandIcon} {expandIcon}

View File

@ -140,7 +140,7 @@ class TableRow extends Component{
*/ */
onDragStart = (e) => { onDragStart = (e) => {
let {onDragRowStart} = this.props; let {onDragRowStart} = this.props;
if (!this.props.rowDraggAble) return; if (!this.props.rowDraggAble || this.notRowDrag) return;
let event = Event.getEvent(e) , let event = Event.getEvent(e) ,
target = Event.getTarget(event); target = Event.getTarget(event);
if (target.tagName === 'TD') { if (target.tagName === 'TD') {
@ -430,6 +430,16 @@ class TableRow extends Component{
onHover(false, hoverKey,e,fixedIndex,record); onHover(false, hoverKey,e,fixedIndex,record);
} }
stopRowDrag = (isStop) => {
const {rowDraggAble} = this.props;
const {notRowDrag} = this.state;
if(rowDraggAble && isStop!== notRowDrag) {
this.setState({
notRowDrag: isStop
})
}
}
set =(fn)=> { set =(fn)=> {
this.clear(); this.clear();
this._timeout = window.setTimeout(fn, 300); this._timeout = window.setTimeout(fn, 300);
@ -452,6 +462,7 @@ class TableRow extends Component{
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth ,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth
} = this.props; } = this.props;
const {notRowDrag} = this.state;
let showSum = false; let showSum = false;
let { className } = this.props; let { className } = this.props;
if (this.state.hovered) { if (this.state.hovered) {
@ -515,6 +526,7 @@ class TableRow extends Component{
lazyStartIndex={lazyStartIndex} lazyStartIndex={lazyStartIndex}
lazyEndIndex={lazyEndIndex} lazyEndIndex={lazyEndIndex}
onPaste={onPaste} onPaste={onPaste}
stopRowDrag={this.stopRowDrag}
col={i} col={i}
/> />
); );
@ -526,9 +538,14 @@ class TableRow extends Component{
if(record && record._checked){ if(record && record._checked){
className += ' selected'; className += ' selected';
} }
if(rowDraggAble && !useDragHandle && !notRowDrag) {
className += ' row-dragg-able'
}
return ( return (
<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}