您的位置：首页 > Web前端 > JavaScript

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

2006-10-20 17:04 531 查看

文中涉及到的xml文档如下：

<?xml version="1.0" standalone="yes"?>

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

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

<OID>03f8a1e4a0004e8dbede0edf9879fda0</OID>

</CatalogInfoTb>

</CatalogInfoTb>

<OID>83711cd0aa4e4fb88ecdabea9fc0596d</OID>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

<ParentCatalog>24314e039049494fa16a4efdfe03f766</ParentCatalog>

</CatalogInfoTb>

<ParentCatalog>24314e039049494fa16a4efdfe03f766</ParentCatalog>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

<OID>24314e039049494fa16a4efdfe03f766</OID>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

<OID>014a6f3625ce47a2b077eecdd79e1995</OID>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</CatalogInfoTb>

</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">

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>

<div>

<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目录下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： xml javascript c string function mozilla

相关文章推荐

新的分享

章节导航