XML to tree XML 树

展开全文

XML to tree XML 树

前面发了一个 html to tree 再发一个 xml to tree

以下为代码

001/*
002    版权所有：版权所有(C) 2009 
003    系统名称：树型控件
004    文件名称：xml2tree.js
005    作　　者：DEVIN
006    完成日期：2009-12-22
007    压缩方式：jspacker
008    主    页：http://www.
009*/
010var XML2Tree = function (ini) {
011    var $ = document, _this = this, $$ = 'documentElement';
012    this.getTitle = ini.getTitle || String;
013    this.click = ini.click || String;
014    this.box = ini.shell.big ? $.getElementById(ini.shell) : ini.shell;
015    this.edit = ini.edit ? true : false;
016    this.color = ini.color ? ini.color : '#v';
017    this.row = ini.row ? ini.row : '';
018    this.box.innerHTML = '<p style="margin-left:10px"><img src="/load3.gif" /> loading...<p>';
019    this.getValue = ini.getValue || String;
020    /* 异步下载Xml (chrome不能创建XMLDOC,使用Ajax构造) */
021    this.xml = !!$.all ? (new ActiveXObject('Microsoft.XMLDOM')) : (new XMLHttpRequest());
022    this.xml.onreadystatechange = function () {
023        if (_this.xml.readyState == 4) {
024            _this.box.innerHTML = '';
025            _this.addSub($.all ? _this.xml[$$] : _this.xml.responseXML[$$], _this.box)
026        }
027    }
028    if (!!$.all) {
029        this.xml.async = true; this.xml.load(ini.url)
030    }
031    else {
032        this.xml.open("GET", ini.url, true); this.xml.send(null)
033    };
034}
035/*
036共享接口
037*/
038XML2Tree.prototype = {
039    folder: function (node) {
040        var UI = function (_) { return document.createElement(_) }
041            , caption = UI('DT'), shell = UI('DL'), body = UI('DD'), $ = XML2Tree.ini;
042        shell.appendChild(caption);
043        shell.appendChild(body);
044        var folderIco = this.selectIco($.folder, $.node, XML2Tree.hasChild(node));
045        caption.innerHTML = (this.edit ? '<label>' + this.expand(this.getValue.call(node)) + '</label>' : '')
046                + this.getLineIco(node) + this.getHasIco(node)
047                + folderIco + '<a href="javascript://"><span>'
048                + this.getTitle.call(node) + '</span></a>';
049        caption.mapNode = node;
050        var co = this.color;
051        caption.onmouseover = function () {
052            this.style.backgroundColor = co;
053        }
054        caption.onmouseout = function () {
055            this.style.backgroundColor = '';
056        }
057        return { 'shell': shell, 'caption': caption };
058    },
059    addSub: function (node, shell) {
060        if (node == null) return;
061        var nodes = node.childNodes, _tree = this;
062        for (var i = 0; i < nodes.length; i++) {
063            if (nodes[i].nodeType != 1) continue; /* for FF find textNode */
064            var _ = this.folder(nodes[i]);
065            shell.appendChild(_.shell);
066            _.caption.onclick = function (e) {
067                var $ = XML2Tree, childShell = $.next(this);
068                if (this.mapNode) {
069                    var wrap = this.parentNode.getElementsByTagName('DD')[0];
070                    if (XML2Tree.hasChild(this.mapNode)) {
071                        _tree.addSub(this.mapNode, wrap);
072                        $.toggle(this, true)
073                    };
074                    this.mapNode = null;
075                } else {
076                    if (!childShell) return;
077                    if (XML2Tree.hasChild(childShell)) {
078                        var hide = childShell.style.display == 'none';
079                        childShell.style.display = hide ? '' : 'none';
080                        $.toggle(this, hide);
081                    };
082                };
083                e = e || window.event;
084                var sE = e.srcElement || e.target;
085                if (sE.tagName.toUpperCase() == 'SPAN') {
086                    var title = sE.innerHTML;
087                    if (!XML2Tree.hasChild(childShell)) {
088                        _tree.click.call(sE, title, false); /* 叶节点单击, this 重置为 span */
089                    } else {
090                        _tree.click.call(childShell, title, true); /* 文件夹节点单击, this 重置为 子节点的壳DD */
091                    }
092                }
093            };
094        };
095    },
096    getLineIco: function (node) {
097        var icos = [], root = node.ownerDocument;
098        if (!root) return null;
099        node = node.parentNode;
100        while (node.parentNode != root) {
101            var $ = XML2Tree, img = this.selectIco($.ini.line, $.ini.empty, !!$.next(node));
102            icos = [img].concat(icos);
103            node = node.parentNode;
104        }
105        return icos.join('');
106    },
107    getHasIco: function (node) {
108        var last = !!XML2Tree.next(node), $ = XML2Tree.ini;
109        return XML2Tree.hasChild(node) ?
110            this.selectIco($.plus, $.plusBottom, last) :
111            this.selectIco($.join, $.joinBottom, last)
112    },
113    expand: function (i) {
114        var r = this.row, s = [];
115        for (var k = 0; k < r.length; k++) {
116            var url = r[k][0].replace('{0}', i);
117            s.push('<a href="' + url + '">' + r[k][1] + '</a>' + (k == r.length - 1 ? '' : ' | '));
118        }
119        return s.join('');
120    },
121    selectIco: function (_1, _2, bool) {
122        return '<img src="' + (bool ? _1 : _2) + '" align="absimddle" />'
123    }
124};
125/*
126静态接口
127*/
128XML2Tree.ini = {
129    root: 'ui/base.gif',
130    folder: 'ui/folder.gif',
131    folderOpen: 'ui/folderopen.gif',
132    node: 'ui/page.gif',
133    empty: 'ui/empty.gif',
134    line: 'ui/line.gif',
135    join: 'ui/join.gif',
136    joinBottom: 'ui/joinbottom.gif',
137    plus: 'ui/plus.gif',
138    plusBottom: 'ui/plusbottom.gif',
139    minus: 'ui/minus.gif',
140    minusBottom: 'ui/minusbottom.gif',
141    nlPlus: 'ui/nolines_plus.gif',
142    nlMinus: 'ui/nolines_minus.gif'
143};
144/* 图标预载 */
145XML2Tree.prevLoad = function () {
146    for (var key in this.ini) {
147        var $ = new Image();
148        $.src = this.ini[key];
149    }
150};
151XML2Tree.next = function (node) {
152    var $ = node, _ = 'nextSibling';
153    for ($ = $[_]; $; $ = $[_]) {
154        if ($.nodeType == 1) { return $ }
155     };
156    return null;
157};
158XML2Tree.hasChild = function (node) {
159    var $ = node.childNodes;
160    for (var i = 0; i < $.length; i++)
161        if ($[i].nodeType == 1) return true;
162    return false;
163};
164XML2Tree.toggle = function (node, isOpen) {
165    var imgs = node.getElementsByTagName('IMG')
166        , f = imgs.length - 1, $ = XML2Tree.ini;
167    imgs[f].src = isOpen ? $.folderOpen : $.folder;
168    if (this.next(node.parentNode)) {
169        imgs[f - 1].src = isOpen ? $.minus : $.plus;
170    } else {
171        imgs[f - 1].src = isOpen ? $.minusBottom : $.plusBottom;
172    }
173};
174/*
175生成实例树 
176参数:
177url: xml 地址
178shell: 树容器
179loading: 下载中的效果html
180getTitle: 标题来源属性操作 this 重置为 xml node
181chick: 节点或者叶节点的单击事件(可得到参数title,isFolder与重置后的this)
182*/
183XML2Tree.prevLoad();

HTML代码

1<div id="TreeViewTreeView1"></div>
2<div class="xmlToTree">   
3    <h3>省市</h3> 
4    <div id="TreeView1"></div>
5</div>

JS调用

01new XML2Tree({
02    url: 'city.xml',
03    shell: 'TreeView1',
04    edit: true,
05    color: '#E9F5FF',
06    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', '删除']],
07    getTitle: function () { return this.getAttribute('t') },
08    getValue: function () { return this.getAttribute('v') },
09    click: function (title, isFolder) {
10    }
11});

下载地址

点我下载

~!~~~ 民工的命

原创代码,转载请联系柴哥!!!