web开发dtree+右键

最新推荐文章于 2016-01-09 17:41:01 发布

zmbc48

最新推荐文章于 2016-01-09 17:41:01 发布

阅读量604

点赞数

分类专栏： java 文章标签： web Web WEB 页面开发

java 专栏收录该内容

12 篇文章

订阅专栏

dtree+右键菜单完美结合，超级简单的实现方法 .
分类： web开发 .NET 技术 2011-05-31 15:00 648人阅读评论(1) 收藏举报
dtree 这个树控件，在WEB 开发中，使用的比较多，而且用起来比较方便，效果显示的也不错。但是在实际的开发中，往往不只是显示而已，要对树进行，增删改操作。如果能有个右键菜单，那就好了，可是，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>