使用说明:
使用本工具类,可以快速从xml和json文件中创建EXT树.
预览:
![](http://clip2net.com/clip/m4134/1213758627-clip-2kb.png)
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';
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
var jsontree = new createJsonTree("jsontree", "tree.json", function()
{
jsontree.render();
this.getRootNode().expand();
});
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
var menuTree = new createXmlTree("xmltree", "tree.xml", function()
{
menuTree.render();
this.getRootNode().expand();
});
</script>
![](/Images/OutliningIndicators/None.gif)
jsontree.js:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function createJsonTree(el, url, callback)
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var tree = new Ext.tree.TreePanel(
{
el : el,
animate : true,
border : false,
autoHeight : true,
rootVisible : true
});
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var treeNodesFromArray = function(parentNode, children)
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Ext.each(children, function(child)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var node = new Ext.tree.TreeNode(
{
text : child.text,
url : child.url,
color : child.color,
menuid : child.menuid,
expanded : child.expanded
});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (!parentNode)
{
tree.setRootNode(node);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
parentNode.appendChild(node);
}
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (child.children)
{
treeNodesFromArray(node, child.children);
}
}, this);
};
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var proxy = new Ext.data.HttpProxy(
{
url : url
});
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy.on("loadexception", function(o, response, e)
{
if (e)
throw e;
});
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy.load(null,
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
read : function(response)
{
var treeJson = Ext.util.JSON.decode(response.responseText);
treeNodesFromArray(null, treeJson);
callback.call(tree);
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}, function()
{
}, this);
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} catch (e)
{
![](/Images/OutliningIndicators/InBlock.gif)
}
return tree;
}
![](/Images/OutliningIndicators/None.gif)
xmltree.js
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function loadXMLext(xmlStr)
{
![](/Images/OutliningIndicators/InBlock.gif)
if (!xmlStr)
return null;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (window.ActiveXObject)
{
var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (document.implementation && document.implementation.createDocument)
{
var xmlDom = document.implementation
.createDocument("", "doc", null)
}
}
xmlDom.async = true;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
xmlDom.loadXML(xmlStr);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} catch (e)
{
var oParser = new DOMParser();
xmlDom = oParser.parseFromString(xmlStr, "text/xml");
}
return xmlDom;
}
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function createXmlTree(el, xmlsrc, callback)
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var tree = new Ext.tree.TreePanel(
{
el : el,
animate : true,
border : false,
autoHeight : true,
rootVisible : true
});
![](/Images/OutliningIndicators/InBlock.gif)
var xmlDom = loadXMLext(xmlsrc);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
tree.setRootNode(treeNodeFromXml(xmlDom.documentElement || xmlDom));
callback.call(tree);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} catch (e)
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var p = new Ext.data.HttpProxy(
{
url : xmlsrc
});
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
p.on("loadexception", function(o, response, e)
{
alert("loadException");
});
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
p.load(null,
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
read : function(response)
{
var doc = response.responseXML;
tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
}
}, callback, tree);
![](/Images/OutliningIndicators/InBlock.gif)
}
return tree;
}
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function treeNodeFromXml(XmlEl)
{
![](/Images/OutliningIndicators/InBlock.gif)
var t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue : XmlEl.tagName);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (t.replace(/\s/g, '').length == 0)
{
return null
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var result =
{
text : t
};
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (XmlEl.nodeType == 1)
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Ext.each(XmlEl.attributes, function(a)
{
if (a.nodeName == "href" && XmlEl.hasChildNodes())
return;
result[a.nodeName] = a.nodeValue;
});
![](/Images/OutliningIndicators/InBlock.gif)
result = new Ext.tree.TreeNode(result);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Ext.each(XmlEl.childNodes, function(el)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if ((el.nodeType == 1) || (el.nodeType == 3))
{
var c = treeNodeFromXml(el);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (c)
{
result.appendChild(c);
}
}
});
}
return result;
}示例数据tree.json:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
[
{
text : 'json树根',
url : 'root',
menuid : 'root',
expanded : true,
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
children : [
{
text : 'json节点一',
url : '001',
menuid : '01',
expanded : true
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
text : 'json节点二二',
expanded : true,
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
children : [
{
text : 'json节点三',
url : '003',
menuid : '03',
expanded : true
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
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树根>