要向jsTree的上下文菜单添加选项,你需要使用contextmenu
插件
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入jsTree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
contextmenu
插件:$(document).ready(function() {
$('#jstree').jstree({
'plugins': ['contextmenu']
});
});
$(document).ready(function() {
$('#jstree').on('create_contextmenu.jstree', function (e, data) {
// 移除默认菜单项
data.obj.children = [];
// 添加自定义菜单项
data.obj.children.push({
text: "自定义选项1",
action: function (data) {
alert("你点击了自定义选项1");
}
});
data.obj.children.push({
text: "自定义选项2",
action: function (data) {
alert("你点击了自定义选项2");
}
});
});
});
在这个示例中,我们首先初始化jsTree并启用contextmenu
插件。然后,我们监听create_contextmenu.jstree
事件,在事件处理函数中,我们移除了默认的菜单项,并添加了两个自定义菜单项。每个菜单项都有一个text
属性和一个action
属性,分别表示菜单项的文本和点击菜单项时执行的操作。
现在,当你在jsTree上右键点击时,将会看到你添加的自定义菜单项。
领取专属 10元无门槛券
手把手带您无忧上云