js“树”读取xml数据

js|xml|数据

最近看到大家都练习写树，偶也学习学习写了一个，大家多多批评，我好进步。

不过我看了一些树的xml文档都是在xml中就已经有了树的结构，所以我写了一个xml文档不用分层，来生成树的，不过要给每个节点定义编号和父编号。

写得有点糙，大家不要笑话，以后逐渐学习在改进。

演示地址: www.lapuasi.com/javascript/xmltree

使用方法:
var tree = new xmlTree('tree'); //生成对象
tree.mode = 1; //设置初始模式，默认全部关闭。0全部关闭，1全部展开
tree.createTree(); //输出树

Javascript代码:

/* JavaScript Document */

/*
xmlTree v1.2
=================================
Infomation
----------------------
Author   : Lapuasi
E-Mail   : lapuasi@gmail.com
WebSite  : http://www.lapuasi.com/javascript
DateTime : 2005-12-25
Example
----------------------
var tree = new xmlTree('tree'); //生成对象
tree.mode = 1; //设置初始模式，默认全部关闭。0全部关闭，1全部展开
tree.createTree(); //输出树
for Internet Explorer, Mozilla Firefox
*/
function xmlTree(name) {
 this.name         = name;                   //实例名称
 this.xmlFile      = 'xmltree.xml';          //默认xml文件
 this.iconPath     = 'images/'               //默认图标路径
 this.iconFolder   = 'tree_icon_folder.gif'; //默认文件夹图标
 this.iconFile     = 'tree_icon_file.gif';   //默认文件图标
 this.iconOpen     = 'tree_arrow_open.gif';  //默认箭头展开图标
 this.iconOver     = 'tree_arrow_over.gif';  //默认箭头活动图标
 this.iconClose    = 'tree_arrow_close.gif'; //默认箭头关闭图标
 this.mode         = 0;                      //初始模式，默认全部关闭。0全部关闭，1全部展开
 this.html         = '';                     //最终输出html代码
 this.prevTip      = null;                   //上一次被显示的tip的时间编号 (内部使用)
 this.prevSelected = null;                   //上一次被选中的节点的自动编号 (内部使用)
}
xmlTree.prototype.createXMLDOM = function() { //生成XMLDOM对象
 var xmldom;
 if (window.ActiveXObject){
  var xmldom = new ActiveXObject("Microsoft.XMLDOM");
 } else {
  if (document.implementation && document.implementation.createDocument) {
   var xmldom = document.implementation.createDocument("","doc",null);
  }
 }
 xmldom.async = false;
 xmldom.resolveExternals = false;
 xmldom.validateOnParse = false;
 xmldom.preserveWhiteSpace = true;
 return xmldom;
}
xmlTree.prototype.createTree = function() { //生成并打印
 var xmldom = this.createXMLDOM();
 document.write('<div id="tree"><\/div>'); // 树所用层
 document.write('<div id="treeTip"><\/div>'); //提示所用层
 document.getElementById('treeTip').style.visibility = 'visible';
 document.getElementById('treeTip').style.display = 'none';
 if (xmldom.load(this.xmlFile)) {
  this.createNodes(xmldom);
 } else {
  this.html = 'Load XML Error';
 }
 document.getElementById('tree').innerHTML = this.html;
 return;
}
xmlTree.prototype.getFirstChildData = function(obj, name) { //取得指定名称节点的第一个子节点的数据
 var result = '';
 if (typeof(obj) == 'object' && name != null && name != '') {
  var node = obj.getElementsByTagName(name);
  if (node != null && node.length > 0) {
   result = node[0].firstChild.data;
  }
 }
 return result;
}
xmlTree.prototype.checkChildNodes = function(obj, id) { //检测是否有分支
 var result = false;
 var nodes = obj.getElementsByTagName('node');
 if (nodes != null && nodes.length > 0) {
  //var pid;
  for (var i = 0; i < nodes.length; i++) {
   //pid = nodes[i].getAttribute('parentid');
   if (nodes[i].getAttribute('parentid') == id) {
    result = true;
    break;
   }
  }
 }
 return result;
}
xmlTree.prototype.createNodes = function(obj, id) { //生成指定编号节点的树
 if (typeof(id) == 'undefined') id = null; //如果没有id传入则为根节点
 var nodes = obj.getElementsByTagName('node');
 if (nodes != null && nodes.length > 0) {
  var modeClass, modeSrc, iconClass, iconSrc;
  var nid, npid, nname, nicon, nlink, ntarget, nexplain, hasChildNodes;
  
  //判断模式类型，并应用样式
  modeClass = 'close';
  modeSrc = this.iconPath + this.iconClose;
  if (this.mode == 1) {
   modeSrc = this.iconPath + this.iconOpen;
   modeClass = 'open';
  }
  if (id == null) modeClass = 'open'; //若为根节点则显示
  this.html += '<ul id="tree_' + id + '_c" class="' + modeClass + '">';

  for (var i = 0; i < nodes.length; i++) {
   npid = nodes[i].getAttribute('parentid');
   if (npid == id) {
    //初始化
    modeClass = 'close'; iconClass = 'icon-file'; iconSrc = this.iconPath + this.iconFile;

    //取得节点编号并检测
    nid = nodes[i].getAttribute('id');
    this.html += '<li id="tree_' + nid + '"><span >';
    
    //取得节点自定义图标
    //判断是否含有子节点，并确定箭头和图标的图片及样式
    nicon = this.getFirstChildData(nodes[i], 'icon');
    hasChildNodes = this.checkChildNodes(obj, nid);
    if (hasChildNodes) {
     iconClass = '';
     iconSrc = this.iconPath + this.iconFolder;
     this.html += '<img id="tree_' + nid + '_a" src="' + modeSrc + '" class="arrow" \/>'; //箭头
    }
    if (nicon != '') iconSrc = nicon;
    this.html += '<img id="tree_' + nid + '_i" src="' + iconSrc + '" class="' + iconClass + '" \/>'; //图标

    //取得节点连接
    nlink = this.getFirstChildData(nodes[i], 'link');
    if (nlink != '') {
     nlink = ' href="' + nlink + '"';
    } else {
     nlink = ' href="javascript:;"';
    }

    //取得节点目标
    ntarget = this.getFirstChildData(nodes[i], 'target');
    if (ntarget != '') {
     ntarget = ' target="' + ntarget + '"';
    }

    //取得节点说明
    nexplain = this.getFirstChildData(nodes[i], 'explain');
    if (nexplain != '') {
     nexplain = ' '
    }

    //取得节点名称
    nname = this.getFirstChildData(nodes[i], 'name');
    this.html += '<a id="tree_' + nid + '_l" ' + nlink + ntarget + nexplain + '>' + nname + '<\/a><\/span>';

    //obj.documentElement.removeChild(nodes[i]);
    if (hasChildNodes) this.createNodes(obj, nid); //迭代子节点

    this.html += '<\/li>';
   }
  }
  this.html += '<\/ul>';
 }
 return;
}
xmlTree.prototype.action = function(obj, e) { //节点操作
 e = e ? e : (window.event ? window.event : null); //获取操作类型
 e = e.type;
 if (obj.tagName == 'A') {
  try { this.prevSelected.className = '';}
  catch(e) {}
  this.prevSelected = obj;
  obj.className = 'selected';
 }
 if (obj.tagName == 'SPAN') {
  var arrow = obj.firstChild; //取得箭头对象
  var borther = obj;
  while (borther.tagName != 'UL') { //取得分支对象
   borther = borther.nextSibling;
   if (borther == null) break;
  }
  if (borther != null) {
   switch (e) { //检测操作类型并执行相应代码
    case 'click':
     if (borther.className == 'open') {
      borther.className = 'close';
      arrow.src = this.iconPath + this.iconClose;
     } else {
      borther.className = 'open';
      arrow.src = this.iconPath + this.iconOpen;
     }
     break;
    case 'mouseover':
     if (arrow.tagName == 'IMG' && borther.className == 'close') {
      arrow.src = this.iconPath + this.iconOver;
     }
     break;
    case 'mouseout':
     if (arrow.tagName == 'IMG' && borther.className == 'close') {
      arrow.src = this.iconPath + this.iconClose;
     }
     break;
   }
  }
 }
 return;
}
xmlTree.prototype.treeTips = function(msg) { //提示栏
 if (this.prevTip != null) clearTimeout(this.prevTip);
 var obj = document.getElementById('treeTip');
 if (obj != null) {
  if (this.treeTips.arguments.length < 1) { // hide
   obj.style.display = 'none';
  } else { // show
   obj.innerHTML = msg;
   this.prevTip = setTimeout('document.getElementById("treeTip").style.display = "block"',300);
   document.onmousemove = this.moveToMouseLoc;
  }
 }
 return;
}
xmlTree.prototype.moveToMouseLoc = function(e) { //移动到鼠标所在位置
 var obj = document.getElementById('treeTip');
 if (obj != null) {
  var offsetX = -10, offsetY = 20;
  var x = 0, y = 0;
  if (window.event) {
   x = event.x + document.body.scrollLeft;
   y = event.y + document.body.scrollTop;
  } else {
   x = e.pageX;
   y = e.pageY;
  }
  obj.style.left = x + offsetX + 'px';
  obj.style.top = y + offsetY + 'px';
 }
 return;
}

