Dragon
国外主机测评国外主机测评  2019-08-26 02:16 国外主机测评 隐藏边栏  0 
文章评分 0 次,平均分 0.0

jsTree 是一款功能非常强大的jquery树目录插件,基于 mit 开源协议,完全免费。

jsTree 通过添加 Contextmenu plugin 这个扩展来实现树目录右键菜单操作,默认右键菜单如下:

jsTree 自定义右键菜单方法

通过上图可以看到,默认右键菜单是英文版,如果开发过程中有特殊需求的话,我们可以通过重写 contextmenu 属性来自定义 jsTree 右键菜单方法,具体代码如下:

  $('#tree')  .jstree({    'core' : {     'data' : {      'url' : '/admin/Group/jstree' //ajax 加载菜单数据     },     'themes' : {      'responsive' : true     }    },    'plugins' : ['dnd','contextmenu'],//通过添加 contextmenu 扩展来实现右键菜单操作    "contextmenu": {//重写 contextmenu 菜单     "items": {      "create": null,      "rename": null,      "remove": null,      "ccp": null,      "add": {       "label": "新增分组",       "action": function (data) {        var inst = jQuery.jstree.reference(data.reference);        obj = inst.get_node(data.reference);        layer.open({          type: 2,          title: '新增['+obj.text+']的子组',          shadeClose: true,          shade: 0.8,          area: ['380px', '300px'],          content: '/admin/Group/add/id/'+obj.id //iframe 的 url        });       }      },      "edit": {       "label": "修改分组",       "action": function (data) {        var inst = jQuery.jstree.reference(data.reference);        var obj = inst.get_node(data.reference);        var type = obj.id.substr(0,4);        if(type == 'root'){         layer.msg('根节点无法修改',{'time':2000,'icon':2});         return;        }        if(type == 'list'){         layer.msg('考核对象分组请在系统设置-指标分组权限列表中修改',{'icon':2});         return;        }        layer.open({          type: 2,          title: '修改['+obj.text+']的子组',          shadeClose: true,          shade: 0.8,          area: ['380px', '300px'],          content: '/admin/Group/edit/id/'+obj.id //iframe 的 url        });       }      },      "del": {       "label": "删除分组",       "action": function (data) {        var inst = jQuery.jstree.reference(data.reference);        obj = inst.get_node(data.reference);        layer.confirm('确认要删除该分组吗?', {          btn: ['确认','取消'] //按钮        }, function(){          //ajax delete;         });        }, function(){          layer.closeAll();        });       }      }    }  }  })  

最终实现的 jsTree 自定义右键菜单如下:

jsTree 自定义右键菜单方法

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

扫一扫二维码分享