bootstrap treeview和contextmenu结合实现树节点右键菜单的问题

雾里看花の 2019-06-06 04:44:09
bootstrap treeview用的是1.2版本,bootstrap contextmenu用的是0.3.4版本

最近在用bootstrap treeview的时候发现没有自带右键菜单功能,所以想着用contextmenu和它结合的方式,然后在测试的时候老是报如下错误:

Uncaught TypeError: Cannot read property 'left' of undefined
at ContextMenu.getPosition (bootstrap-contextmenu.js:165)
at ContextMenu.show (bootstrap-contextmenu.js:54)
at HTMLLIElement.f (jquery-2.1.4.min.js:2)
at HTMLLIElement.dispatch (jquery-2.1.4.min.js:3)
at HTMLLIElement.r.handle (jquery-2.1.4.min.js:3)

有没有什么办法解决呢?


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>bootstrap-treeview</title>
<link rel="stylesheet" href="ace/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-treeview-1.2.0/bootstrap-treeview.min.css">
<link rel="stylesheet" href="ace/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="ace/js/bootstrap.min.js"></script>
<script src="bootstrap-treeview-1.2.0/bootstrap-treeview.js"></script>
<script src="bootstrap-contextmenu-0.3.4/bootstrap-contextmenu.js"></script>
<style>
#right-menu ul{
min-width: 80px;
}
#right-menu li{
cursor: pointer;
}
</style>
</head>
<body>
<div id="tree" style="margin: 50px 50px 50px 50px;width: 250px;"></div>
<div id="right-menu">
<ul class="dropdown-menu" role="menu" style="color: black">
<li><a tabindex="-1" data-type="add">新增</a></li>
<li><a tabindex="-1" data-type="modify">修改</a></li>
<li><a tabindex="-1" data-type="delete">删除</a></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$('#tree').treeview({
data: treeData,
showCheckbox: true,
expandIcon: "fa fa-plus-square-o",
collapseIcon: "fa fa-minus-square-o",
uncheckedIcon: "fa fa-square-o",
checkedIcon: "fa fa-check-square-o"
});

$(".node-tree").contextmenu({
target: '#right-menu',
before: function (e, context, target) {
// 右键选中的节点实现单击效果
context.context.click();
},
onItem: function (context, e) {

}
});

});

var treeData = [
{text: "1节点", id: "1", icon: "fa fa-search",state: {checked: true,selected: true}},
{
text: "2节点",
id: "2",
icon: "fa fa-send",
nodes: [
{text: "2.1节点", id: "2.1"},
{text: "2.2节点", id: "2.2"}
]
},
{
text: "3节点",
id: "3",
icon: "",
nodes: [
{text: "3.1节点", id: "3.1"},
{
text: "3.2节点",
id: "3.2",
nodes: [
{text: "3.2.1节点", id: "3.2.1"},
{text: "3.2.2节点", id: "3.2.2"}
]
}
]
}
]
</script>
</body>
</html>



...全文
498 8 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
你们都是坏人 2019-08-30
  • 打赏
  • 举报
回复
结贴吧。。。。
weixin_44518766 2019-08-30
  • 打赏
  • 举报
回复
结吧
luciferisnotsatan 2019-08-30
  • 打赏
  • 举报
回复
此后三年 2019-08-30
  • 打赏
  • 举报
回复
来了老弟
天亮后说晚安 2019-08-30
  • 打赏
  • 举报
回复
果然C 2019-08-30
  • 打赏
  • 举报
回复
倚栏|听风 2019-08-30
  • 打赏
  • 举报
回复
雾里看花の 2019-06-06
  • 打赏
  • 举报
回复
还有一个问题,手动点击展开后的节点无法绑定右键菜单

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