dtree+右键菜单完美结合，超级简单的实现方法

dtree 这个树控件，在WEB 开发中，使用的比较多，而且用起来比较方便，效果显示的也不错。但是在实际的开发中，往往不只是显示而已，要对树进行，增删改操作。如果能有个右键菜单，那就好了，可是，dtree 并没有提供这个功能。

为了实现 dtree + 右键菜单的效果，我也是查阅了一些资料，有的实现起来比较麻烦，我就写了一个相对简单的方法，来实现这种效果。说了这么多，先看下效果吧。

dtree+右键菜单完美结合，超级简单的实现方法 dtree + 右键菜单（完美结合）

图形界面，我没有去修饰，CSS 大家可以自定义来实现更好的效果。

如果这个dtree+右键菜单s效果，就是你要的效果，那请你继续往下看吧。

实现原理：

通过修改页面的右键菜单，来实现。

实现步骤：

1. 先引入dtree 需要的js , css ,图片等资源；

2. 在页面生成一个 dtree 树；

3.在页面上自定义一个右键菜单；

4. 在dtree 的 url属性中：写入[ javascript:函数名(参数名);]此处为，单击树要执行的JS；

5. 此处调用的JS函数，主要功能就是更改页面的右键菜单，让用户在选中的节点上，右键点击时，出现自定义的右键菜单；

6. 再写一个函数，来实现：用户单击页面除了自定义右键菜单以外的地方，右键菜单消失，并且还原页面本来的右键菜单；（此处根据需要进行取舍）

好了，原理和步骤就是这样，现在请看代码：（代码为 asp.net 示例，如果是web开发其他语言，也可通过这种原理来轻松实现）

<%--生成树样式--%>
<link rel="Stylesheet" type="text/css" href="dtree.css" />
<%--生成树文件--%>
<script type="text/javascript" src="dtree.js" ></script>s

tree = new dTree('tree');
tree.config.useStatusText=true;
tree.config.closeSameLevel=true;
tree.config.useCookies = false;

tree.add(0, -1, "Tree example", "javascript: loadMenu('abc');");
tree.add(1, 0, "Node 1", "javascript:loadMenu();");
tree.add(2, 1, "Node 2", "javascript:loadMenu();");
tree.add(3, 1, "Node 3", "javascript:loadMenu();");
tree.add(4, 0, "Node 4", "javascript:loadMenu();");
tree.add(5, 4, "Node 5", "javascript:loadMenu();");
tree.add(6, 4, "Node 6", "javascript:loadMenu();");
tree.add(7, 2, "Node 7", "javascript:loadMenu();");
tree.add(8, 6, "Node 8", "javascript:loadMenu();");
tree.add(9, 1, "Node 9", "javascript:loadMenu();");
tree.add(10, 2, "Node 10", "javascript:loadMenu();");
document.write(tree);

//点击节点后，将右键菜单更改为自定义的菜单
function loadMenu(obj) {
//获取参数
var param = obj;
// ... 通过获取参数来，执行方法
//............................
//............................

//重写 -- 页面点击右键菜单事件
document.oncontextmenu = function() {
//定位,显示
contextmenu.style.posLeft = document.body.scrollLeft + event.x + 10;
contextmenu.style.posTop = document.body.scrollTop + event.y + 10;
contextmenu.style.display = "inline";
return false;
}
}

//单击页面上除了菜单以外的地方，隐藏右键菜单
document.onclick = function() {
//判断单击的是否为右键菜单
//如果不是，隐藏右键菜单
if (document.activeElement != contextmenu) {

contextmenu.style.display = "none"
//还原页面本来的右键菜单
document.oncontextmenu = '';
}

}

//颜色变量
var colorTemp = "";

</script>

<div id="contextmenu" align="center" style="border:1px solid #666666;background:#eeeeee; width:100px;padding:0px;display:none;position:absolute">
<table style=" width:100px; font-size:12px; border:dashed 1px black; ">
<tr>
<td id="modAttribute" onclick="javascript:alert('编辑');" onmouseover="javascript:colorTemp=this.style.backgroundColor;this.style.backgroundColor='#98B4CE';" onmouseout="javascript:this.style.backgroundColor=colorTemp;" style=" background-color:#F5F5D1; height:15px; border-bottom:1px solid black; " > 

编辑

</td>
</tr>
<tr>
<td id="modEvent" onclick="javascript:alert('删除');" onmouseover="javascript:colorTemp=this.style.backgroundColor;this.style.backgroundColor='#98B4CE';" onmouseout="javascript:this.style.backgroundColor=colorTemp;" style=" background-color:#F5F5D1; height:15px; border-top:1px solid black; " > 
删除
</td>
</tr>
</table>
</div>

好了，效果就实现了，是不是很简单啊？嘿嘿

如果是其他语言的WEB 开发，也可以通过这种原理来实现。

好了，就说到这了，大家多多交流，如果有更好的建议，欢迎您提出。

dtree+右键菜单 完美结合，超级简单的实现方法

相关推荐

dtree+右键菜单完美结合，超级简单的实现方法