jstree的右键菜单增删改案例（修改默认contextmenu插件文本）

最新推荐文章于 2022-02-09 16:29:59 发布

往前的

最新推荐文章于 2022-02-09 16:29:59 发布

阅读量9.5k

点赞数 6

分类专栏： jsTree 文章标签： contextmenu 插件 jstree 案例 jquery

本文链接：https://blog.csdn.net/m0_37355951/article/details/77943933

版权

jsTree 专栏收录该内容

8 篇文章

订阅专栏

概述：

默认jstree的插件文本是英文，而且是固定create，rename，remove等等，如果想要个性化，修改这些文本内容，该如何做？

1、先决条件：

1、下载jstree最新包，笔者使用的3.3.4版本
2、下载boostrap最新包（笔者使用的3.3.7版本）
3、下载最新版本jquery

2、引入对应css文件和js文件

引入jstree默认css文件

引入boostrap默认css文件：这个是为了显示右键菜单图标，如果你不要显示图标就可以不同引入

 <link rel="stylesheet"
	href="../jstree/themes/default/style.min.css"></link>
  <link rel="stylesheet"
	href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"></link>

引入js

引入jquery.js

引入jstree.js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="../lib/jstree.min.js"></script>

3、自己需要写js文件

html标签：

<div id="container"></div>

自己写js:

<script type="text/javascript">

	$(function() {
	  $('#container').jstree({
	    'core' : {
	      'data' : [
	        { "text" : "根节点", "children" : [
	            { "text" : "子节点1" },
	            { "text" : "字节点2" }
	          ]
	        }
	      ],
	      "check_callback" : true
	    },
	    "checkbox" : {
	        "keep_selected_style" : false
	      },
	      "contextmenu":{
	    	select_node:false,
	    	show_at_node:true,
	    	items:{
                "新建设备":{  
                    "label":"新建菜单",  
                    "icon"				: "glyphicon glyphicon-plus",
                    "action":function(data){
                    	var inst = $.jstree.reference(data.reference),
						obj = inst.get_node(data.reference);
					inst.create_node(obj, {}, "last", function (new_node) {
						try {
							new_node.text="新建设备";
							inst.edit(new_node);
						} catch (ex) {
							setTimeout(function () { inst.edit(new_node); },0);
						}
					});
                    }  
                },
                "修改设备":{
                	"separator_before"	: false,
					"separator_after"	: false,
					"_disabled"			: false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
					"label"				: "修改设备",
					"shortcut_label"	: 'F2',
					"icon"				: "glyphicon glyphicon-leaf",
					"action"			: function (data) {
						var inst = $.jstree.reference(data.reference),
							obj = inst.get_node(data.reference);
						inst.edit(obj);
					}
                },
                "删除设备":{
                	"separator_before"	: false,
					"icon"				: false,
					"separator_after"	: false,
					"_disabled"			: false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
					"label"				: "删除设备",
					"icon"				:"glyphicon glyphicon-remove",
					"action"			: function (data) {
						var inst = $.jstree.reference(data.reference),
							obj = inst.get_node(data.reference);
						if(inst.is_selected(obj)) {
							inst.delete_node(inst.get_selected());
						}
						else {
							inst.delete_node(obj);
						}
					}
                }
	    	}
	      },
	      
	      "plugins" : [ "checkbox","contextmenu" ]
	  });
	});
	
	</script>

备注：

1、core：表示jstree核心参数，主要设置两个data：也就是初始化时候jstree样子，check_callback：必须为true（否则增删改动作没有反应，这些动作都是需要回调。）
2、text就是显示文本信息， children就是它子节点
3、checkbox（复选框插件）表示条目前面出现复选框，keep_selected_style：true表示显示选中背景颜色效果，false没有背景颜色效果
4、contextmenu:就是右键菜单插件，select_node：true表示右键时候选中该条目，false表示不选中,show_at_node:true,表示在该节点进行展示
5、items就是自定义右键菜单选项，label是右键菜单选项的名称。icon就是选项前面的图标，action点击选项触发事件，separator_before/after就是分隔符,disabled:是否禁用该条目，shortcut_label表示快捷键
6、new_node.text="新建设备";表示修改默认（New Node）节点文本
7、plugins:表示你使用那些插件（复选框和右键菜单）
8、其他可以参考jstree.js源码

完整代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>jstree contextmenu插件</title>
   <link rel="stylesheet"
	href="../jstree/themes/default/style.min.css"></link>
  <link rel="stylesheet"
	href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"></link>
</head>
<body >
	<div id="container">
						
					</div>
<!-- 引入jquery.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
	<script src="../lib/jstree.min.js"></script>
	<script type="text/javascript">

	$(function() {
	  $('#container').jstree({
	    'core' : {
	      'data' : [
	        { "text" : "根节点", "children" : [
	            { "text" : "子节点1" },
	            { "text" : "字节点2" }
	          ]
	        }
	      ],
	      "check_callback" : true
	    },
	    "checkbox" : {
	        "keep_selected_style" : false
	      },
	      "contextmenu":{
	    	select_node:false,
	    	show_at_node:true,
	    	items:{
                "新建设备":{  
                    "label":"新建菜单",  
                    "icon"				: "glyphicon glyphicon-plus",
                    "action":function(data){
                    	var inst = $.jstree.reference(data.reference),
						obj = inst.get_node(data.reference);
					inst.create_node(obj, {}, "last", function (new_node) {
						try {
							new_node.text="新建设备";
							inst.edit(new_node);
						} catch (ex) {
							setTimeout(function () { inst.edit(new_node); },0);
						}
					});
                    }  
                },
                "修改设备":{
                	"separator_before"	: false,
					"separator_after"	: false,
					"_disabled"			: false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
					"label"				: "修改设备",
					"shortcut_label"	: 'F2',
					"icon"				: "glyphicon glyphicon-leaf",
					"action"			: function (data) {
						var inst = $.jstree.reference(data.reference),
							obj = inst.get_node(data.reference);
						inst.edit(obj);
					}
                },
                "删除设备":{
                	"separator_before"	: false,
					"icon"				: false,
					"separator_after"	: false,
					"_disabled"			: true, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
					"label"				: "删除设备",
					"icon"				:"glyphicon glyphicon-remove",
					"action"			: function (data) {
						var inst = $.jstree.reference(data.reference),
							obj = inst.get_node(data.reference);
						if(inst.is_selected(obj)) {
							inst.delete_node(inst.get_selected());
						}
						else {
							inst.delete_node(obj);
						}
					}
                }
	    	}
	      },
	      
	      "plugins" : [ "checkbox","contextmenu" ]
	  });
	});
	
	</script>
</body>
</html>

效果：