在Web开发中,我们经常会遇到分页显示和排序数据记录集的情况,这在服务器端使用服务器端的代码和数据库技术是件很轻松的事情,比如:ASP、PHP、JSP等。然而,如果要在客户端显示多条记录并且排序是一件很令人头疼的事情。下面,我们利用Extensible Markup Language(XML,可扩展标记语言)和Extensible Stylesheet Language Transformations(XSLT,可扩展样式单语言转换),并结合XML Path Language(XPath,XML路径语言),只需要编写简单的代码,就可轻松实现。这种方法避免了与服务器频繁打交道的过程,节省了数据显示的时间,浏览者无须等待就可以看到结果,也可以减少服务器的负担。另外。由于XML和XSLT技术,使数据存储和数据显示分离,还可以让我们的代码能够重复利用,大大减轻了程序员编写代码的负担。
下面,我们一步一步地来实现我们的功能。
首先:创建XSLT
XSLT样式单的第一行标明该XML所遵照的XML规范版本,然后是标明该样式单使用的名称空间,这里,我们以XSL规范的正式版本来进行编写,而不采用XSL的草案的写法:
注意:两者在功能和写法上有很大的差异。
接下来,我们定义XSLT里的模板标记:
我们把要显示的样式写到模板里面。我们使用HTML的数据岛来存放我们的数据,这些数据可以利用SQL Server 2000的XML查询来得到,对于不支持XML的数据库,我们可以自己编写组件把数据转换成XML格式,然后在放到数据岛里。在HTML里使用数据岛有两种方法:
一是直接嵌入数据,如下所示:
<客户关系表>
<客户>每条数据客户>
客户关系表>
二是通过SRC属性引用外部文件,如下所示:
要使用数据岛里的数据,必须通过id名来引用它,当然,由于XSLT文件也是XML格式文件的一种,也可以通过这种方法来实现:
我们在页面中加入标记DIV来显示我们的转换的结果:
使用XSLT转换数据岛里的数据,采用DOMDocument的transNode()方法,并把结果通过DIV的innerHTML属性来展现出来:
DisplayArea.innerHTML = Data.transformNode(Style.DocumentElement)
第二步:实现客户端排序的功能
我们先设定一个默认的排序字段,这里选择“序号”作为默认的排序关键字,并且是按递增的顺序排列,在XSLT里加入sort标记:
接下来,我们为样式表增加排序的功能,以便可以响应用户的操作,我们在表头的每个列上添加onClick事件,该事件调用sort()函数,允许用户通过单击该表头来进行对该列的排序。
序号
Sort()函数的语句如下所示:
Function Sort(strField)
Dim sortField
Dim sortOrderAttribute
'' 得到原来排序字段的属性值
Set sortField = Style.XMLDocument.selectSingleNode("//xsl:sort/@select")
'' 得到原来排序的顺序属性值
Set sortOrderAttribute = Style.XMLDocument.selectSingleNode("//xsl:sort/@order")
'' 如果我们已经按所点击的列的字段排序,我们必须改变排序的顺序;
'' 否则,我们只需要按新所点击的列字段按默认的顺序进行排序
If sortField.Value = strField Or sortField.Value = "./*[0]" Then
If sortOrderAttribute.Value = "descending" Then
sortOrderAttribute.Value = "ascending"
Else
sortOrderAttribute.Value = "descending"
End If
Else
sortField.Value = strField
sortOrderAttribute.Value = "ascending"
End If
Set sortField = Nothing
Set sortOrderAttribute = Nothing
'' 输出排序后的结果
DisplayArea.innerHTML = Data.transformNode(Style.DocumentElement)
End Function
下面,我们实现每页面显示的记录数和设定前页、后页的功能。使用span标记显示目前显示的是第几页、共多少页和记录的总数。我们默认每页显示6条记录,用变量intRecordsPerPage保存该值:
第 页 总 页 共有 条记录
每页记录数:
下面以“下一页”按钮执行的操作为例子,说明转换不同页面的处理过程。该函数根据参数intPage来决定要显示的记录的条数和相应的页面,每个按钮Value值的变化是通过动态改变XSL DOM的内容来实现的:
Function nextPage(intPage)
Dim strDisplay
Dim strDateRange
If CInt(CStr(intPage) * intRecordsPerPage) < _
Data.selectNodes("/客户关系表/客户").length Then
intPage = CInt(intPage) + 1
Style.XMLDocument.selectNodes("//@OnClick") _
(1).Value = "previousPage(" & intPage & ")"
Style.XMLDocument.selectNodes("//@OnClick") _
(2).Value = "nextPage(" & intPage & ")"
Style.XMLDocument.selectNodes _
("//xsl:for-each/@select")(1).Value = _
"./客户[position() <= " & (CStr(intPage) _
* intRecordsPerPage) & " and position() > " _
& (CInt(intPage) - 1) * intRecordsPerPage & _
"]"
redisplay (intPage)
End If
End Function
下面,我们来看看设置每个页面记录条数的函数setRecordsPerPage(),该函数通过动态修改xsl:for-each的select属性值来实现的,使用XPath来遍历那些符合节点位置大于0并且节点位置小于每页记录数加1的那些节点。其中主要的语句是下面的一行:
Style.XMLDocument.selectNodes("//xsl:for-each/@select")(1). _
value = "./客户[position() < " & intRecordsPerPage + 1 & " and "& " position() > 0]"
到目前为止,我们的页面既可以实现排序,也实现动态改变每页显示记录条数的功能了,为了实现可重用的要求,我们还可以进行进一步的改进。XPath是进行XML/XSLT应用开发的一个强有力的工具,XPath中可以使用通配符,使XSLT样式单文件完全不依赖于你的数据节点名称。因此,我们在改变XML数据的时候,只要不改变节点的层次关系,可以不必改动XSLT就可以直接使用。比如:在本例中,你可以添加或者删除某些字段、或添加删除一些记录,直接使用本例中的XSLT,不但可以在表格里正常显示出数据,而且还能正常排序和分页。
下面我们就分析一下是如何实现的。比如下面的层次关系:
<客户关系表>
<客户>
<序号>序号>
<姓名>姓名>
<电子邮件>电子邮件>
客户>
客户关系表>
假如我们的XSLT中有这样一个选择模板的句子:
为了实现通用性的要求,我们可以使用通配符:
这里我们使用了子运算符"/",它选择了根下的所有节点,两者的不同点在于:"/客户关系表"选择的是根下的客户关系表子节点,而"/*"选择的是根下所有的直接子节点,在上面的XML数据格式中,二者是完全等价的。
对于下面的for-each循环来说:
我们可以改变成这样的形式:
这里"./*"表示你应当包含进去当前节点下所有的一级子节点,语法"./*[1]"表示的是选择当前节点中的第一个子节点。
另外还有一个地方可以改进的是
在我们的函数中,还使用了一些硬代码,如果不做改动的话,我们的通用性还是实现不了,因此,我们下面就看看如何替换硬代码中的语句。
在创建表头的时候,我们使用了 序号 的语句,如果XML数据里没有序号节点的话,这里显然会出现错误的,为了实现通用性,我们自定义了一个函数getName,来取得所要显示的节点的名称:
Sort(''
自定义函数是XSLT的一个突出的功能,要使用这个特性,我们得用msxml:script元素来定义,同时,必须在样式单定义的时候指定一个用户定义的名字空间。下面就是我们使用自定义函数的全部内容:
xmlns:user="http://lucky.myrice.com"
version="1.0">
function getName(node)
getName = node.item(0).nodeName
end function
}>
在我们的XSLT文件中,使用了两个循环,我们分别进行相应的更改,第一处:显示表头的地方改为
以下是完整的Style.xsl文件的内容:
Function getName(node)
getName = node.Item(0).nodeName
End Function
}>
第 页 总 页 共有 条记录
每页记录数:
Sort(''
以下是进行输出的Exam.htm文件:
客户关系表
资料来源:【孟宪会之精彩世界】 |
相关视频
相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么
热门文章 360快剪辑怎么使用 36金山词霸如何屏幕取词百度收购PPS已敲定!3
最新文章
微信3.6.0测试版更新了微信支付漏洞会造成哪
360快剪辑怎么使用 360快剪辑软件使用方法介酷骑单车是什么 酷骑单车有什么用Apple pay与支付宝有什么区别 Apple pay与贝贝特卖是正品吗 贝贝特卖网可靠吗
人气排行 xp系统停止服务怎么办?xp系统升级win7系统方电脑闹钟怎么设置 win7电脑闹钟怎么设置office2013安装教程图解:手把手教你安装与qq影音闪退怎么办 QQ影音闪退解决方法VeryCD镜像网站逐个数,电驴资料库全集同步推是什么?同步推使用方法介绍QQ2012什么时候出 最新版下载EDiary——一款好用的电子日记本
查看所有0条评论>>