今天对前面学习的xmlHttp的一个实践,实现了对xmlHttp以及xmlDOM的综合应用以及通过xsl显示xml数据，并实现了客户端排序，引申一下可以实现客户端分页以及排序，具体性能如何有待测试。为了方便演示，把数据库取数的函数屏蔽，改为直接从xml文件获取数据，分页部分去掉。
例子：default.aspx
<html>
<head runat="server">
<title>Test</title>
<script language="javascript" type="text/javascript">
<!--
var xmlDoc = null;
var xmlXslt = null;
var xmlHttp = null;
function WriteXml(xmlText)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("AutoType.xml");
//xmlDoc.loadXML(xmlText);//屏蔽掉从服务器数据取数
xmlXslt = new ActiveXObject("Microsoft.XMLDOM");
xmlXslt.async = false;
xmlXslt.load("XslAutoType.xsl");
Layer3.innerHTML = xmlDoc.transformNode(xmlXslt);
}
function GetValue()//此函数获取数据库的数据
{
// xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
// xmlHttp.open("GET","../testXmlHttp/GetValue.aspx?i"+Math.random(),false);
//xmlHttp.send();
//alert(xmlHttp.responseText);
WriteXml(xmlHttp.responseText);
}
//客户端排序函数,具体通过改变Xsl的<xsl:sort...>实现
function ClientSort(strSortField)
{
sortField = xmlXslt.selectSingleNode("//xsl:sort/@select");
orderField = xmlXslt.selectSingleNode("//xsl:sort/@order");
dataType = xmlXslt.selectSingleNode("//xsl:sort/@data-type"); //通过设置类型来区分排序的列为数值型还是文本型，如果不设置的话，客户端默认是以文本型进行排序
sortField.value=strSortField;
if(orderField.value=="ascending")
{
orderField.value="descending";
}
else
{
orderField.value="ascending";
}
if(sortField.value != "iAutoTypeID")
{
dataType.value = "text";
}
else
{
dataType.value = "number"; //ID号的排序Data-Type需要设置为数字类型
}
Layer3.innerHTML = xmlDoc.transformNode(xmlXslt);
}
// -->
</script>
</head>
<body οnlοad="GetValue();">
<div id="Layer3"></div>
</body>
</html>
XslAutoType.xsl文件
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>
汽车品牌列表
</title>
</head>
<body>
<table width="700px" border="1" align="center" cellpadding="1" cellspacing="0" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr>
<td style="cursor:hand" onClick="ClientSort('iAutoTypeID')">编号</td>
<td style="cursor:hand" onClick="ClientSort('sAutoTypeName')">名称</td>
<td style="cursor:hand" onClick="ClientSort('sAutoTypeFlag')">类型</td>
<td style="cursor:hand" onClick="ClientSort('dCreatedOn')">日期</td>
</tr>
<xsl:apply-templates select="TestDataBase/AutoType">
<xsl:sort select="iAutoTypeID" order="ascending" data-type="number"/>
</xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="AutoType">
<tr>
<td width="50px">
<xsl:value-of select="iAutoTypeID"/>
</td>
<td width="300px">
<xsl:value-of select="sAutoTypeName"/>
</td>
<td width="50px">
<xsl:value-of select="sAutoTypeFlag"/>
</td>
<td width="300px">
<xsl:value-of select="dCreatedOn"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
AutoType.xml文件
<?xml version="1.0" encoding="utf-8" ?>
<TestDataBase>
<AutoType>
<iAutoTypeID>1</iAutoTypeID>
<iAutoTypeParentID>0</iAutoTypeParentID>
<sAutoTypeName>福特 Ford</sAutoTypeName>
<sAutoTypeFlag>品牌</sAutoTypeFlag>
<iAutoTypeOrder>1</iAutoTypeOrder>
<iCarmakerID>1</iCarmakerID>
<bDeleted>false</bDeleted>
<iCreatedBy>3</iCreatedBy>
<dCreatedOn>1900-01-01T00:00:00+08:00</dCreatedOn>
<iUpdatedBy>3</iUpdatedBy>
<dUpdatedOn>2004-10-19T08:47:00+08:00</dUpdatedOn>
<tTimesTamp>AAAAAAC4TRE=</tTimesTamp>
</AutoType>
<AutoType>
<iAutoTypeID>2</iAutoTypeID>
<iAutoTypeParentID>5769</iAutoTypeParentID>
<sAutoTypeName>福特“翼虎”Maverick</sAutoTypeName>
<sAutoTypeFlag>车型</sAutoTypeFlag>
<iAutoTypeOrder>1</iAutoTypeOrder>
<iCarmakerID>1</iCarmakerID>
<bDeleted>false</bDeleted>
<iCreatedBy>3</iCreatedBy>
<dCreatedOn>1900-01-01T00:00:00+08:00</dCreatedOn>
<iUpdatedBy>3</iUpdatedBy>
<dUpdatedOn>2005-04-28T14:57:00+08:00</dUpdatedOn>
<tTimesTamp>AAAAAAC4TRI=</tTimesTamp>
</AutoType>
<AutoType>
<iAutoTypeID>3</iAutoTypeID>
<iAutoTypeParentID>0</iAutoTypeParentID>
<sAutoTypeName>捷豹 Jaguar</sAutoTypeName>
<sAutoTypeFlag>品牌</sAutoTypeFlag>
<iAutoTypeOrder>2</iAutoTypeOrder>
<iCarmakerID>1</iCarmakerID>
<bDeleted>false</bDeleted>
<iCreatedBy>3</iCreatedBy>
<dCreatedOn>1900-01-01T00:00:00+08:00</dCreatedOn>
<iUpdatedBy>5</iUpdatedBy>
<dUpdatedOn>2005-02-21T12:28:00+08:00</dUpdatedOn>
<tTimesTamp>AAAAAAC4TRM=</tTimesTamp>
</AutoType>
<AutoType>
<iAutoTypeID>8</iAutoTypeID>
<iAutoTypeParentID>0</iAutoTypeParentID>
<sAutoTypeName>Jeep 大切诺基</sAutoTypeName>
<sAutoTypeFlag>品牌</sAutoTypeFlag>
<iAutoTypeOrder>2</iAutoTypeOrder>
<iCarmakerID>31</iCarmakerID>
<bDeleted>false</bDeleted>
<iCreatedBy>3</iCreatedBy>
<dCreatedOn>1900-01-01T00:00:00+08:00</dCreatedOn>
<iUpdatedBy>3</iUpdatedBy>
<dUpdatedOn>2004-10-25T11:48:00+08:00</dUpdatedOn>
<tTimesTamp>AAAAAAC4TRQ=</tTimesTamp>
</AutoType>
<AutoType>
<iAutoTypeID>156</iAutoTypeID>
<iAutoTypeParentID>0</iAutoTypeParentID>
<sAutoTypeName>捷达</sAutoTypeName>
<sAutoTypeFlag>品牌</sAutoTypeFlag>
<iAutoTypeOrder>1</iAutoTypeOrder>
<iCarmakerID>35</iCarmakerID>
<bDeleted>false</bDeleted>
<iCreatedBy>2</iCreatedBy>
<dCreatedOn>1900-01-01T00:00:00+08:00</dCreatedOn>
<iUpdatedBy>2</iUpdatedBy>
<dUpdatedOn>2004-10-19T16:12:00+08:00</dUpdatedOn>
<tTimesTamp>AAAAAAC4TT8=</tTimesTamp>
</AutoType>
<AutoType>
<iAutoTypeID>202</iAutoTypeID>
<iAutoTypeParentID>199</iAutoTypeParentID>
<sAutoTypeName>舒适型</sAutoTypeName>
<sAutoTypeFlag>车型</sAutoTypeFlag>
<iAutoTypeOrder>2</iAutoTypeOrder>
<iCarmakerID>39</iCarmakerID>
<bDeleted>false</bDeleted>
<iCreatedBy>4</iCreatedBy>
<dCreatedOn>1900-01-01T00:00:00+08:00</dCreatedOn>
<iUpdatedBy>4</iUpdatedBy>
<dUpdatedOn>2004-12-22T13:49:00+08:00</dUpdatedOn>
<tTimesTamp>AAAAAAC4TVE=</tTimesTamp>
</AutoType>
<AutoType>
<iAutoTypeID>218</iAutoTypeID>
<iAutoTypeParentID>0</iAutoTypeParentID>
<sAutoTypeName>帕萨特</sAutoTypeName>
<sAutoTypeFlag>品牌</sAutoTypeFlag>
<iAutoTypeOrder>3</iAutoTypeOrder>
<iCarmakerID>39</iCarmakerID>
<bDeleted>false</bDeleted>
<iCreatedBy>4</iCreatedBy>
<dCreatedOn>1900-01-01T00:00:00+08:00</dCreatedOn>
<iUpdatedBy>4</iUpdatedBy>
<dUpdatedOn>2004-10-19T16:24:00+08:00</dUpdatedOn>
<tTimesTamp>AAAAAAC4TVI=</tTimesTamp>
</AutoType>
</TestDataBase>
3525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
