【文件属性】:
文件名称:DhtmlxTree-dhtmlxmenu实现在节点上右键弹出菜单
文件大小:183KB
文件格式:RAR
更新时间:2013-12-14 10:42:51
dhtmlxtree,dhtmlxmenu,树,菜单,右键
对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 获取当页面上鼠标(光标)位置
页面上放置两个隐藏域存放鼠标的位置:
网友评论
- 学习了,不错
- 不是我想要的效果,谢谢分享
- 挺好的,免费,跟官网的差不多
- 已经用到项目中了,谢谢楼主
- 參考,學習學習下
- 确实感觉菜单有点不灵活 不过能参考一下
- 很好用,做页面很好
- 还不错,就是不太灵活,感谢楼主
- 感谢楼主分享,初学者适用
- 收费有它收费的道理,不过代码有参考的地方!
- 要钱的东西啊,免费的受限
- 框架代码有了即可。自己消化消化
- 有一定参考价值
- 虽然是有菜单,但是还不是很灵活
- 感觉菜单不灵活
- 还不错,值得下载
- 东西看上去不错,但是实际用还差点火候
- 虽然是有菜单,但是还不是很灵活
- 这个不错,我采用了里面的相关方法,节点树的问题都基本解决,但是增加还有一点不是很理想,非常感谢楼主
- 修改了还是可以用