dtree+右键菜单完美结合

来源：互联网发布：非科班出身的美工编辑：程序博客网时间：2024/06/05 07:10

dtree + 右键菜单（完美结合）

实现原理：

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

实现步骤：

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>

dtree+右键菜单 完美结合

dtree+右键菜单完美结合