利用Javascript读取xml文件，构建树型列表

于 2006-10-20 17:04:00 发布
阅读量3.9k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 脚本其他 文章标签： xml javascript c string function mozilla
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/PPLUNCLE/article/details/1342918
这篇博客介绍如何利用JavaScript直接读取XML文件并构建树型列表，避免了使用微软树控件导致的效率问题。在XML层次深、节点多的情况下，此方法表现优秀。虽然存在数据更新时可能无法实时同步的问题，但可以通过调整代码实现每次点击时重新获取子节点数据。此外，也提到了使用XMLHttpRequest异步获取数据库数据的可能性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 文中涉及到的xml文档如下：
<? xml version="1.0" standalone="yes" ?>
< NewDataSet >
   < xs:schema  id ="NewDataSet"  xmlns =""  xmlns:xs ="http://www.w3.org/2001/XMLSchema"  xmlns:msdata ="urn:schemas-microsoft-com:xml-msdata"  xmlns:msprop ="urn:schemas-microsoft-com:xml-msprop" >
     < xs:element  name ="NewDataSet"  msdata:IsDataSet ="true"  msdata:MainDataTable ="CatalogInfoTb"  msdata:UseCurrentLocale ="true" >
       < xs:complexType >
         < xs:choice  minOccurs ="0"  maxOccurs ="unbounded" >
           < xs:element  name ="CatalogInfoTb"  msprop:SelectStatement ="select [OID],[ParentCatalog],[CatalogOrder] ,[CatalogName],[Remark] from CatalogInfoTb where 0=0 order by ParentCatalog,CatalogOrder" >
             < xs:complexType >
               < xs:sequence >
                 < xs:element  name ="OID"  type ="xs:string"  minOccurs ="0"   />
                 < xs:element  name ="ParentCatalog"  type ="xs:string"  minOccurs ="0"   />
                 < xs:element  name ="CatalogOrder"  type ="xs:int"  minOccurs ="0"   />
                 < xs:element  name ="CatalogName"  type ="xs:string"  minOccurs ="0"   />
                 < xs:element  name ="Remark"  type ="xs:string"  minOccurs ="0"   />
               </ xs:sequence >
             </ xs:complexType >
           </ xs:element >
         </ xs:choice >
       </ xs:complexType >
     </ xs:element >
   </ xs:schema >
   < CatalogInfoTb >
     < OID > 6bb0b669e5c448e5bed57cf377a45837 </ OID >
     < ParentCatalog > 0 </ ParentCatalog >
     < CatalogOrder > 1 </ CatalogOrder >
     < CatalogName > 教育咨询 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 2d8ffc093d404d3dbaa0e03cf93617bb </ OID >
     < ParentCatalog > 0 </ ParentCatalog >
     < CatalogOrder > 2 </ CatalogOrder >
     < CatalogName > 学习天地 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 902c40a1118a45d993753c71f0629e64 </ OID >
     < ParentCatalog > 0 </ ParentCatalog >
     < CatalogOrder > 3 </ CatalogOrder >
     < CatalogName > 教师天地 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 600cef96ab8942b58ea70d3781769607 </ OID >
     < ParentCatalog > 0 </ ParentCatalog >
     < CatalogOrder > 4 </ CatalogOrder >
     < CatalogName > 在线考试 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > e94621ce9fd64175a71efaf8af39a22e </ OID >
     < ParentCatalog > 0 </ ParentCatalog >
     < CatalogOrder > 5 </ CatalogOrder >
     < CatalogName > 学科博览 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > ed07b1dbfd394901a8a64e947e11d07b </ OID >
     < ParentCatalog > 0 </ ParentCatalog >
     < CatalogOrder > 6 </ CatalogOrder >
     < CatalogName > 下载中心 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 03f8a1e4a0004e8dbede0edf9879fda0 </ OID >
     < ParentCatalog > 0 </ ParentCatalog >
     < CatalogOrder > 7 </ CatalogOrder >
     < CatalogName > 图书参考 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > dd21f7c0ec404fcdb978b74da83ee0f2 </ OID >
     < ParentCatalog > 0 </ ParentCatalog >
     < CatalogOrder > 8 </ CatalogOrder >
     < CatalogName > 在线论坛 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 83711cd0aa4e4fb88ecdabea9fc0596d </ OID >
     < ParentCatalog > 12b427191f8443db8e9425c0c7d12320 </ ParentCatalog >
     < CatalogOrder > 1 </ CatalogOrder >
     < CatalogName > 高考动态 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 6feb3519e33341e7b9e6b80274e53d04 </ OID >
     < ParentCatalog > 12b427191f8443db8e9425c0c7d12320 </ ParentCatalog >
     < CatalogOrder > 2 </ CatalogOrder >
     < CatalogName > 基础复习 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > f588d3e57ddf44faa70cfc5f35b44480 </ OID >
     < ParentCatalog > 12b427191f8443db8e9425c0c7d12320 </ ParentCatalog >
     < CatalogOrder > 3 </ CatalogOrder >
     < CatalogName > 专题复习 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 5f2024120a6d4e1cab81bed99994775a </ OID >
     < ParentCatalog > 12b427191f8443db8e9425c0c7d12320 </ ParentCatalog >
     < CatalogOrder > 4 </ CatalogOrder >
     < CatalogName > 实战模拟 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 13fb3c35fcb34cca80fe63e5f2f69eac </ OID >
     < ParentCatalog > 24314e039049494fa16a4efdfe03f766 </ ParentCatalog >
     < CatalogOrder > 1 </ CatalogOrder >
     < CatalogName > 竞赛辅导 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 31c4a2c92e9c4bbea8ea01cfe7494c01 </ OID >
     < ParentCatalog > 24314e039049494fa16a4efdfe03f766 </ ParentCatalog >
     < CatalogOrder > 2 </ CatalogOrder >
     < CatalogName > 竞赛题库 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > b6c44943b87c4bc7ba203f7c23ed2e3c </ OID >
     < ParentCatalog > 2d8ffc093d404d3dbaa0e03cf93617bb </ ParentCatalog >
     < CatalogOrder > 1 </ CatalogOrder >
     < CatalogName > 同步课堂 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 12b427191f8443db8e9425c0c7d12320 </ OID >
     < ParentCatalog > 2d8ffc093d404d3dbaa0e03cf93617bb </ ParentCatalog >
     < CatalogOrder > 2 </ CatalogOrder >
     < CatalogName > 高考专区 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 24314e039049494fa16a4efdfe03f766 </ OID >
     < ParentCatalog > 2d8ffc093d404d3dbaa0e03cf93617bb </ ParentCatalog >
     < CatalogOrder > 3 </ CatalogOrder >
     < CatalogName > 竞赛专区 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 8fcfc83b325d4498a7b60295ac7dc9ac </ OID >
     < ParentCatalog > 2d8ffc093d404d3dbaa0e03cf93617bb </ ParentCatalog >
     < CatalogOrder > 4 </ CatalogOrder >
     < CatalogName > 学习指导 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 73644c6d51bd452dac4274a4c850066c </ OID >
     < ParentCatalog > 8fcfc83b325d4498a7b60295ac7dc9ac </ ParentCatalog >
     < CatalogOrder > 1 </ CatalogOrder >
     < CatalogName > 学习心得 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > b1a86b08b8484f4eacd326bdd44d4be2 </ OID >
     < ParentCatalog > 8fcfc83b325d4498a7b60295ac7dc9ac </ ParentCatalog >
     < CatalogOrder > 2 </ CatalogOrder >
     < CatalogName > 学法指导 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 26447d54472a45519db888aaa1658611 </ OID >
     < ParentCatalog > 8fcfc83b325d4498a7b60295ac7dc9ac </ ParentCatalog >
     < CatalogOrder > 3 </ CatalogOrder >
     < CatalogName > 专题辅导 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 014a6f3625ce47a2b077eecdd79e1995 </ OID >
     < ParentCatalog > 8fcfc83b325d4498a7b60295ac7dc9ac </ ParentCatalog >
     < CatalogOrder > 3 </ CatalogOrder >
     < CatalogName > 心理咨询 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 364b53c38c6a4405899360c7be7686c7 </ OID >
     < ParentCatalog > 902c40a1118a45d993753c71f0629e64 </ ParentCatalog >
     < CatalogOrder > 1 </ CatalogOrder >
     < CatalogName > 教案中心 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 000a7b2b8ae84585923515663d9f5eb0 </ OID >
     < ParentCatalog > 902c40a1118a45d993753c71f0629e64 </ ParentCatalog >
     < CatalogOrder > 3 </ CatalogOrder >
     < CatalogName > 课件中心 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > e63f9e48052346d1b5717f49a5ca0dc8 </ OID >
     < ParentCatalog > 902c40a1118a45d993753c71f0629e64 </ ParentCatalog >
     < CatalogOrder > 3 </ CatalogOrder >
     < CatalogName > 试题中心 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 3c6d714891314c6ca42f16337dee523c </ OID >
     < ParentCatalog > 902c40a1118a45d993753c71f0629e64 </ ParentCatalog >
     < CatalogOrder > 4 </ CatalogOrder >
     < CatalogName > 教法讨论 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > c50abb515d4c49789b1299720e9b3eb0 </ OID >
     < ParentCatalog > 902c40a1118a45d993753c71f0629e64 </ ParentCatalog >
     < CatalogOrder > 5 </ CatalogOrder >
     < CatalogName > 教学论文 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > b312e6ffe19549929d46071bfa13d902 </ OID >
     < ParentCatalog > b6c44943b87c4bc7ba203f7c23ed2e3c </ ParentCatalog >
     < CatalogOrder > 1 </ CatalogOrder >
     < CatalogName > 教材内容 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 29cd1b3c709d49ab9fb88199dfc5d7ec </ OID >
     < ParentCatalog > b6c44943b87c4bc7ba203f7c23ed2e3c </ ParentCatalog >
     < CatalogOrder > 2 </ CatalogOrder >
     < CatalogName > 教材全解 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 089f31404aa74b60bcd6e2019766bf00 </ OID >
     < ParentCatalog > b6c44943b87c4bc7ba203f7c23ed2e3c </ ParentCatalog >
     < CatalogOrder > 3 </ CatalogOrder >
     < CatalogName > 在线课堂 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 82e4d092dc594f9784bbb52da7e0db91 </ OID >
     < ParentCatalog > b6c44943b87c4bc7ba203f7c23ed2e3c </ ParentCatalog >
     < CatalogOrder > 4 </ CatalogOrder >
     < CatalogName > 难点突破 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 0b34aefd506d4df6ad98f8453ede772c </ OID >
     < ParentCatalog > b6c44943b87c4bc7ba203f7c23ed2e3c </ ParentCatalog >
     < CatalogOrder > 5 </ CatalogOrder >
     < CatalogName > 直击高考 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 3cc7026d85364a20a00458a2dc26488b </ OID >
     < ParentCatalog > b6c44943b87c4bc7ba203f7c23ed2e3c </ ParentCatalog >
     < CatalogOrder > 6 </ CatalogOrder >
     < CatalogName > 归纳总结 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 4c6a142e5f4c41a9bb91b5260959cedf </ OID >
     < ParentCatalog > b6c44943b87c4bc7ba203f7c23ed2e3c </ ParentCatalog >
     < CatalogOrder > 8 </ CatalogOrder >
     < CatalogName > 一课一练 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > 1a8122631a1541409e7e7fd23483f35f </ OID >
     < ParentCatalog > b6c44943b87c4bc7ba203f7c23ed2e3c </ ParentCatalog >
     < CatalogOrder > 8 </ CatalogOrder >
     < CatalogName > 自主学案 </ CatalogName >
   </ CatalogInfoTb >
   < CatalogInfoTb >
     < OID > ac34e9d3344d42f596bb3a1a918c1acf </ OID >
     < ParentCatalog > b6c44943b87c4bc7ba203f7c23ed2e3c </ ParentCatalog >
     < CatalogOrder > 9 </ CatalogOrder >
     < CatalogName > 在线评测 </ CatalogName >
   </ CatalogInfoTb >
