easyUI 拖动(Drag)和放置(Drop)Tree

最新推荐文章于 2025-11-28 04:56:28 发布

最新推荐文章于 2025-11-28 04:56:28 发布 · 359 阅读

文章标签：

#javascript #ViewUI

本文介绍如何利用EasyUI Tree插件实现节点的拖拽与放置功能，并通过示例代码展示如何配置'dnd'属性以允许用户更改节点位置，以及在放置成功后触发'onDrop'事件进行节点状态保存。

@author YHC

当使用tree插件在一个应用,drag(拖拽) 和 drop(放置)功能是必须允许用户改变节点位置,启用drag 和 drop 操作,所有你需要做的就是为tree插件设置'dnd'属性为true.

创建 Tree

$('#tt').tree({  
    dnd: true,  
    url: 'tree_data.json'  
});

当放置成功在一个tree节点, 'onDrop' 事件将被触发,你应该做一些或更多的操作,例如保存节点状态到远程服务器端,等等..

onDrop: function(targetNode, source, point){  
       var targetId = $(target).tree('getNode', targetNode).id;  
       $.ajax({  
           url: '...',  
           type: 'post',  
           dataType: 'json',  
           data: {  
               id: source.id,  
               targetId: targetId,  
               point: point  
           }  
       });  
   }