Motivation:
The sorting function makes the data on our page more humanized, which is a common function effect we have seen on the website. In the past, automatic sorting was done with a lot of scripting code, which is a difficult thing for the average enthusiast. However, it is much simpler to deal with it in XML. Let your own page more gorgeous, haha, you are not also echocardiography it!
Materials:
Dynamic ordering of XML volumes
There are 2 files: Paixu.xml and paixu.xsl
Role:
In the case of not refreshing the page, according to the user's own needs of the data to reorder the display, effectively improve the interactive function of data, so that their own pages more colorful.
Effect:
Browse here
Code:
Paixu.xml
<?xml version= "1.0" encoding= "gb2312"?>
<?xml-stylesheet type= "text/xsl" href= "paixu.xsl"?>
<BlueIdea>
<team>
<blue_ID>1</blue_ID>
<blue_name>Sailflying</blue_name>
<blue_text> a simple sort </blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>xml Special Topics </blue_class>
</team>
<team>
<blue_ID>2</blue_ID>
<blue_name>flyingbird</blue_name>
<blue_text> marry you, is to you pain </blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class> Irrigation Essence </blue_class>
</team>
<team>
<blue_ID>3</blue_ID>
<blue_name> The harsh child </blue_name>
The application of <blue_text> regular expression in UBB forum </blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>web Programming Essence </blue_class>
</team>
<team>
<blue_ID>4</blue_ID>
<blue_name> b Lang </blue_name>
<blue_text> end of the year Classic Rudder party complete manual v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class> Forum Irrigation Area </blue_class>
</team>
<team>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>asp Error Information </blue_text>
<BLUE_TIME>2001-10-13 16:39:05</blue_time>
<blue_class>javascript Scripts </blue_class>
</team>
</BlueIdea>
Paixu.xsl
<?xml version= "1.0" encoding= "gb2312"?>
<xsl:stylesheet xmlns:xsl= "http://www.w3.org/TR/WD-xsl">
<xsl:template match= "/" >
<title> XML volumes of actual combat (1): Dynamic sorting </title>
<style>
body,blueidea,team,blue_id,blue_name,blue_text,blue_time,blue_class{font:12px, "Arial", "Times New Roman";}
Table {font-size:12px; border:0px double border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC, Cellpadding:3;cellspacing:3 b Gcolor: #eeeeee; Text-decoration:blink}
span {font-size:12px; color:red;}
</style>
<script>
function Taxis (x)
{
Stylesheet=document. Xsldocument;
Source=document. XmlDocument;
Sortfield=document. Xsldocument.selectsinglenode ("//@order-by");
Sortfield.value=x;
Layer1.innerhtml=source.documentelement.transformnode (stylesheet);
}
</script>
<body>
<p align= "Center" ><span>xml volume of the actual combat Kam (1): Dynamic sorting </span></p>
<div id= "Layer1" name= "Layer1" >
<xsl:apply-templates select= "Blueidea"/>
</div>
</body>
</xsl:template>
<xsl:template match= "Blueidea" >
<table width= border= "1" align= "center" cellpadding= "1" cellspacing= "1" bordercolordark= "#ffffff" bordercolorlight= "#ADAAAD" >
<tr bgcolor= "#FFCC99" align= "Center" >
<TD style= "Cursor:s-resize" > Number </td>
<TD style= "Cursor:s-resize" > Name </td>
<TD style= "cursor:s-resize" > Theme </td>
<TD style= "Cursor:s-resize" > Publishing Time </td>
<TD style= "cursor:s-resize" > Classification </td>
</tr>
<xsl:apply-templates select= "Team" order-by= "blue_id"/>
</table>
</xsl:template>
<xsl:template match= "Team" >
<TR align= "center" >
<xsl:apply-templates select= "blue_id"/>
<xsl:apply-templates select= "Blue_name"/>
<xsl:apply-templates select= "Blue_text"/>
<xsl:apply-templates select= "Blue_time"/>
<xsl:apply-templates select= "Blue_class"/>
</tr>
</xsl:template>
<xsl:template match= "blue_id" >
<TD bgcolor= "#eeeeee" >
<xsl:value-of/>
</td>
</xsl:template>
<xsl:template match= "Blue_name" >
<td>
<xsl:value-of/>
</td>
</xsl:template>
<xsl:template match= "Blue_text" >
<td>
<xsl:value-of/>
</td>
</xsl:template>
<xsl:template match= "Blue_time" >
<td>
<xsl:value-of/>
</td>
</xsl:template>
<xsl:template match= "Blue_class" >
<td>
<xsl:value-of/>
</td>
</xsl:template>
</xsl:stylesheet>
Explain:
1 Paixu.xml is a data file, I believe we will not have any problems.
2 paixu.xsl is a format file, there are several places to pay attention to.
(1) in the script:
Sortfield=document. Xsldocument.selectsinglenode ("//@order-by");
The function is to find the first node that has a property of order-by, so its corresponding node is
<xsl:apply-templates select= "Team" order-by= "blue_id"/>
So in the first onload, the value of order-by is blue_id.
And we do this by redefining the value of the order-by to achieve the order.
Layer1.innerhtml=source.documentelement.transformnode (stylesheet);
The effect is to change the Layer1 after transforming the XML data, so after the outgoing parameter ' Blue_name ',
<TD style= "Cursor:s-resize" > Name </td>
We modify the value of the order-by to be ' blue_name ', that is, ' blue_name ' as a sort of method.
The new sorted content is then displayed by Layer1 the innerHTML value of the display.
(2) in the text:
Order-by
This can not be less oh, or you can not find, the effect of it, you look at it!!
<?xml version= "1.0" encoding= "gb2312"?>
Another point:
Few of the code shown in most XML textbooks add encoding= "gb2312",
So when we use Chinese in XML, we get an error, because we don't write this statement.
Postscript:
We are familiar with the dynamic sequencing of the completion of ideas will be found, in fact, our implementation of the method is very simple.
is to modify the value of the order-by and then display it again.
In the dynamic query and dynamic paging function we are still in accordance with this idea to complete.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
