javascript树型菜单(Dtree和Xtree)

树型菜单是我们在开发中经常用到的数据组合和显示方式, dTree(http://www.destroydrop.com/javascripts/tree/) dTree是一种免费的javascript树型菜单, 它支持ie5+, ns 6+, Opera 7+以及Mozilla浏览器 使用简单: 引入树, 在head中加入dtree.js和dtree.css(注意要把js,css和img放到相应目录), 如下所示: 实例化树并显示

open all | close all

add方法的参数说明 id:当前节点标识, pid:父节点标识, name:当前节点名字, url:当菜单被点击时响应的超链接, title:提示语, target:在目标窗口打开链接, icon:关闭时的显示图标, iconOpen:打开时的显示图标, open:默认的打开状态, true打开, false关闭(不过它会读cookie, 所以有时看不出效果) dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) Xtree(http://webfx.eae.net/dhtml/xtree/implementation.html) 相对dTree来说, xTree功能要多一些, 能动态增减树的节点 引入树: 实例化树, 并显示

打开关闭节点:tree.toggle() 打开节点:tree.expand(); 关闭节点:tree.collapse(); 打开所有节点:tree.expandAll(); 关闭所有节点:tree.collapseAll(); 打开子节点:tree.expandChildren(); 关闭子节点:tree.collapseChildren(); 显示当前节点的id:if (tree.getSelected()) { alert(tree.getSelected().id); } 增加节点:addNode() 增加多个节点:addNodes() 删除节点:delNode()