文件名称:
DhtmlxTree-dhtmlxmenu实现在节点上右键弹出菜单
开发工具:
文件大小: 183kb
下载次数: 0
上传时间: 2010-11-24
详细说明： 对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 获取当页面上鼠标（光标）位置 页面上放置两个隐藏域存放鼠标的位置： ...展开收缩
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行百度。
- 本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录反馈给我们，经确认后退回积分.
- 如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.
