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树根>









posted @ 2008-06-18 10:56 meetrice 阅读(...) 评论(...) 编辑 收藏