feat: 自定义某列来控制当前行是否可以拖拽
This commit is contained in:
parent
e8cb440d93
commit
8aebc77957
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue