坐倚北风

A-A+

JavaScript使用结构树显示XML数据

2018年02月17日 脚本 阅读 868 views 次

在网页中的调用示例如下所示：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>JavaScript + XML树型菜单</title>
  7. <link href="menu.css" rel="stylesheet" style="text/css"/>
  9. <script type="text/javascript" src="menu.js"></script>
  11. </head>
  12. <body>
  13. javascript使用结构树显示xml数据示例
  14. <ul id="tree">
  15. </ul>
  17. <script language="javascript" type="text/javascript">
  18. treeMenu("tree"); //树
  19. </script>
  21. </body>
  22. </html>

所使用的CSS如下所示：

  1. @charset "UTF-8";
  2. li.plus
  3. {
  4.     list-style-type:none;
  5.     list-style-image:url(Images/treeArrMidClosed.gif); /*展开时图片,如"+"*/
  6.     cursor:hand;
  7. }
  9. li.minus
  10. {
  11.     list-style-type:none;
  12.     list-style-image:url(Images/treeArrMid.gif); /*折叠时图片,如"-"*/
  13.     cursor:hand;
  14. }
  16. li.item
  17. {
  18.     list-style-type:none;
  19.     list-style-image:url(Images/part.gif); /*无子项目时图片*/
  20.     cursor:hand;
  21. }

示例XML文件如下所示：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <menu>
  3. <rootLevel id='2'>
  4. <selfName>美国</selfName>
  5. </rootLevel>
  6. <rootLevel id='1'>
  7. <selfName>中国</selfName>
  8. <level id='4'>
  9. <selfName>河南</selfName>
  10. <parentID>1</parentID>
  11. </level>
  12. <level id='3'>
  13. <selfName>山东</selfName>
  14. <parentID>1</parentID>
  15. <level id='6'>
  16. <selfName>菏泽</selfName>
  17. <parentID>3</parentID>
  18. <level id='8'>
  19. <selfName>曹县</selfName>
  20. <parentID>6</parentID>
  21. </level>
  22. <level id='7'>
  23. <selfName>东明</selfName>
  24. <parentID>6</parentID>
  25. </level>
  26. </level>
  27. <level id='5'>
  28. <selfName>济南</selfName>
  29. <parentID>3</parentID>
  30. </level>
  31. </level>
  32. </rootLevel>
  33. </menu>
上一页 1 2
个人公众号“数字化设计CAX联盟”，欢迎关注，共同交流
标签：
为您推荐：

给我留言

© 坐倚北风 版权所有 严禁镜像复制 苏ICP备15034888号. 基于 Ality 主题定制 AliCMS
联系邮箱：leanwind@163.con，微信公众号：数字化设计CAX联盟

用户登录

分享到：