JS读取XML字符串生成树结构

最新推荐文章于 2023-03-31 15:17:21 发布
最新推荐文章于 2023-03-31 15:17:21 发布
阅读量989 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34307209/article/details/73166535
版权
           根据上篇文章整理出本人所需的JS读取XML字符串生成树，这是我自己根据上面文章所说的JS文件修改的，作为存档记录，所以不做详细介绍了。

JS代码

function caret(xmls) {
            document.write('<div id="tree"><\/div>'); // 输出一个div层用来放菜单
            document.write('<div id="treeTip"><\/div>'); 
            document.getElementById('treeTip').style.visibility = 'visible';
            document.getElementById('treeTip').style.display = 'none';

            var xmlStrDoc = null;
            if (window.DOMParser) {// Mozilla Explorer 
                parser = new DOMParser();
                xmlStrDoc = parser.parseFromString(xmls, "text/xml");
            } else {// Internet Explorer 
                xmlStrDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlStrDoc.async = "false";
                xmlStrDoc.loadXML(xmls);
            }
            creteTree(xmlStrDoc);
            document.getElementById('tree').innerHTML = html;
        }
        function creteTree(xmlStrDoc, id) {
            if (typeof (id) == 'undefined') id = null; //如果没有传ID时id为null则为父节点
            var nodes = xmlStrDoc.getElementsByTagName('Node');
            if (nodes != null && nodes.length > 0) {
                var modeClass, modeSrc, iconClass, iconSrc;
                var nid, npid, nname, nicon, nlink, ntarget, nexplain, hasChildNodes;

                //判断树节点是否是打开状态并改变样式
                modeClass = 'close';
                modeSrc = iconPath + iconClose;
                if (mode == 1) {
                    modeSrc = iconPath + iconOpen;
                    modeClass = 'open';
                }
                if (id == null) modeClass = 'open'; //将样式设置为打开
                html += '<ul id="tree_' + id + '_c" class="' + modeClass + '">';

                for (var i = 0; i < nodes.length; i++) {
                    npid = nodes[i].getAttribute('ParentID');
                    if (npid == "") {
                        npid = null;
                    }
                    if (npid == id) {
                        //��ʼ��
                        modeClass = 'close'; iconClass = 'icon-file'; iconSrc = iconPath + iconFile;

                        //当前节点有子节点时
                        nid = nodes[i].getAttribute('id');
                        html += '<li id="tree_' + nid + '"><span οnclick="action(this,event);" οnmοuseοver="action(this,event);" οnmοuseοut="action(this,event);">';

                        //获取子节点
                        nicon = getFirstChildData(nodes[i], 'icon');
                        hasChildNodes = checkChildNodes(xmlStrDoc, nid);
                        if (hasChildNodes) {
                            iconClass = '';
                            iconSrc = iconPath + iconFolder;
                            html += '<img id="tree_' + nid + '_a" src="' + modeSrc + '" class="arrow" \/>'; //��ͷ
                        }
                        if (nicon != '') iconSrc = nicon;
                        html += '<img id="tree_' + nid + '_i" src="' + iconSrc + '" class="' + iconClass + '" \/>'; //ͼ��

                        //当节点有link地址时，添加a标签的href
                        nlink = getFirstChildData(nodes[i], 'link');
                        if (nlink != '') {
                            nlink = ' href="' + nlink + '"';
                        } else {
                            nlink = ' href="javascript:;"';
                        }

                        //a标签的href页面显示在哪
                        ntarget = getFirstChildData(nodes[i], 'target');
                        if (ntarget != '') {
                            ntarget = ' target="' + ntarget + '"';
                        }

                        //添加鼠标事件
                        nexplain = getFirstChildData(nodes[i], 'explain');
                        if (nexplain != '') {
                            nexplain = ' οnmοuseοver="treeTips(\'' + nexplain + '\');" οnmοuseοut="treeTips();"'
                        }

                        //添加节点及节点的点击事件
                        nname = getFirstChildData(nodes[i], 'Name');
                        html += '<a id="tree_' + nid + '_l" οnclick="action(this,event);"' + nlink + ntarget + nexplain + '>' + nname + '<\/a><\/span>';

                        //obj.documentElement.removeChild(nodes[i]);
                        if (hasChildNodes) {
                            creteTree(xmlStrDoc, nid); //递归此方法
                        }

                        html += '<\/li>';
                    }
                }
                html += '<\/ul>';
            }
            return;
        }
        function checkChildNodes(obj, id) { //����Ƿ��з�֧
            var result = false;
            var nodes = obj.getElementsByTagName('Node');
            if (nodes != null && nodes.length > 0) {
                //var pid;
                for (var i = 0; i < nodes.length; i++) {
                    //pid = nodes[i].getAttribute('parentid');
                    if (nodes[i].getAttribute('ParentID') == id) {
                        result = true;
                        break;
                    }
                }
            }
            return result;
        }

        function getFirstChildData(obj, name) { //
            var result = '';
            if (typeof (obj) == 'object' && name != null && name != '') {
                var node = obj.getElementsByTagName(name);
                if (node != null && node.length > 0) {
                    result = node[0].firstChild.data;
                }
            }

            return result;
        }

        function action(obj, e) { //点击事件
            e = e ? e : (window.event ? window.event : null); 
            e = e.type;
            if (obj.tagName == 'A') {
                try {
                    this.prevSelected.className = '';
                    var ss = obj.parentElement.parentElement;
                    var dd = ss.childNodes;
                    //点击的a标签是子节点时
                    if (dd.length == 1) {
                        var cc = obj.id;
                        alert(cc.replace("tree_", "").replace("_l", ""));
                    }
                }
                catch (e) {
                    var ss = obj.parentElement.parentElement;
                    var dd = ss.childNodes;
                    if (dd.length == 1) {
                        var cc = obj.id;
                        alert(cc.replace("tree_", "").replace("_l", ""));
                    }
                }
                this.prevSelected = obj;
                obj.className = 'selected';
            }
            if (obj.tagName == 'SPAN') {
                var arrow = obj.firstChild; //
                var borther = obj;
                while (borther.tagName != 'UL') { //
                    borther = borther.nextSibling;
                    if (borther == null) break;
                }
                if (borther != null) {
                    switch (e) { //判断事件
                        case 'click':
                            if (borther.className == 'open') {
                                borther.className = 'close';
                                arrow.src = iconPath + iconClose;
                            } else {
                                borther.className = 'open';
                                arrow.src = iconPath + iconOpen;
                            }
                            break;
                        case 'mouseover':
                            if (arrow.tagName == 'IMG' && borther.className == 'close') {
                                arrow.src = iconPath + iconOver;
                            }
                            break;
                        case 'mouseout':
                            if (arrow.tagName == 'IMG' && borther.className == 'close') {
                                arrow.src = iconPath + iconClose;
                            }
                            break;
                    }
                }
            }
            return;
        }
        function treeTips(msg) { //��ʾ��
            if (prevTip != null) clearTimeout(prevTip);
            var obj = document.getElementById('treeTip');
            if (obj != null) {
                if (this.treeTips.arguments.length < 1) { // hide
                    obj.style.display = 'none';
                } else { // show
                    obj.innerHTML = msg;
                    tprevTip = setTimeout('document.getElementById("treeTip").style.display = "block"', 300);
                    document.onmousemove = moveToMouseLoc();
                }
            }
            return;
        }

        function moveToMouseLoc(e) { //
            var obj = document.getElementById('treeTip');
            if (obj != null) {
                var offsetX = -10, offsetY = 20;
                var x = 0, y = 0;
                if (window.event) {
                    x = event.x + document.body.scrollLeft;
                    y = event.y + document.body.scrollTop;
                } else {
                    x = e.pageX;
                    y = e.pageY;
                }
                obj.style.left = x + offsetX + 'px';
                obj.style.top = y + offsetY + 'px';
            }
            return;
        }



