XML to tree XML 树

/*
    版权所有：版权所有(C) 2009 
    系统名称：树型控件
    文件名称：xml2tree.js
    作　　者：DEVIN
    完成日期：2009-12-22
    压缩方式：jspacker
    主    页：http://www.chaige.net
*/
var XML2Tree = function (ini) {
    var $ = document, _this = this, $$ = 'documentElement';
    this.getTitle = ini.getTitle || String;
    this.click = ini.click || String;
    this.box = ini.shell.big ? $.getElementById(ini.shell) : ini.shell;
    this.edit = ini.edit ? true : false;
    this.color = ini.color ? ini.color : '#v';
    this.row = ini.row ? ini.row : '';
    this.box.innerHTML = '<p style="margin-left:10px"><img src="http://www.cnblogs.com/load3.gif" /> loading...<p>';
    this.getValue = ini.getValue || String;
    /* 异步下载Xml (chrome不能创建XMLDOC,使用Ajax构造) */
    this.xml = !!$.all ? (new ActiveXObject('Microsoft.XMLDOM')) : (new XMLHttpRequest());
    this.xml.onreadystatechange = function () {
        if (_this.xml.readyState == 4) {
            _this.box.innerHTML = '';
            _this.addSub($.all ? _this.xml[$$] : _this.xml.responseXML[$$], _this.box)
        }
    }
    if (!!$.all) {
        this.xml.async = true; this.xml.load(ini.url)
    }
    else {
        this.xml.open("GET", ini.url, true); this.xml.send(null)
    };
}
/*
共享接口
*/
XML2Tree.prototype = {
    folder: function (node) {
        var UI = function (_) { return document.createElement(_) }
			, caption = UI('DT'), shell = UI('DL'), body = UI('DD'), $ = XML2Tree.ini;
        shell.appendChild(caption);
        shell.appendChild(body);
        var folderIco = this.selectIco($.folder, $.node, XML2Tree.hasChild(node));
        caption.innerHTML = (this.edit ? '<label>' + this.expand(this.getValue.call(node)) + '</label>' : '')
			    + this.getLineIco(node) + this.getHasIco(node)
			    + folderIco + '<a href="javascript://"><span>'
			    + this.getTitle.call(node) + '</span></a>';
        caption.mapNode = node;
        var co = this.color;
        caption.onmouseover = function () {
            this.style.backgroundColor = co;
        }
        caption.onmouseout = function () {
            this.style.backgroundColor = '';
        }
        return { 'shell': shell, 'caption': caption };
    },
    addSub: function (node, shell) {
        if (node == null) return;
        var nodes = node.childNodes, _tree = this;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType != 1) continue; /* for FF find textNode */
            var _ = this.folder(nodes[i]);
            shell.appendChild(_.shell);
            _.caption.onclick = function (e) {
                var $ = XML2Tree, childShell = $.next(this);
                if (this.mapNode) {
                    var wrap = this.parentNode.getElementsByTagName('DD')[0];
                    if (XML2Tree.hasChild(this.mapNode)) {
                        _tree.addSub(this.mapNode, wrap);
                        $.toggle(this, true)
                    };
                    this.mapNode = null;
                } else {
                    if (!childShell) return;
                    if (XML2Tree.hasChild(childShell)) {
                        var hide = childShell.style.display == 'none';
                        childShell.style.display = hide ? '' : 'none';
                        $.toggle(this, hide);
                    };
                };
                e = e || window.event;
                var sE = e.srcElement || e.target;
                if (sE.tagName.toUpperCase() == 'SPAN') {
                    var title = sE.innerHTML;
                    if (!XML2Tree.hasChild(childShell)) {
                        _tree.click.call(sE, title, false); /* 叶节点单击, this 重置为 span */
                    } else {
                        _tree.click.call(childShell, title, true); /* 文件夹节点单击, this 重置为 子节点的壳DD */
                    }
                }
            };
        };
    },
    getLineIco: function (node) {
        var icos = [], root = node.ownerDocument;
        if (!root) return null;
        node = node.parentNode;
        while (node.parentNode != root) {
            var $ = XML2Tree, img = this.selectIco($.ini.line, $.ini.empty, !!$.next(node));
            icos = [img].concat(icos);
            node = node.parentNode;
        }
        return icos.join('');
    },
    getHasIco: function (node) {
        var last = !!XML2Tree.next(node), $ = XML2Tree.ini;
        return XML2Tree.hasChild(node) ?
			this.selectIco($.plus, $.plusBottom, last) :
			this.selectIco($.join, $.joinBottom, last)
    },
    expand: function (i) {
        var r = this.row, s = [];
        for (var k = 0; k < r.length; k++) {
            var url = r[k][0].replace('{0}', i);
            s.push('<a href="' + url + '">' + r[k][1] + '</a>' + (k == r.length - 1 ? '' : ' | '));
        }
        return s.join('');
    },
    selectIco: function (_1, _2, bool) {
        return '<img src="' + (bool ? _1 : _2) + '" align="absimddle" />'
    }
};
/*
静态接口
*/
XML2Tree.ini = {
    root: 'ui/base.gif',
    folder: 'ui/folder.gif',
    folderOpen: 'ui/folderopen.gif',
    node: 'ui/page.gif',
    empty: 'ui/empty.gif',
    line: 'ui/line.gif',
    join: 'ui/join.gif',
    joinBottom: 'ui/joinbottom.gif',
    plus: 'ui/plus.gif',
    plusBottom: 'ui/plusbottom.gif',
    minus: 'ui/minus.gif',
    minusBottom: 'ui/minusbottom.gif',
    nlPlus: 'ui/nolines_plus.gif',
    nlMinus: 'ui/nolines_minus.gif'
};
/* 图标预载 */
XML2Tree.prevLoad = function () {
    for (var key in this.ini) {
        var $ = new Image();
        $.src = this.ini[key];
    }
};
XML2Tree.next = function (node) {
    var $ = node, _ = 'nextSibling';
    for ($ = $[_]; $; $ = $[_]) {
        if ($.nodeType == 1) { return $ }
     };
    return null;
};
XML2Tree.hasChild = function (node) {
    var $ = node.childNodes;
    for (var i = 0; i < $.length; i++)
        if ($[i].nodeType == 1) return true;
    return false;
};
XML2Tree.toggle = function (node, isOpen) {
    var imgs = node.getElementsByTagName('IMG')
		, f = imgs.length - 1, $ = XML2Tree.ini;
    imgs[f].src = isOpen ? $.folderOpen : $.folder;
    if (this.next(node.parentNode)) {
        imgs[f - 1].src = isOpen ? $.minus : $.plus;
    } else {
        imgs[f - 1].src = isOpen ? $.minusBottom : $.plusBottom;
    }
};
/*
生成实例树 
参数:
url: xml 地址
shell: 树容器
loading: 下载中的效果html
getTitle: 标题来源属性操作 this 重置为 xml node
chick: 节点或者叶节点的单击事件(可得到参数title,isFolder与重置后的this)
*/
XML2Tree.prevLoad();

    <div id="TreeViewTreeView1"></div>
    <div class="xmlToTree">	
        <h3>省市</h3>	
        <div id="TreeView1"></div>
    </div>

        new XML2Tree({
            url: 'city.xml',
            shell: 'TreeView1',
            edit: true,
            color: '#E9F5FF',
            row: [['city.aspx?action=add&i={0}&Language=Chinese', '添加'], ['city.aspx?action=edit&i={0}&Language=Chinese', '修改'], ['city.aspx?action=delete&i={0}&Language=Chinese', '删除']],
            getTitle: function () { return this.getAttribute('t') },
            getValue: function () { return this.getAttribute('v') },
            click: function (title, isFolder) {
            }
        });