站内搜索: 请输入搜索关键词

当前页面: 开发资料首页 → Javascript 专题 → js“树”读取xml数据

js“树”读取xml数据

摘要: js“树”读取xml数据
<tr> <td>

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

不过我看了一些树的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>'); // 树所用层
document.write('
<\/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 += '
    ';

    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 += '

  • ';

    //取得节点自定义图标
    //判断是否含有子节点，并确定箭头和图标的图片及样式
    nicon = this.getFirstChildData(nodes[i], 'icon');
    hasChildNodes = this.checkChildNodes(obj, nid);
    if (hasChildNodes) {
    iconClass = '';
    iconSrc = this.iconPath + this.iconFolder;
    this.html += ''; //箭头
    }
    if (nicon != '') iconSrc = nicon;
    this.html += ''; //图标

    //取得节点连接
    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 = ' onmouseover="' + this.name + '.treeTips(\'' + nexplain + '\');" onmouseout="' + this.name + '.treeTips();"'
    }

    //取得节点名称
    nname = this.getFirstChildData(nodes[i], 'name');
    this.html += '' + 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"?>

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



    我的电脑
    images/tree_icon_computer.gif
    显示连接到此计算机的驱动器和硬件


    硬盘驱动器 (C:)
    images/tree_icon_driver.gif


    网上邻居
    images/tree_icon_net.gif
    显示到网站，网络计算机和FTP站点的快捷方式


    硬盘驱动器 (D:)
    images/tree_icon_driver.gif


    Windows


    menu6


    menu7


    menu8


    menu9


    回收站
    images/tree_icon_recycler.gif
    包含您已经删除的文件和文件夹


    system32


    system.dll
    <link>>http://www.lapuasi.com
    _blank


    menu13


    DVD 驱动器
    images/tree_icon_cdrom.gif

    </td> </tr> </table>
    ↑返回目录
    前一篇: 实现一个日期下拉菜单
    后一篇: 歌词同步关键技术