easyui tree 拖拽功能并将数据返回后台保存至数据库

1.需要实现tree的拖拽功能，首先在定义一个tree时候需要设置 dnd : true

2.easyui 给我们提供了一个onDrop : function(target, source, point) 函数，这个函数是当你拖拽树节点后触发，接下来我们就需要把数据返回后台处理

3.这里我们需要理解ondrop 函数传进来的三个变量分别代表什么意思，一旦理解了相信你就知道怎么做后台数据处理了

这里我们参照API：

具体翻译大家可以google一下，这里大家可能会疑惑，target是什么？ point的三个值分别代表什么意思？我第一次用这个函数的时候也纠结了好久，后来慢慢调试发现：

target并不是你拖拽节点到新位置时此节点的父节点，而是最靠近你拖拽节点新位置的节点（就是你拖动时红色横线标识出的节点），而point就是表示你拖拽节点（也就是传进来的source） 相对于target的位置（这里说明target不是一个node 需要getNode获得），它有三个值‘append’ source 插入到target中，top source与target同级，但是source在target上方，同里 bottom在下方，具体看例子：

原先我的菜单结构是：

 

（1）.当我拖动redmine节点到‘常用服务’与‘Custom Workflows’中间时，红线标示的是‘常用服务’，target就是‘常用服务’，当然point值就是append，source是redmine

（2）.当我拖动Latest Issues节点到‘常用服务’与‘redmine’之间时，红线标示的还是‘常用服务’，但此时point就是top。

4.当你明白这些参数后就可以把这些值传回后台处理，后台根据point，target，source 就可以更新菜单层级结构，实现拖拽功能并保存到后台。

具体看代码：

$.ajax({
     url : 'UpdateMenuItemServlet',
     data : {
      target : next.id,
      source : source.id,
      point : point
     },
     dataType : 'json',
     success : function(r){
     }
    });

这样全部步骤就完了。

转载于:https://www.cnblogs.com/liveandevil/archive/2012/09/16/2687117.html