关于jstree自定义右键菜单的使用

最新推荐文章于 2023-12-12 11:43:31 发布

码大哈的园子

最新推荐文章于 2023-12-12 11:43:31 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34075559/article/details/77074458

本文介绍如何利用jstree插件为网页构建一个动态树形菜单，并通过JSON数据来初始化树形结构。文章详细展示了如何设置jstree的默认样式、配置选项以及如何实现新增、删除和编辑节点等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="bootstrap_table/css/bootstrap.min.css">
		<link rel="stylesheet" href="bootstrap_table/css/style.min.css">
		<script src="bootstrap_table/js/jquery.min.js"></script>
		<script src="bootstrap_table/js/bootstrap.min.js"></script>
		<script src="bootstrap_table/js/jstree.min.js"></script>

		<title></title>
	</head>

	<body>
		<div id="using_json">

		</div>
	</body>
	<script>
		$.jstree.defaults.core.themes.variant = "large";
		$.jstree.defaults.core.themes.dots = false,
			//		$.jstree.defaults.core.themes.icons = false,
			$.jstree.defaults.core.dblclick_toggle = false,
			$('#using_json').jstree({
				core: {
					check_callback: function(operation, node, parent, position, more) {
						console.log(node);
					},
					data: [
						'Simple root node',
						{
							id: "code",
							text: 'Root node 2',
							icon: "glyphicon glyphicon-folder-open",
							state: {
								'opened': true,
								'selected': true
							},
							children: [{
									text: 'Child 1'
								},
								'Child 2'
							]
						}
					]
				},
				"contextmenu": {
					"items": {
						"新建菜单": {
							"label": "新建标签分类",
							"action": function(data) {
								var ref = $('#using_json').jstree(true),
									sel = ref.get_selected();
								if(!sel.length) {
									return false;
								}
								sel = sel[0];
								sel = ref.create_node(sel, {
//									"type": "file",
									icon: "glyphicon glyphicon-folder-open",
								});
								if(sel) {
									ref.edit(sel);
								}

							}
						},
						"删除菜单": {
							"label": "删除标签分类",
							"action": function(data) {
								console.log(data);
								var ref = $('#using_json').jstree(true),
									sel = ref.get_selected();
								if(!sel.length) {
									return false;
								}
								ref.delete_node(sel);

							}
						},
						"编辑菜单": {
							"label": "编辑标签分类",
							"action": function(data) {
								console.log(data);
								var ref = $('#using_json').jstree(true),
									sel = ref.get_selected();
								if(!sel.length) {
									return false;
								}
								sel = sel[0];
								ref.edit(sel);

							}
						}
					}
				},
				plugins: ["contextmenu"]
			});
	</script>

</html>