前端技术 手机教程
程序开发 平面动画
系统软件 CMS教程
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

jsTree自定义右键菜单方法

2017-11-27 15:36:59 来源:零五科技 作者:张三丰

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

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

通过上图可以看到,默认右键菜单是英文版,如果开发过程中有特殊需求的话,我们可以通过重写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

相关文章

零五网,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五网 版权所有 辽ICP备13002105号-1