坐倚北风

A-A+

JavaScript使用结构树显示XML数据

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

本文展示使用JavaScript解析XML数据文件，并以树形结构显示XML数据。当节点包含下级数据时，实现结构树节点的展开和折叠。最终的页面效果如下图所示：

实现的JavaScript代码如下所示：

  1. function createXMLDom() //创建XMLDOM对象函数，跨浏览器解决方案
  2. {
  3.     var xmlDom;
  5.     if (window.ActiveXObject) //IE
  6.     {
  7.         xmlDom = new ActiveXObject("Microsoft.XMLDOM");
  8.         xmlDom.async = false;
  9.         xmlDom.load("menu.xml");
  10.         if (xmlDom.parseError.errorCode != 0)
  11.         {
  12.             window.alert("XML文件加载错误. errorCode：" + xmlDom.parseError.errorCode + " reason：" + xmlDom.parseError.reason);
  13.             return false;
  14.         }
  15.         else
  16.         {return xmlDom;}
  17.     }
  18.     else if (document.implementation && document.implementation.createDocument) //FireFox
  19.     {
  20.         xmlDom = document.implementation.createDocument("","",null);
  21.         xmlDom.async = false;
  22.         xmlDom.load("menu.xml");
  23.         return xmlDom;
  24.     }
  25.     else
  26.     {
  27.         window.alert("不支持XMLDOM对象");
  28.         return false;
  29.     }
  30. }
  32. function treeMenu(ulID)
  33. {
  34.     var xmlDom = createXMLDom(); //创建XMLDOM对象
  35.     var menu = xmlDom.documentElement; //xml文档根节点
  36.     var rootLevels = menu.getElementsByTagName("rootLevel"); //一级分类集合
  38.     var ul = document.getElementById(ulID);
  39.     for (var i=0;i<rootLevels.length;i++) //循环显示一级分类
  40.     {
  41.         var selfID = rootLevels[i].getAttribute("id");
  42.         var selfName = rootLevels[i].getElementsByTagName("selfName")[0].firstChild.nodeValue;
  43.         var li = document.createElement("li");
  44.         li.innerHTML = selfName;
  45.         li.id = selfID;
  47.         var levels = rootLevels[i].getElementsByTagName("level"); //集合
  48.         if (levels.length > 0) //有子类
  49.         {
  50.             li.className = "plus";
  51.             li.onclick = function () {liClick(this,this.id,xmlDom);} //单击事件
  52.         }
  53.         else //无子类
  54.         {
  55.             li.className = "item";
  56.         }
  57.         ul.appendChild(li);
  58.     }
  59. }
  61. function liClick(li,id,xmlDom,event)
  62. {
  63.     var childUL = li.getElementsByTagName("ul"); //ul集合
  65.     if (childUL.length > 0)//折叠
  66.     {closeChild(li,childUL);}
  67.     else //展开
  68.     {openChild(li,id,xmlDom);}
  70.     cancelBuble(event); //plus停止事件冒泡
  71. }
  73. function openChild(li,id,xmlDom) //展开函数
  74. {
  75.     li.className = "minus"; //折叠图标
  77.     var levels = xmlDom.documentElement.getElementsByTagName("level"); //level集合
  78.     var ul = document.createElement("ul");
  79.     for (var m=0;m<levels.length;m++)
  80.     {
  81.         var selfID = levels[m].getAttribute("id");
  82.         var selfName = levels[m].getElementsByTagName("selfName")[0].firstChild.nodeValue;
  83.         var parentID = levels[m].getElementsByTagName("parentID")[0].firstChild.nodeValue;
  85.         if (id == parentID) //属于id子类
  86.         {
  87.             var ulli = document.createElement("li");
  88.             ulli.innerHTML = selfName;
  89.             ulli.id = selfID;
  91.             var childLevels = levels[m].getElementsByTagName("level"); //集合
  92.             if (childLevels.length > 0) //有子类
  93.             {
  94.                 ulli.className = "plus";
  96.                 /*停止事件冒泡，跨浏览器解决方案 Start*/
  97.                 if (window.ActiveXObject) //IE
  98.                 {ulli.onclick = function () {liClick(this,this.id,xmlDom,event);}} //单击事件
  99.                 else //FireFox
  100.                 {ulli.onclick = function (event) {liClick(this,this.id,xmlDom,event);}} //单击
  101.                 /*停止事件冒泡，跨浏览器解决方案 End*/
  102.             }
  103.             else //无子类
  104.             {
  105.                 ulli.className = "item";
  107.                 /*停止事件冒泡，跨浏览器解决方案 Start*/
  108.                 if (window.ActiveXObject) //IE
  109.                 {ulli.onclick = function () {cancelBuble(event);}} //item停止事件冒泡
  110.                 else //FireFox
  111.                 {ulli.onclick = function (event) {cancelBuble(event);}} //item停止事件冒泡
  112.                 /*停止事件冒泡，跨浏览器解决方案 End*/
  113.             }
  115.             ul.appendChild(ulli);
  116.         }
  118.     }
  120.     li.appendChild(ul);
  121. }
  123. function closeChild(li,childUL) //折叠函数
  124. {
  125.     li.className = "plus"; //展开图标
  127.     for (var j=0;j<childUL.length;j++) //循环删除ul,ul可能有子ul、li孙ul、li
  128.     {childUL[j].parentNode.removeChild(childUL[j]);}
  129. }
  131. function cancelBuble(domEvent) //停止事件冒泡函数,跨浏览器解决方案
  132. {
  133.     if (window.ActiveXObject) //IE
  134.     {domEvent.cancelBubble = true;}
  135.     else //FireFox
  136.     {domEvent.stopPropagation();}
  137. }
1 2 下一页
个人公众号“数字化设计CAX联盟”，欢迎关注，共同交流
标签：
为您推荐：

给我留言

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

用户登录

分享到：