xml 数据:

<?xml version="1.0" encoding="utf-8"?>

<!--
CODE BY Lapuasi.com [2005-12-14]

Explain:
===================================================
node 为树的一个节点，具有以下属性和内容
 属性
  id: 编号，如果不唯一，只取第一个，其余被忽略 (必须, 可以是任意字符组合)
  parentid: 父编号，没有则为父节点 (可选, 可以是任意字符组合)
 内容
  name: 名称 (必须)
  link: 连接 (可选)
  target: 目标 (可选)
  icon: 图标 (可选)
  explain: 说明 (可选)
-->

<root>
 <node id="n1">
  <name>我的电脑</name>
  <icon>images/tree_icon_computer.gif</icon>
  <explain>显示连接到此计算机的驱动器和硬件</explain>
 </node>
 <node id="2" parentid="n1">
  <name>硬盘驱动器 (C:)</name>
  <icon>images/tree_icon_driver.gif</icon>
 </node>
 <node id="3">
  <name>网上邻居</name>
  <icon>images/tree_icon_net.gif</icon>
  <explain>显示到网站，网络计算机和FTP站点的快捷方式</explain>
 </node>
 <node id="4" parentid="n1">
  <name>硬盘驱动器 (D:)</name>
  <icon>images/tree_icon_driver.gif</icon>
 </node>
 <node id="5" parentid="2">
  <name>Windows</name>
 </node>
 <node id="6" parentid="3">
  <name>menu6</name>
 </node>
 <node id="7" parentid="3">
  <name>menu7</name>
 </node>
 <node id="8" parentid="3">
  <name>menu8</name>
 </node>
 <node id="9" parentid="7">
  <name>menu9</name>
 </node>
 <node id="10">
  <name>回收站</name>
  <icon>images/tree_icon_recycler.gif</icon>
  <explain>包含您已经删除的文件和文件夹</explain>
 </node>
 <node id="11" parentid="5">
  <name>system32</name>
 </node>
 <node id="12" parentid="11">
  <name>system.dll</name>
  <link>http://www.lapuasi.com</link>
  <target>_blank</target>
 </node>
 <node id="13" parentid="7">
  <name>menu13</name>
 </node>
 <node id="14" parentid="n1">
  <name>DVD 驱动器</name>
  <icon>images/tree_icon_cdrom.gif</icon>
 </node>
