dtree+右键菜单 完美结合

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

    实现原理：

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

  实现步骤：

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

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

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

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

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

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

 （代码为 asp.net 示例，如果是web开发其他语言，也可通过这种原理来轻松实现）

    <!--  先引入dtree 需要的js , css ,图片 等资源；-->

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

   <script language="javascript" type="text/javascript">

       <!-- 在页面生成一个 dtree 树； -->

        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); 
        

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

      
       //点击节点后，将右键菜单更改为自定义的菜单
       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;
            }
       }
       

      <!--  用户单击页面除了自定义右键菜单以外的地方，右键菜单消失，并且还原页面本来的右键菜单 的JS函数s -->
        
       //单击页面上除了菜单以外的地方，隐藏右键菜单
       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>    
   
<!-- 右键菜单结束 -->