XML to tree XML 树
前面发了一个 html to tree 再发一个 xml to tree
以下为代码
/*
版权所有：版权所有(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="/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();
HTML代码
<div id="TreeViewTreeView1"></div>
<div class="xmlToTree">
<h3>省市</h3>
<div id="TreeView1"></div>
</div>
JS调用
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) {
}
});
下载地址
~!~~~ 民工的命
原创代码,转载请联系 柴哥!!!
