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

2015-07-20 19:49:07 暂无评论阳光倾城网络前端 1,231

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

如下图所示：

需要导入‘treegrid-dnd.js’文件
<script type=”text/javascript” src=”treegrid-dnd.js”></script>

启用拖放
<table title=”Folder Browser” class=”easyui-treegrid” style=”width:x;height:x”

data-options=”

data: data,

rownumbers: true,

idField: ‘id’,

treeField: ‘name’,

onLoadSuccess: function(row){

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

}

“>

<thead>

<tr>

<th data-options=”field:’date'” width=”>Modified Date</th>

</tr>

</thead>

</table>

事件

下列事件扩展自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（可拖放的树形表格）》
本文地址：http://www.xiupu.net/archives-2643.html
关注公众号：