HTML 应用代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="css/xmltree.css" />
    <script type="text/javascript" src="js/tree.js"></script>
    <title></title>
    <style type="text/css">
        body
        {
            font-size: 11px;
            font-family: Tahoma, Verdana, sans-serif;
            text-align: center;
        }
        div
        {
            margin: auto;
        }
    </style>
    <script type="text/javascript">
        function aa(e) {
            var li = e.id;
            alert(li);
        }
        var iconPath = 'images/'               //图片根目录
        var iconFolder = 'tree_icon_folder.gif'; //文件图片
        var iconFile = 'tree_icon_file.gif';   //文件夹图片
        var iconOpen = 'tree_arrow_open.gif';  //点击打开时的图片
        var iconOver = 'tree_arrow_over.gif';  
        var iconClose = 'tree_arrow_close.gif';
        var html = "";
        var prevTip = null;
        var mode = 1;
        
    </script>
</head>
<body>
    <div style="width: 400px; display: block; border: 1px solid red; float: left;">
        <script type="text/javascript">
            var xmli = '<?xml version="1.0" encoding="GB2312" ?> <NodeList><Node id="1" ParentID=""><Name>深圳市</Name><NodeType>4</NodeType><Status>0</Status></Node><Node id="2" ParentID=""><Name>test</Name><NodeType>4</NodeType><Status>0</Status></Node><Node id="1-1" ParentID="1"><Name>福田区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-2" ParentID="1"><Name>南山区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-3" ParentID="1"><Name>罗湖区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-4" ParentID="1"><Name>龙华区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-5" ParentID="1"><Name>宝安区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-6" ParentID="1"><Name>龙岗区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-7" ParentID="1-2"><Name>蛇口</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-8" ParentID="1"><Name>华三平台</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-2-2" ParentID="1-2"><Name>DH_11</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-2-23" ParentID="1-2"><Name>HK_64</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-37" ParentID="1"><Name>ht_180_50</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-38" ParentID="1"><Name>Bosch_188</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-41" ParentID="1"><Name>ONVIF_64</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-42" ParentID="1"><Name>hk_65</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-42-2-1" ParentID="1-0-42"><Name>MPEG4:Full</Name><NodeType>6</NodeType><Status>0</Status></Node><Node id="1-0-42-2-4" ParentID="1-0-42"><Name>MPEG4:QCIF</Name><NodeType>6</NodeType><Status>0</Status></Node><Node id="1-0-43" ParentID="1"><Name>zetado</Name><NodeType>5</NodeType><Status>0</Status></Node></NodeList>';
            caret(xmli);
        </script>
    </div>
