EasyUI-Drag and Drop Rows in TreeGrid(可拖放的树形表格)

可拖放的树形表格可以方便地实现具有树形结构的节点的拖放互动操作。

如下图所示: 


需要导入‘treegrid-dnd.'文件
 

启用拖放

data-options=”

data: data,

rownumbers: true,

idField: ‘id',

treeField: ‘name',

onLoadSuccess: function(row){

$(this).treegrid(‘enableDnd', row?row.id:null);

}

“>


事件

下列事件扩展自Treegrid,以下是新增的事件。

事件名

参数

描述

onBeforeDrag

row

在行开始拖动之前触发,返回false拒绝拖动。

onStartDrag

row

在开始拖动行的时候触发。

onStopDrag

row

在停止拖动行的时候触发。

onDragEnter

targetRow, sourceRow

在行被拖动到目标行内触发,返回false拒绝拖动。

onDragOver

targetRow, sourceRow

在行悬停在目标行内时触发,返回false拒绝拖动。

onDragLeave

targetRow, sourceRow

在行被拖动到目标行内触发。

onBeforeDrop

targetRow,sourceRow,point

在行被释放前触发,返回false拒绝释放。
targetRow
:要释放的目标行。
sourceRow
:被拖动的原始行。
point

指明拖放操作,可用值有:‘top','bottom'

onDrop

targetRow,sourceRow,point

在行被释放的时候触发。
targetRow
:要释放的目标行。
sourceRow
:被拖动的原始行。
point
:指明拖放操作,可用值有:‘top','bottom' 

方法

下列方法扩展自Treegrid,以下是新增的方法。

方法名

方法参数

描述

enableDnd

id

启用拖放行功能。‘id' 参数表明什么行被拖放。如果该参数未指定将启用所有行的拖放功能。

声明: 除非转自他站(如有侵权,请联系处理)外,本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明:转自《EasyUI-Drag and Drop Rows in TreeGrid(可拖放的树形表格)
本文地址:https://www.zhiletu.com/archives-2643.html
关注公众号:智乐兔

赞赏

wechat pay微信赞赏alipay pay支付宝赞赏

上一篇
下一篇

相关文章

在线留言

你必须 登录后 才能留言!

在线客服
在线客服 X

售前: 点击这里给我发消息
售后: 点击这里给我发消息

智乐兔官微