几大流行js树形菜单的学习

         最近因项目需要，要求找个好用的菜单生成。网上比较流行的js树形菜单大楷有Dtree，Xtree,XloadTree等。还有一个框架级别的Struts-menu动态数据库菜单。自己分别对这几中写了实现的Demo并结合框架，从中发现Dtree比较好用，用Xtree显示的是固定的树形菜单，XloadTree它是异步的基于Ajax的加载方式，就是每当点击到菜单列表才去加载数据，它有个src属性指定要加载的数据。下面分别看看实现方式：

一 Dtree的实现方式

<script type="text/javascript">

 var  d = new dTree('d');

 d.add('nodeid','parentid','name','url');

 document.write(d);

</script>

只需要传递节点id，父节点id，节点名称，URL地址等几个参数就可以了，根据自己需要可以加参数，具体哪些参数可以加，可参考源代码。若通过后台查询数据库组装成html代码，若在jsp页面使用标签来显示的话，只会看到一推字符串代码

需要指定Struts来解析这段代码（是结合Struts来论）。

 

二 Xloadtree 实现

    <script type="text/javascript">
        webFXTreeConfig.rootIcon  = "images/xp/folder.png";
        webFXTreeConfig.openRootIcon = "images/xp/openfolder.png";
        webFXTreeConfig.folderIcon  = "images/xp/folder.png";
        webFXTreeConfig.openFolderIcon = "images/xp/openfolder.png";
        webFXTreeConfig.fileIcon  = "images/xp/file.png";
        webFXTreeConfig.lMinusIcon  = "images/xp/Lminus.png";
        webFXTreeConfig.lPlusIcon  = "images/xp/Lplus.png";
        webFXTreeConfig.tMinusIcon  = "images/xp/Tminus.png";
        webFXTreeConfig.tPlusIcon  = "images/xp/Tplus.png";
        webFXTreeConfig.iIcon   = "images/xp/I.png";
        webFXTreeConfig.lIcon   = "images/xp/L.png";
        webFXTreeConfig.tIcon   = "images/xp/T.png";
       var tree = new WebFXTree("系统菜单");
       tree.add(new WebFXLoadTreeItem("权限菜单","role.xml"));
     document.write(tree);
  </script>

xml文件内容如下：

     <?xml version="1.0" encoding="UTF-8"?>
       <tree>
       <tree text="角色分配" src="还可以指定xml"></tree>
     </tree>

 

也可以直接组装javascript代码不过比较繁琐，具体如下：

          <script type="text/javascript">
        webFXTreeConfig.rootIcon  = "images/xp/folder.png";
        webFXTreeConfig.openRootIcon = "images/xp/openfolder.png";
        webFXTreeConfig.folderIcon  = "images/xp/folder.png";
        webFXTreeConfig.openFolderIcon = "images/xp/openfolder.png";
        webFXTreeConfig.fileIcon  = "images/xp/file.png";
        webFXTreeConfig.lMinusIcon  = "images/xp/Lminus.png";
        webFXTreeConfig.lPlusIcon  = "images/xp/Lplus.png";
        webFXTreeConfig.tMinusIcon  = "images/xp/Tminus.png";
        webFXTreeConfig.tPlusIcon  = "images/xp/Tplus.png";
        webFXTreeConfig.iIcon   = "images/xp/I.png";
        webFXTreeConfig.lIcon   = "images/xp/L.png";
        webFXTreeConfig.tIcon   = "images/xp/T.png";
        var tree = new WebFXTree("系统菜单");
        var fo= tree.add(new WebFXLoadTreeItem("权限菜单"));

        fo.add(new WebFXLoadTreeItem("角色建立"));

        tree.add(fo);
       document.write(tree);
  </script>

xloadtree具体有哪些参数参照源码。

我有xloadtree,dtree,stuts-menu等集合SSH+proxool+dispaytag的案例Demo，有需要的朋友可以留下你的邮箱

评论

18 楼 孟明视 2016-05-29  

你好。能给我发一份吗： [e-mail]

17 楼 zzjjun0000 2014-11-23  

你好，能不能发我一份，邮箱：[e-mail],谢谢

16 楼 香烟与酒 2014-07-01  

发下源码和例子O(∩_∩)O谢谢。邮箱：[e-mail]

15 楼 shao1020 2014-06-20  

感谢：[e-mail]

14 楼 myredworld 2014-05-04  

着急学习，急切需要,能否提供连数据库的DEMO，作参考急用
[e-mail]

13 楼 小楠1190 2014-04-30  

能发给我么。。。[e-mail]

12 楼 Byd_Bya 2013-10-25  

着急学习，急切需要。

11 楼 禀圣含华 2013-01-05  

我要，[e-mail]  谢谢

10 楼 pig3d2 2011-12-22  

发下源码和例子。邮箱：[e-mail]

9 楼 albertyan 2011-10-13  

学习一下，
[e-mail]
谢谢！！

8 楼 CL315917525 2011-08-01  

你好 不好意思才上网 Demo已经发到你邮箱

7 楼 shenhuawei18 2011-07-28  

楼主你好，最近项目中需要实现一种树，
麻烦发一份，谢谢
[e-mail]

6 楼 CL315917525 2011-06-27  

我建议ztree 或者xloadtree 晚上给你 ！

5 楼 zhonghuazhi 2011-06-27  

[e-mail]

谢谢 能给我一份吗？

现在我用的是 dtree 来实现的 是可以出现  只不过加载的速度非常的慢
我有2000多个节点。 而且分布非常的细。

想看看 动态加载的 demo
谢谢啦

4 楼 CL315917525 2011-06-24  

楼上朋友晚上给你。。。。

3 楼 jie523314 2011-06-24  

[e-mail] 谢谢 发一份

2 楼 zcs_84 2011-02-17  

111111111111

1 楼 younglibin 2011-01-21  

我有xloadtree,dtree,stuts-menu等集合SSH+proxool+dispaytag的案例Demo，有需要的朋友可以留下你的邮箱:
正想研究这个：[e-mail]  谢谢 发一份！