</ NewDataSet >

 HTML代码如下(最开始漏掉了一个onexpand事件)：

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="TreeDefault.aspx.cs" Inherits="Test_TreeDefault"  %>
<% @ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, XmlDocumentKeyToken=31bf3856ad364e35"  %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title ></ title >
     < script  type ="text/javascript" >
    var xmlDoc;
    //加载一级目录
    function window_load()
    {
        this.loadXML();
        document.getElementById("TreeList").attachEvent("onselectedindexchange",TreeNodeExpand);
        document.getElementById("TreeChapterList").attachEvent("onexpand",TreeNodeExpand);
        //创建根节点
        var rootTreeNode = document.getElementById("TreeList").createTreeNode();
        rootTreeNode.setAttribute("Id","0");
        rootTreeNode.setAttribute("NodeData","0");
        rootTreeNode.setAttribute("Text","树根节点");
        rootTreeNode.setAttribute("NAVIGATEURL","#");
        rootTreeNode.setAttribute("Expandable","always");
        document.getElementById("TreeList").add(rootTreeNode);
        
        var oid,parentCatalog,catalogName,treeNode;
        
        var elements = xmlDoc.selectNodes("//CatalogInfoTb[ParentCatalog='0']");
        for(var n =0; n < elements.length;n++)
        {
            childnode   = document.getElementById("TreeList").createTreeNode();  
            oid         = elements.item(n).childNodes[0].childNodes[0].nodeValue;
            catalogName = elements.item(n).childNodes[3].childNodes[0].nodeValue
            childnode.setAttribute("Id",oid);
            childnode.setAttribute("NodeData",oid);
            childnode.setAttribute("Text",catalogName);
            childnode.setAttribute("NAVIGATEURL","#");
            if(xmlDoc.selectSingleNode("//CatalogInfoTb[ParentCatalog='"+ oid +"']") != null)
            {
                childnode.setAttribute("Expandable","always");
            }
            rootTreeNode.add(childnode);  
        }    

        document.getElementById("TreeList").expandLevel = 1;
    }
    //载入Xml文档
    function loadXML()
    {
        // IE 浏览器
        if (window.ActiveXObject)  
        {  
            xmlDoc      = new ActiveXObject("Microsoft.XMLDOM");  
            xmlDoc.async= false;  
            xmlDoc.load("catalogInfo.xml");  
        }
        // Mozilla, Firefox, Opera浏览器
        else if (document.implementation &&document.implementation.createDocument)  
        {  
            xmlDoc  =   document.implementation.createDocument("","",null);  
            xmlDoc.load("catalogInfo.xml");  
        }
        else  
        {  
            alert("由于你的浏览器不支持Javascript,目录树无法加载...");  
        }
    }
    //加载子节点
    function TreeNodeExpand()
    {
        var clickedindex;
        var clickednode;
        var childnode;
        var elements;
        var subElements;
        var childElement;
        
        clickedindex = document.getElementById("TreeList").clickedNodeIndex;            //获得当前被点击的节点索引
        clickednode  = document.getElementById("TreeList").getTreeNode(clickedindex);   //获得被点击的节点
        childnode    = clickednode.getChildren();                                        //获得被点击节点的子节点    
        if(childnode.length > 0) return;                                                //如果有子节点说明被展开过,返回(退出该方法)
        
        /*从XML文件中读入子节点数据，构造下一级节点*/
        elements     = xmlDoc.selectNodes("//CatalogInfoTb[ParentCatalog='"+clickednode.getAttribute('Id')+"']");
        for(var n =0; n < elements.length;n++)
        {
            childnode   = document.getElementById("TreeList").createTreeNode();  
            oid         = elements.item(n).childNodes[0].childNodes[0].nodeValue;
            catalogName = elements.item(n).childNodes[3].childNodes[0].nodeValue
            childnode.setAttribute("Id",oid);
            childnode.setAttribute("NodeData",oid);
            childnode.setAttribute("Text",catalogName);
            childnode.setAttribute("NAVIGATEURL","#");
            if(xmlDoc.selectSingleNode("//CatalogInfoTb[ParentCatalog='"+ oid +"']") != null)
            {
                childnode.setAttribute("Expandable","always");
            }
            clickednode.add(childnode);  
        }        
    }
     </ script >
