Easyui學習之右鍵菜單easyui-menu


 

 

所謂右鍵菜單,就是說在對應項右鍵才顯示出菜單選項……

這里實在easyui-tree的基礎上實現右鍵節點顯示菜單的功能,如下:

來看具體實現的步驟及使用方法:

1、在ul上定義一個easyui

2、寫菜單內容

3、在初始化tree的方法里定義一個上下文菜單方法,用以右鍵展示菜單

      (1)上面function的參數e表示右鍵觸發的事件對象,封裝了一些事件信息,如在哪個節點右鍵等

      (2)上面function的參數node表示當前右鍵的節點對象

      (3)依次是執行默認方法,選中節點對象(使變藍),然后是‘show‘方法,方法體是坐標,表示在對應的

               節點對象的同一x軸處任何處點擊都會展示菜單

4、接着是點擊菜單事件,添加選項實現展示

     在第二步的菜單里定義了一個點擊事件,當點擊三個定義事件時即會觸發

     下面展示添加

(1)當觸發上面的點擊事件后,這里定義了一個方法,item是菜單項(添加、重命名……),紅色標記1處

          先是判斷是否為添加,然后追加子節點;標記2處判斷當前點擊菜單所在的節點(所追加子節點的父節點)

          是否為null,不為空就置為當前節點對象(其實就是不變);標記3處定義添加節點的信息,id為0要保證數

          據庫的id沒有0,因為下面會根據id為0去選中添加的節點;標記4處找id為0的節點;標記5選中該節點開始編輯。

 

 5、在第3步的初始化tree的方法里還要定義一個編輯結束(鼠標點擊其它地方)觸發的事件

     (1)參數node表示當前的節點對象;標記1判斷是否新增節點;標記2保存數據到后台,注意參數的

               格式,實際上的交互的形式為parentId=node.parentId&name=node.text;標記3、4后台返回更新

               tree,更改節點的id(這里后台可能涉及到主鍵自增返回)

 


免責聲明!

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



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