</root>

时间： 2024-10-26 05:48:28

js“树”读取xml数据的相关文章

用php读取xml数据

xml|数据 今天工作上碰到一个问题 由于我们的项目数据太少 所以需要从web search那边借调数据,他们只给我们提供了一个xml的接口.因此,我们需要把xml的数据转化成html呈现给大家.由于项目是基于php的,所以就摒弃了用js来读取xml选择了继续使用php.不过,我以前从来没有做过此类的尝试 所以找了很多网上资料同时参照了php的工作手册,发现在php4的环境下 用parser函数是一个比较好的选择(当然也可以用dom 但是需要对服务器重新进行配置 php5对dom支持得比较好).

通过实例学习ASP读取XML数据文件的方法

xml|数据 通过实例学习ASP读取XML数据文件的方法,希望大家能很快掌握,提供两段代码. 分别保存下面两段代码,一个保存为readxml.asp另一个保存为test.xml,放在同一个目录下面,调试程序即可,在程序里面我已经做了解释,读取代码可以做成一个readxml的函数,通过使用输入的参数而读取xml不同数据记录的不同的值.这段程序的改编来自互联网,有什么出入请见谅. readxml.asp <%dim xml,objNode,objAtr,nCntChd,nCntAtrSet xml=

webservice返回xml数据读取 XML 数据时，超出最大字符串内容长度配额 (8192)。

