几大流行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，有需要的朋友可以留下你的邮箱