流落街头(蜗牛)

我要一步一步往上爬,等待阳光静静看着它的脸,小小的天有大大的梦想,重重的壳挂着轻轻的仰望(轻轻的仰望),我要一步一步往上爬,在最高点撑着夜往前飞,小小的天有大大的梦想,总有一天我要属于我的天

原创  利用Javascript读取xml文件，构建树型列表 收藏

 文中涉及到的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目录下

发表于 @ 2006年10月20日　17:04:00 | 评论( loading... ) | 编辑| 举报| 收藏

旧一篇:.NET消息传送过程中的涉及到加密解密示例图  | 新一篇:SQL Server分页的存储过程
查看最新精华文章 请访问博客首页相关文章
  • 发表评论
  • 评论内容：
  •  
Copyright © PPLUNCLE
Powered by CSDN Blog