</ head >
< body  onload ="window_load();" >
     < form  id ="form1"  runat ="server" >
     < div >
         < table  style ="WIDTH: 100%;height:100%"  cellspacing ="0"  cellpadding ="0"  border ="0" >
             < tr  valign ="top"  style ="height:100%" >
                 < td  style ="width: 100%; height: 100%" >
                     < iewc:TreeView  ID ="TreeList"  runat ="server"  BackColor ="#EEEEEE"  ExpandLevel ="4" ></ iewc:TreeView >
                 </ td >
             </ tr >
         </ table >
     </ div >
     </ form >
</ body >
</ html >

 

该实例直接采用js读取xml来加载树型列表，其中涉及到的知识点还有xml,xml dom以及微软的树控件

在使用微软的树控件时，由于采用的是递归算法，在树的层次过多的情况下速度会很慢，改用js读取xml文件加载的话，速度上不存在任何问题，我曾经测试过，总共1000多个节点，层次最大达到5层时，能很快的显示。

用这种方法有一点需要注意，如果数据源更新了，它可能不能及时的读取到新数据，因为在上面的代码中，判断了在点击某个节点加载其子节点时，如果该子节点以前加载过，则不会重新加载，也就是

if (childnode.length  >   0 )  return ;

 

这句，当然也可以修改一下，改成不管什么时候都去重新读取点击节点的字节点数据。

如果不用读取xml文件的话，也可以改用xmlhttp发送异步命令来获取数据库中的数据。

参考资料：http://msdn2.microsoft.com/zh-CN/library/ms256471.aspx
                    http://www.w3pop.com/tech/school/dom/default.asp
                    微软树控件的treeview.htc，在webctrl_client/1_0目录下

 

 

 

评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值