</body>
</html>

以上


我在等待微笑
关注
java读取xml文件生成树结构_读xml文件生成树
weixin_42122878的博客
02-13 2998
你去建两张表把这目录做成树的形式吧，这有个例子给你。我把那树的结构写在xml中行不行？行，你自己看着办。靠，每次都是这样让我拿着那半成品在改，真是受不了。开始又不把它写成树的形式现在来让我改，无语。被这个纠结的项目整的郁闷死了。今天又提出新的需求了，领导要看到系统在线的人数，还要了解他们在用那些应用。citrix中也不知道有没有给出接口，研究了一上午得出的结论却不容乐观，citrix上给出的性能方...
Java生成和解析XML格式文件和字符串的实例代码
09-04
本文将深入探讨如何使用Java生成和解析XML格式的文件和字符串，主要关注DOM方法，同时也会提及其他解析方式。 1、基础知识： Java解析XML主要有四种方法： - DOM（Document Object Model）：W3C提供的接口，将整个...
JS读取XML字符串形成树
10-10
JS读取XML字符串形成树，针对数据量大的XML字符串读取与树结构拼接
js读取xml字符串的内容
easyboot的专栏
12-30 935
function getxml(xmlstr) { var str = xmlstr;// //创建文档对象 var parser = new DOMParser(); var xmlDoc = parser.parseFromString(str, "text/xml"); console.log(xmlDoc) //提取数据 var vars= xmlDoc.getElementsByTagName('Var'); var arr.
javascript操作xml生成树形菜单（转）
weixin_30457065的博客
05-22 129
这个效果应该不算什么稀奇，网上也有现成的代码，我这个也没什么特别的地方，只是因为我自己写的，也算是为学习DOM后一个练习；在IE下测试通过； （最近又写了一个，当然不再是为了练习；请参看：javascript操作xml生成树形菜单（一）描述） 实现效果是这样的： 读取XML文档； 采用递归生成无限级的树形菜单； 能够响应鼠标事件，展开与拆叠子级菜单； 首先是生成一个XML文档，我用...
JavaScript 解析 xml 字符串
前端技术
10-27 1744
使用场景在获取 ArcGIS WMS 详细信息 http://localhost:6080/arcgis/services/World/MapServer/WMSServer?request=GetCapabilities&service=WMS 返回 xml 信息如下 使用loadXML 对象解析 // 支持 IE9+均支持、Google function loadXML(xmlString){ let domParser = new DOMParser(); ...
js从xml读取数据生成树形控件
11-15
1. **使用`DOMParser`**：JavaScript提供了一个内置对象`DOMParser`，允许我们通过字符串形式的XML数据创建一个DOM文档对象。例如： ```javascript var parser = new DOMParser(); var xmlDoc = parser....
DOM、SAX、DOM4J、JDOM、StAX生成XML并返回XML字符串形式
05-26
下面将详细介绍这些解析器的工作原理以及它们在生成XML并返回XML字符串形式时的应用。 1. DOM (Document Object Model) DOM是一种基于树形结构的XML解析模型，它将整个XML文档加载到内存中，形成一个完整的文档对象...
JavaScript解析XML格式字符串
最新发布
程序员之道
03-31 2080
我们在做项目的时候，有时会以XML格式来传递数据，比如，后端的读取数据库某条记录，以XML的形式返回给前端。
js读取xml文件，生成树型结构
11-23
这是一个js读取xml文件的例子。因为ajax执行后返回的也是一个xml文件，这个例子做的就是最终生成的树形结构。
JS操作XML实例总结(加载与解析XML文件、字符串)
10-23
主要介绍了JS操作XML的方法,结合实例形式总结分析了JavaScript加载与解析XML文件及字符串的相关技巧,需要的朋友可以参考下
通过xml生成目录树
12-18
通过xml生成动态树
JS 读取 XML 生成树
01-20
使用 javascript 读取 xml 配置的内容，生成 dtree， 可用于一些配置 文件生成属性目录结构， 方便， 操作简易
java 读取xml文件生成树形图
12-21
java代码读取xml文件，生成树形图。这里是源码，可直接使用，是我项目中提取生成树的核心文件。
JS读取XML文件形成树结构
qq_34307209的博客
06-13 2810
某日在做根据后台返回的XML字符串形成树状菜单，因为之前并没有怎么操作过XML文件，所以去求助了一下百度，奈何怎么也找不到符合我要求的答案。最后退而求其次，找到了根据XML文件形成树状菜单的示例，不过有蛮久过去了，已经找不到原来的文章地址在哪了，所以自己备忘一下。         主要是一个JS插件，我直接附上代码吧。 /* JavaScript Document */ /*
js格式化xml字符串
dawuafang
05-31 237
无论在输入xml字符串或显示xml字符串，都要判断xml的正确性。 以下是js格式化后台xml字符串。 //格式化xml function formatXml(str){ //去除输入框中xmll两端的空格。 str = str.replace(/^\s+|\s+$/g,""); var source = new ActiveXObject("Ms...
用java将xml写成树形结构
我不想秃头的博客
12-12 1411
在用Java编写代码写xml文件的时候，刚开始可能会出现写xml成功了，但是生成的文件却是紧凑的排列在一行的，比较混乱，比如下面这种：需要用到org.dom4j 这个开源包 package user; import java.io.File; import java.io.FileWriter; import java.io.IOException; import org.dom4j.D...
javascript解析XML生成树形结构
Core_Star的专栏
03-28 3421
前两天一个朋友去一家公司面试，面试题是用javascript解析一个XML，生成树形结构，今天闲着没事就试了试。 源代码：     无标题页     简单的实现了一下，有这个效果，有时间可以好好封装一下。
JavaScript读取XML文件示例
“js读取xml文件.doc”是一个关于JavaScript如何读取XML文件的文档示例。文档中包含了一个XML文件（books.xml）的样本数据，以及一个HTML文件（jsxml.html）的代码片段，该片段展示了如何在JavaScript中创建和处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值