XML Volume Practical Tips (1): Dynamic Sorting-XML/RSS Tutorial-php.cn

XML Volume Practical Tips (1): Dynamic Sorting

黄舟

Release： 2017-02-10 16:09:32

Original

1887 people have browsed it

Motivation:
The sorting function makes the data on our page appear more humane, which is a very common functional effect we have seen on websites. In the past, automatic sorting was done with a lot of script code, which was difficult for ordinary enthusiasts. However, it is much simpler to deal with it using XML. Make your page more gorgeous, haha, are you excited too!

Materials:
Dynamic sorting of XML volumes
There are 2 files: paixu.xml and paixu.xsl

Function:
Update without refreshing the page Re-order and display the data according to the user's own needs, effectively improving the data interaction function and making their 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>一个简单的排序</blue_text>
    <blue_time>2002-1-11 17:35:33</blue_time>
    <blue_class>XML专题</blue_class>
  </team>
  <team>
    <blue_ID>2</blue_ID>
    <blue_name>flyingbird</blue_name>
    <blue_text>嫁给你，是要你疼的</blue_text>
    <blue_time>2001-09-06 12:45:51</blue_time>
    <blue_class>灌水精华</blue_class>
  </team>
  <team>
    <blue_ID>3</blue_ID>
    <blue_name>苛子</blue_name>
    <blue_text>正则表达式在ＵＢＢ论坛中的应用</blue_text>
    <blue_time>2001-11-23 21:02:16</blue_time>
    <blue_class>Web 编程精华</blue_class>
  </team>
  <team>
    <blue_ID>4</blue_ID>
    <blue_name>太乙郎</blue_name>
    <blue_text>年末经典分舵聚会完全手册 v0.1</blue_text>
    <blue_time>2000-12-08 10:22:48</blue_time>
    <blue_class>论坛灌水区</blue_class>
  </team>
  <team>
    <blue_ID>5</blue_ID>
    <blue_name>mmkk</blue_name>
    <blue_text>Asp错误信息总汇</blue_text>
    <blue_time>2001-10-13 16:39:05</blue_time>
    <blue_class>javascript脚本</blue_class>
  </team>
</BlueIdea>

Copy after login

paixu.xsl

<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title> XML卷之实战锦囊（1）：动态排序</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; bgcolor:#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>
</head>
<body>
<p align="center"><span>XML卷之实战锦囊（1）：动态排序</span></p>
<p id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</p>
</body>
</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td style="cursor:s-resize" onClick="taxis(&#39;blue_ID&#39;)">编号</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_name&#39;)">姓名</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_text&#39;)">主题</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_time&#39;)">发表时间</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_class&#39;)">归类</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>

Copy after login

Explanation:
1) paixu.xml is a data file, I believe everyone will have no problem.
2) paixu.xsl is a format file, there are several things to pay attention to.
(1) In the script:

sortField=document.XSLDocument.selectSingleNode("//@order-by");
The function is: find the first one with the attribute order-by node, so its corresponding node is

Therefore, the value of order-by during the first onLoad is blue_ID .
And we achieve the purpose of sorting by redefining the value of order-by.

Layer1.innerHTML=source.documentElement.transformNode(stylesheet);

Copy after login

The function is to change Layer1 after converting the XML data, so after passing out the parameter 'blue_name',

<td style="cursor:s-resize" onClick="taxis(&#39;blue_name)">姓名</td>

Copy after login

We change the value of order-by The value is modified to 'blue_name', that is, 'blue_name' is used as the sorting method.
Then display the new sorted content by redisplaying the innerHTML value of Layer1.

(2) In the text:

order-by
This cannot be missing, otherwise you will not be able to find it. Take a look at the effect! !

<?xml version="1.0" encoding="gb2312" ?>

Copy after login

In most XML textbooks, encoding="gb2312" is rarely added to the code displayed.
Therefore, when we use Chinese in XML, an error will be reported. The reason is that this is not written. Statement.

Postscript:
After everyone is familiar with the idea of dynamic sorting, you will find that our implementation method is actually very simple.
Just modify the order-by value and then display it again.
We still follow this idea in the functions of dynamic query and dynamic paging.

The above is the practical tips for XML volumes (1): dynamic sorting content. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!