使用本工具类,可以快速从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树根>