对dhtmlXTree进行的一个小扩展

 

 

需求1:
    动态生成树形菜单，每个节点都有各自的URL地址，单击不同的节点框架页的右侧跳转到该节点所对应的URL。（框架页说明：左边是树形菜单；右边是显示页面相应信息的页面）

分析：
    dhtmlXTree提供了很好的添加，删除节点的方法，故选择dhtmlXTree。
    但是dhtmlXTree不能满足"每个节点都有各自的URL地址，单击不同的节点框架页的右侧跳转到该节点所对应的URL"这点需求，因次想到了对dhtmlXTree进行一个小的扩展，即在其节点对象原有属性的基础上，再添加两个扩展属性。具体操作如下：
1、找到定义节点对象的那个函数（或方法）
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode)
修改为
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode,url,target)

并在方法体中添加赋值语句:this.itemURL=url;this.itemTarget=target;

2、然后修改所有与dhtmlXTreeItemObject有关(直接或者间接相关)的方法:
   _attachChildNode,insertNewItem,insertNewChild,insertNewNext,_recreateBranch,_parseXMLTree
   注：_parseXMLTree方法是与loadXML,loadXMLString相关的。

   在这些方法中生成节点的语句中添加相应的参数和语句，以支持新添加的属性itemURL,itemTarget。



需求2:
    为dhtmlXTree树上的每一个节点添加右键菜单。附:在树上的节点上点右键时才会生成菜单，空白区域单击时不会生成菜单。

分析：
    1、用 dhtmlXTree + dhtmlxmenu 实现。


    2、 用dhtmlxmenu生成菜单的部分代码：
    var menu = new dhtmlXMenuObject();
    menu.setImagePath("imgs/");
    menu.setIconsPath("images/");
    menu.renderAsContextMenu();
    menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime());
    menu.addContextZone("treeboxbox_tree");
       
        menu.addContextZone方法是为了把菜单添加到指定区域。

   3、dhtmlXTreeObject.prototype._createItem方法是构造树形菜单上元素的具体实现方法。看这个方法的具体操作，可以发现它为每一个节点构建了一个table，节点的内容(即名字)放置在一个span中。

   4、考虑到dhtmlxmenu实在指定的区域构建菜单，所以可以为dhtmlXTree树上的每一个节点添加右键事件，在这个右键事件里获得该节点对象所对应的区域，然后在这个区域内构建Menu菜单。

难点和解决方案：

    1、怎样获得dhtmlXTree树上的每一个节点对象所对应的区域?(dhtmlXTreeObject.prototype._createItem方法没有为这个节点的span设置id)

    解决方法：
         在dhtmlXTreeObject.prototype._createItem方法中添加一个为span设置id的语句：
        即：
        在itemObject.span=document.createElement('span');
                  itemObject.span.className="standartTreeRow";
        后，新添加一句
        itemObject.span.id="treeNode_"+itemObject.id;//为这个span新增一个Id属性

    2、为dhtmlXTree树上的每一个节点添加右键事件，在这个右键事件里获得该节点对象所对应的区域，然后在这个区域内构建Menu菜单。

    解决方法：
    a、为dhtmlXTree树上的每一个节点添加右键事件：
        tree.setOnRightClickHandler(treeOnRegihtClick);//右键事件
    b、构建Menu菜单：
        var menu = new dhtmlXMenuObject();
        function treeOnRegihtClick(id){
            alert("右键    "+"    span.id:"+tree.getItem(id).span.id);
            menu.setImagePath("imgs/");
            menu.setIconsPath("images/");
            menu.renderAsContextMenu();
            menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime());
            menu.addContextZone(tree.getItem(id).span.id);alert("width:"+tree.getItem(id).span.clientWidth);
            //var X=tree.getItem(id).span.getBoundingClientRect().left;
            //var Y=tree.getItem(id).span.getBoundingClientRect().top;
            var X=document.getElementById('mouseXPosition').value;//获得鼠标的横坐标位置
            var Y=document.getElementById('mouseYPosition').value;//获得鼠标的纵坐标位置
            menu.showContextMenu(X,Y);//调用showContextMenu方法显示菜单  说明：如果这儿不加上这条语句的话，第一次点击右键时只能生成菜单，但是显示不出菜单，下次点击右键Menu菜单才能弹出。
            //menu._showContextMenu(X,Y,tree.getItem(id).span.id);
        }
    c、用 javascript 获取当页面上鼠标（光标）位置
       <script type="text/javascript">
        // 说明：获取鼠标位置
        function mousePosition(ev){
            if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
            }

            return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
            };
        }
 
        document.onmousemove = mouseMove;
 
        function mouseMove(ev){
                ev = ev || window.event;
                var mousePos = mousePosition(ev);
 
            document.getElementById('mouseXPosition').value = mousePos.x;
            document.getElementById('mouseYPosition').value = mousePos.y;
        }
      </script>
   
      页面上放置两个隐藏域存放鼠标的位置：<input type="hidden" id=mouseXPosition><input type="hidden" id=mouseYPosition>