问题描述 webservice返回xml数据读取 XML 数据时,超出最大字符串内容长度配额 (8192). webservice返回xml数据读取 XML 数据时,超出最大字符串内容长度配额 (8192).通过更改在创建 XML 读取器时所使用的 XmlDictionaryReaderQuotas 对象的 MaxStringContentLength 属性,可增加此配额 ,怎么解决?谢谢了 麻烦带具体的步骤代码 解决方案 读取 XML 数据时,超出最大字符串内容长度配额 (8192).读取 X

php读取xml数据后出问题

问题描述 php读取xml数据后出问题 从xml读取的数据b=array(21,22,23).用in_array(a,b)读取,为什么只能读第一个数.如果a=21就是true,a=22或者23就是false.这是编码问题吗? 解决方案 xml读取出来后是string类型.你的a是int类型

ReadXml方法读取xml数据出错

readxml方法读取xml数据出错 string xmlcode = file.readalltext("aa.xml"); file.writealltext("aa.xml", xmlcode.replace("&", "&"));//注意这一段 table.readxml("aa.xml"); /* & 在 xml 中是特殊字符,使用它要转义 & -> &

java socket 用数组缓冲循环读取xml数据随机个别中文乱码

问题描述 javasocket用数组缓冲循环读取xml数据随机个别中文乱码关键代码byte[]buf=newbyte[1024]while(...){len=in.read(-)stringbuilder.append(newstring(buf,0,len,"gb2312"))}注意,是最终结果随机个别中文乱码谢谢 解决方案 解决方案二:这样当然会随机乱码,直接以字符流读取就好了.如果你还是要用字节流读取的话,那你要一次性把所有的字节全部读取之后,然后再转成字符串就好了.乱码的原因是

javascript 读取XML数据，在页面中展现、编辑、保存的实现_javascript技巧

首先考虑用什么方法做,考虑到三个方式:1.C#拼HTML构造table,修改和保存通过Ajax实现.2.XML+XSL,展现和修改用两个XSL文件来做,Ajax修改.保存XML.3.GridView控件. 经过细致考虑,首先第三方案GridView控件满足不了需求,因为XML格式多样,可能涉及到很多的行.列合并和行.列表头合并.第一方案太麻烦,坐起来是细致活和体力活,需求变动后不好修改.所以选择第二方案.开始学习XPath.XSLT.AJAX用js异步调用一般处理文件(ashx)的方式. 1.实

ASP读取XML数据文件的方法

xml|数据 分别保存下面两段代码,一个保存为readxml.asp另一个保存为test.xml,放在同一个目录下面,调试程序即可,在程序里面我已经做了解释,读取代码可以做成一个readxml的函数,通过使用输入的参数而读取xml不同数据记录的不同的值.这段程序的改编来自互联网,有什么出入请见谅. readxml.asp以下是引用片段:<% dim xml,objNode,objAtr,nCntChd,nCntAtr Set xml=Server.CreateObject("Microso

代码详解：ASP读取XML数据文件的方法

xml|数据|详解 分别保存下面两段代码,一个保存为readxml.asp另一个保存为test.xml,放在同一个目录下面,调试程序即可,在程序里面我已经做了解释,读取代码可以做成一个readxml的函数,通过使用输入的参数而读取xml不同数据记录的不同的值.这段程序的改编来自互联网,有什么出入请见谅. readxml.asp<%dim xml,objNode,objAtr,nCntChd,nCntAtrSet xml=Server.CreateObject("Microsoft.XMLD