对数据岛数据实现动态排序二法

博客介绍了数据岛动态排序的两种实现方法。一是为<xsl:param>标签设定参数实现动态排序,此方法被推荐;二是直接通过DOM实现,但灵活性欠缺。文中给出了具体的代码示例,包括HTML、XML、XSL和脚本代码。


现在数据岛被越来越广泛的应用;其中必然会涉及到的就是动态排序了;下面列出两种实现方法:

1、为<xsl:param>标签设定参数实现动态排序(推荐)
<html>
<body>
<table DATASRC="#catalogs" border=1>
<thead>
<tr>
<td onclick="sort('TITLE','descending');">TITLE</td>
<td>ARTIST</td>
<td onclick="sort('COUNTRY','ascending');">COUNTRY</td>
<td>COMPANY</td>
<td>PRICE</td>
<td>YEAR</td>
</tr>
</thead>
<tbody>
<tr>
<td ><div DATAFLD="TITLE"></div></td>
<td ><div DATAFLD="ARTIST"></div></td>
<td ><div DATAFLD="COUNTRY"></div></td>
<td ><div DATAFLD="COMPANY"></div></td>
<td ><div DATAFLD="PRICE"></div></td>
<td ><div DATAFLD="YEAR"></div></td>
</tr>
</tbody>
</table>

<xml id="catalogs">
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
Bob Dylan
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Burlesque</TITLE>
Dylan
<COUNTRY>UA</COUNTRY>
<COMPANY>umbia</COMPANY>
<PRICE>1.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Empire</TITLE>
Bob
<COUNTRY>US</COUNTRY>
<COMPANY>bia</COMPANY>
<PRICE>12.90</PRICE>
<YEAR>1995</YEAR>
</CD>
</CATALOG>
</xml>

<xml id="xstyle">
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml"/>
<xsl:param name="sortorder" select="'descending'"/>
<xsl:param name="sortfield" select="'xxx'"/>
<xsl:template match="/">
<CATALOG>
<xsl:for-each select="CATALOG/CD">
<xsl:sort select="*[name()=$sortfield]" order="{$sortorder}" />
<CD>
<TITLE><xsl:value-of select="TITLE"/></TITLE>
<xsl:value-of select="ARTIST"/>
<COUNTRY><xsl:value-of select="COUNTRY"/></COUNTRY>
<COMPANY><xsl:value-of select="COMPANY"/></COMPANY>
<PRICE><xsl:value-of select="PRICE"/></PRICE>
<YEAR><xsl:value-of select="YEAR"/></YEAR>
</CD>
</xsl:for-each>
</CATALOG>
</xsl:template>
</xsl:stylesheet>
</xml>

<script language="vbscript">
function sort(strSortField, strSortOrder)

  dim objXSL, objXML, objTemplate, objProcessor, strHTML, strDrinkType
 
  Set objXML = CreateObject("Msxml2.FreeThreadedDOMDocument")
  Set objXSL = CreateObject("Msxml2.FreeThreadedDOMDocument")
  
  'Load the XML document
  objXML.async = False
  objXML.Loadxml catalogs.xml  
  
  'Load the XSL document
  objXSL.async = False
  objXSL.Loadxml xstyle.xml
     
  'Create an instance of our XSL Template object
  Set objTemplate = CreateObject("MSXML2.XSLTemplate")
     
  'Create an instance of our stylesheet object using our recently loaded XSLT document
  Set objTemplate.stylesheet = objXSL
      
  'Create an instance of our Processor object
  Set objProcessor = objTemplate.createProcessor

  'Define the input object for our object equal to our recently loaded XML document
  objProcessor.input = objXML

  'Now, finally we can add any parameters that we require to our Template processor
  objProcessor.AddParameter "sortfield", strSortField
  objProcessor.AddParameter "sortorder", strSortOrder
     
  'Last but not least we do our transformation
  objProcessor.Transform
     
  'Store the results of the output into a string.
  strXML = objProcessor.output

  'Load up an XML DOM object from the recent XML output
  objXML.loadxml strXML
  
  'Select only the "employees" elements from our document object
  objXML.selectNodes("//CATALOG")
  
  'Load our Data Island using our new XML object
  catalogs.loadxml  objXML.xml  
 end function  
</script>

<script language="javascript">
function sort2(xmlObj, xslObj, sortByColName)
{
var xmlData=eval("document.all."+xmlObj).XMLDocument;
var xslData=eval("document.all."+xslObj).XMLDocument;
var nodes=xslData.documentElement.selectSingleNode("xsl:for-each");
nodes.selectSingleNode("@order-by").value=sortByColName;

xmlData.documentElement.transformNodeToObject(xslData.documentElement,xmlData);
}
</script>

</body>
</html>

2、直接通过DOM实现,灵活性欠缺:
<html>
<body>
<table DATASRC="#catalogs" border=1>
<thead>
<tr>
<td onclick="sort('catalogs','xstyle','TITLE');">TITLE</td>
<td>ARTIST</td>
<td>COUNTRY</td>
<td>COMPANY</td>
<td>PRICE</td>
<td>YEAR</td>
</tr>
</thead>
<tbody>
<tr>
<td ><div DATAFLD="TITLE"></div></td>
<td ><div DATAFLD="ARTIST"></div></td>
<td ><div DATAFLD="COUNTRY"></div></td>
<td ><div DATAFLD="COMPANY"></div></td>
<td ><div DATAFLD="PRICE"></div></td>
<td ><div DATAFLD="YEAR"></div></td>
</tr>
</tbody>
</table>

<xml id='catalogs'>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
Bob Dylan
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Burlesque</TITLE>
Dylan
<COUNTRY>UA</COUNTRY>
<COMPANY>umbia</COMPANY>
<PRICE>1.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Empire</TITLE>
Bob
<COUNTRY>US</COUNTRY>
<COMPANY>bia</COMPANY>
<PRICE>12.90</PRICE>
<YEAR>1995</YEAR>
</CD>
</CATALOG>
</xml>

<xml id="xstyle">
<CATALOG>
<xsl:for-each select="CD" order-by="+TITLE" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<CD>
<TITLE><xsl:value-of select="TITLE"/></TITLE>
<xsl:value-of select="ARTIST"/>
<COUNTRY><xsl:value-of select="COUNTRY"/></COUNTRY>
<COMPANY><xsl:value-of select="COMPANY"/></COMPANY>
<PRICE><xsl:value-of select="PRICE"/></PRICE>
<YEAR><xsl:value-of select="YEAR"/></YEAR>
</CD>
</xsl:for-each>
</CATALOG>
</xml>

<script language="javascript">
function sort(xmlObj, xslObj, sortByColName)
{
var xmlData=eval("document.all."+xmlObj).XMLDocument;
var xslData=eval("document.all."+xslObj).XMLDocument;
var nodes=xslData.documentElement.selectSingleNode("xsl:for-each");
nodes.selectSingleNode("@order-by").value=sortByColName;

xmlData.documentElement.transformNodeToObject(xslData.documentElement,xmlData);
}
</script>
</body>
</html>

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值