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){
}
});
這樣全部步驟就完了。