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){
     }
    });

這樣全部步驟就完了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM