Easyui学习之右键菜单easyui-menu

时间:2021-04-13 17:01:30

 

 

所谓右键菜单,就是说在对应项右键才显示出菜单选项……

这里实在easyui-tree的基础上实现右键节点显示菜单的功能,如下:

Easyui学习之右键菜单easyui-menu

来看具体实现的步骤及使用方法:

1、在ul上定义一个easyui

Easyui学习之右键菜单easyui-menu

2、写菜单内容

Easyui学习之右键菜单easyui-menu

3、在初始化tree的方法里定义一个上下文菜单方法,用以右键展示菜单

Easyui学习之右键菜单easyui-menu

      (1)上面function的参数e表示右键触发的事件对象,封装了一些事件信息,如在哪个节点右键等

      (2)上面function的参数node表示当前右键的节点对象

      (3)依次是执行默认方法,选中节点对象(使变蓝),然后是‘show‘方法,方法体是坐标,表示在对应的

               节点对象的同一x轴处任何处点击都会展示菜单

4、接着是点击菜单事件,添加选项实现展示

     在第二步的菜单里定义了一个点击事件,当点击三个定义事件时即会触发

Easyui学习之右键菜单easyui-menu

     下面展示添加

(1)当触发上面的点击事件后,这里定义了一个方法,item是菜单项(添加、重命名……),红色标记1处

          先是判断是否为添加,然后追加子节点;标记2处判断当前点击菜单所在的节点(所追加子节点的父节点)

          是否为null,不为空就置为当前节点对象(其实就是不变);标记3处定义添加节点的信息,id为0要保证数

          据库的id没有0,因为下面会根据id为0去选中添加的节点;标记4处找id为0的节点;标记5选中该节点开始编辑。

Easyui学习之右键菜单easyui-menu

 

 5、在第3步的初始化tree的方法里还要定义一个编辑结束(鼠标点击其它地方)触发的事件

     (1)参数node表示当前的节点对象;标记1判断是否新增节点;标记2保存数据到后台,注意参数的

               格式,实际上的交互的形式为parentId=node.parentId&name=node.text;标记3、4后台返回更新

               tree,更改节点的id(这里后台可能涉及到主键自增返回)

Easyui学习之右键菜单easyui-menu