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