摘要:本文介绍使用ExtJS和Asp.NET实现TreePanel的节点的拖动(Drag&Drop)。例如,拖动节点到另一父节点,插入某节点到另一节点之前/后。
ExtJS+ASP.NET实现Tree节点的拖动(DragDrop)是非常简单的。
首先打开TreePanel的允许DragDrop的选项:
1: var tree = new Ext.tree.TreePanel({
2:
3: …//此处省略
4:
5: enableDD:true, //允许DragDrop
6:
7: …//此处省略
8:
9: })
定义事件:
1: tree.on("dragdrop", treeDragDropHandler);
2:
3: function treeDragDropHandler(t,node,dd,e){
4: alert(node.id); //源节点id
5: alert(node.parentNode.id); //目标父节点id
6: alert(node.nextSibling ? node.nextSibling.id : ""); //下一个节点id,用于拖动插入某节点到另一节点之前/后
7: alert(node.previousSibling ? node.previousSibling.id : ""); //前一个节点id,用于拖动插入某节点到另一节点之前/后
8: //TODO: 此处添加操作,例如保存拖动结果到数据库等!
9:
10: }
这样就可以实现TreePanel的节点的拖动(Drag&Drop)。例如,拖动节点到另一父节点,插入某节点到另一节点之前/后。