XML对数据岛数据实现动态排序二法(1)

博客介绍了通过为<xsl:param>标签设定参数实现动态排序的方法。给出了HTML、XML和XSLT代码示例,还包含VBScript和JavaScript脚本,用于加载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>

下载前必看:https://pan.quark.cn/s/a4b39357ea24 在本资料中,将阐述如何运用JavaScript达成单击下拉列表框选定选项后即时转向对应页面的功能。 此种技术适用于网页布局中用户需迅速选取并转向不同页面的情形,诸如网站导航栏或内容目录等场景。 达成此功能,能够显著改善用户交互体验,精简用户的操作流程。 我们须熟悉HTML里的`<select>`组件,该组件用于构建一个选择列表。 用户可从中选定一项,并可引发一个事件来响应用户的这一选择动作。 在本次实例中,我们借助`onchange`事件监听器来实现当用户在下拉列表框中选定某个选项时,页面能自动转向该选项关联的链接地址。 JavaScript里的`window.location`属性旨在获取或设定浏览器当前载入页面的网址,通过变更该属性的值,能够实现页面的转向。 在本次实例的实现方案里,运用了`eval()`函数来动态执行字符串表达式,这在现代的JavaScript开发实践中通常不被推荐使用,因为它可能诱发安全问题及难以排错的错误。 然而,为了本例的简化展示,我们暂时搁置这一问题,因为在更复杂的实际应用中,可选用其他方,例如ES6中的模板字符串或其他函数来安全地构建和执行字符串。 具体到本例的代码实现,`MM_jumpMenu`函数负责处理转向逻辑。 它接收三个参数:`targ`、`selObj`和`restore`。 其中`targ`代表要转向的页面,`selObj`是触发事件的下拉列表框对象,`restore`是标志位,用以指示是否需在转向后将下拉列表框的选项恢复至默认的提示项。 函数的实现通过获取`selObj`中当前选定的`selectedIndex`对应的`value`属性值,并将其赋予`...
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值