Ext树工具类 Jsontree和Xmltree

最新推荐文章于 2021-06-05 00:57:47 发布

haidii

最新推荐文章于 2021-06-05 00:57:47 发布

阅读量87

点赞数

分类专栏： js/jquery/Ext 文章标签： EXT json JavaScript XML C ViewUI

本文链接：https://blog.csdn.net/haidii/article/details/83456823

版权

js/jquery/Ext 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

haidii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext树工具类 Jsontree和Xmltree

使用说明:使用本工具类,可以快速从xml和json文件中创建EXT树.预览:tree.html:&lt;SCRIPT src="js/jsontree.js" type=text/javascript&gt;&lt;/SCRIPT&gt;&lt;SCRIPT src="js/xmltree.js" type=text/javascript&gt;&lt;/SCRIPT&gt;&lt;/
复制链接

扫一扫

专栏目录