Ext树工具类 Jsontree和Xmltree
使用说明:
使用本工具类,可以快速从xml和json文件中创建EXT树.
预览:
tree.html:
<SCRIPT src="js/jsontree.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/xmltree.js" type=text/javascript></SCRIPT>
</HEAD>
<BODY>
<div id="jsontree"></div>
<div id="xmltree"></div>
</BODY>
</HTML>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'js/ext-2.0/resources/images/default/s.gif';
var jsontree = new createJsonTree("jsontree", "tree.json", function() {
jsontree.render();
this.getRootNode().expand();
});
var menuTree = new createXmlTree("xmltree", "tree.xml", function() {
menuTree.render();
this.getRootNode().expand();
});
</script>
jsontree.js:
function createJsonTree(el, url, callback) {
var tree = new Ext.tree.TreePanel({
el : el,
animate : true,
border : false,
autoHeight : true,
rootVisible : true
});
var treeNodesFromArray = function(parentNode, children) {
Ext.each(children, function(child) {
var node = new Ext.tree.TreeNode({
text : child.text,
url : child.url,
color : child.color,
menuid : child.menuid,
expanded : child.expanded
});
if (!parentNode) {
tree.setRootNode(node);
} else {
parentNode.appendChild(node);
}
if (child.children) {
treeNodesFromArray(node, child.children);
}
}, this);
};
try {
var proxy = new Ext.data.HttpProxy({
url : url
});
proxy.on("loadexception", function(o, response, e) {
if (e)
throw e;
});
proxy.load(null, {
read : function(response) {
var treeJson = Ext.util.JSON.decode(response.responseText);
treeNodesFromArray(null, treeJson);
callback.call(tree);
}
}, function() {
}, this);
} catch (e) {
}
return tree;
}
xmltree.js
function loadXMLext(xmlStr) {
if (!xmlStr)
return null;
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 = true;
try {
xmlDom.loadXML(xmlStr);
} catch (e) {
var oParser = new DOMParser();
xmlDom = oParser.parseFromString(xmlStr, "text/xml");
}
return xmlDom;
}
function createXmlTree(el, xmlsrc, callback) {
var tree = new Ext.tree.TreePanel({
el : el,
animate : true,
border : false,
autoHeight : true,
rootVisible : true
});
var xmlDom = loadXMLext(xmlsrc);
try {
tree.setRootNode(treeNodeFromXml(xmlDom.documentElement || xmlDom));
callback.call(tree);
} catch (e) {
var p = new Ext.data.HttpProxy({
url : xmlsrc
});
p.on("loadexception", function(o, response, e) {
alert("loadException");
});
p.load(null, {
read : function(response) {
var doc = response.responseXML;
tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
}
}, callback, tree);
}
return tree;
}
function treeNodeFromXml(XmlEl) {
var t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue : XmlEl.tagName);
if (t.replace(/\s/g, '').length == 0) {
return null
}
var result = {
text : t
};
if (XmlEl.nodeType == 1) {
Ext.each(XmlEl.attributes, function(a) {
if (a.nodeName == "href" && XmlEl.hasChildNodes())
return;
result[a.nodeName] = a.nodeValue;
});
result = new Ext.tree.TreeNode(result);
Ext.each(XmlEl.childNodes, function(el) {
if ((el.nodeType == 1) || (el.nodeType == 3)) {
var c = treeNodeFromXml(el);
if (c) {
result.appendChild(c);
}
}
});
}
return result;
}
示例数据tree.json:
[{
text : 'json树根',
url : 'root',
menuid : 'root',
expanded : true,
children : [{
text : 'json节点一',
url : '001',
menuid : '01',
expanded : true
}, {
text : 'json节点二二',
expanded : true,
children : [{
text : 'json节点三',
url : '003',
menuid : '03',
expanded : true
}, {
text : 'json节点四',
url : '004',
menuid : '04',
expanded : true
}]
}]
}]示例数据tree.xml:
<xml树根 expanded="true" menuid="10000" >
<xml节点一 expanded="true" menuid="10005" />
<xml节点二 expanded="true" menuid="10007" />
</xml树根>
使用本工具类,可以快速从xml和json文件中创建EXT树.
预览:
tree.html:
<SCRIPT src="js/jsontree.js" type=text/javascript></SCRIPT><SCRIPT src="js/xmltree.js" type=text/javascript></SCRIPT></HEAD><BODY><div id="jsontree"></div><div id="xmltree"></div></BODY></HTML><script type="text/javascript">Ext.BLANK_IMAGE_URL = 'js/ext-2.0/resources/images/default/s.gif';var jsontree = new createJsonTree("jsontree", "tree.json", function() {
jsontree.render(); this.getRootNode().expand();});var menuTree = new createXmlTree("xmltree", "tree.xml", function() { menuTree.render(); this.getRootNode().expand();});</script>jsontree.js:
function createJsonTree(el, url, callback) { var tree = new Ext.tree.TreePanel({
el : el, animate : true, border : false, autoHeight : true, rootVisible : true }); var treeNodesFromArray = function(parentNode, children) { Ext.each(children, function(child) { var node = new Ext.tree.TreeNode({ text : child.text, url : child.url, color : child.color, menuid : child.menuid, expanded : child.expanded }); if (!parentNode) { tree.setRootNode(node); } else { parentNode.appendChild(node); } if (child.children) { treeNodesFromArray(node, child.children); } }, this); }; try { var proxy = new Ext.data.HttpProxy({ url : url }); proxy.on("loadexception", function(o, response, e) { if (e) throw e; }); proxy.load(null, { read : function(response) { var treeJson = Ext.util.JSON.decode(response.responseText); treeNodesFromArray(null, treeJson); callback.call(tree); } }, function() { }, this); } catch (e) { } return tree;}xmltree.js
function loadXMLext(xmlStr) { if (!xmlStr) return null; 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 = true; try { xmlDom.loadXML(xmlStr); } catch (e) { var oParser = new DOMParser(); xmlDom = oParser.parseFromString(xmlStr, "text/xml"); } return xmlDom;}function createXmlTree(el, xmlsrc, callback) { var tree = new Ext.tree.TreePanel({ el : el, animate : true, border : false, autoHeight : true, rootVisible : true }); var xmlDom = loadXMLext(xmlsrc); try { tree.setRootNode(treeNodeFromXml(xmlDom.documentElement || xmlDom)); callback.call(tree); } catch (e) { var p = new Ext.data.HttpProxy({ url : xmlsrc }); p.on("loadexception", function(o, response, e) { alert("loadException"); }); p.load(null, { read : function(response) { var doc = response.responseXML; tree.setRootNode(treeNodeFromXml(doc.documentElement || doc)); } }, callback, tree); } return tree;}function treeNodeFromXml(XmlEl) { var t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue : XmlEl.tagName); if (t.replace(/\s/g, '').length == 0) { return null } var result = { text : t }; if (XmlEl.nodeType == 1) { Ext.each(XmlEl.attributes, function(a) { if (a.nodeName == "href" && XmlEl.hasChildNodes()) return; result[a.nodeName] = a.nodeValue; }); result = new Ext.tree.TreeNode(result); Ext.each(XmlEl.childNodes, function(el) { if ((el.nodeType == 1) || (el.nodeType == 3)) { var c = treeNodeFromXml(el); if (c) { result.appendChild(c); } } }); } return result;}示例数据tree.json:
[{ text : 'json树根', url : 'root', menuid : 'root', expanded : true, children : [{ text : 'json节点一', url : '001', menuid : '01', expanded : true }, { text : 'json节点二二', expanded : true, children : [{ text : 'json节点三', url : '003', menuid : '03', expanded : true }, { text : 'json节点四', url : '004', menuid : '04', expanded : true }] }]}]<xml树根 expanded="true" menuid="10000" > <xml节点一 expanded="true" menuid="10005" /> <xml节点二 expanded="true" menuid="10007" /> </xml树根>
