XML erstellt sortierbare und paginierte Datenanzeigeseiten

In der Webentwicklung stoßen wir häufig auf die Paging-Anzeige und Sortierung von Datensätzen. Dies lässt sich auf der Serverseite mithilfe von serverseitigem Code und Datenbanktechnologie wie ASP, PHP, JSP usw. sehr einfach durchführen. Wenn Sie jedoch mehrere Datensätze auf dem Client anzeigen und sortieren möchten, kann dies zu Problemen führen. Im Folgenden verwenden wir Extensible Markup Language (XML, Extensible Markup Language) und Extensible Stylesheet Language Transformations (XSLT, Extensible Style Single Language Transformation) in Kombination mit XML Path Language (XPath, XML Path Language) und müssen nur einfachen Code schreiben. leicht erreicht werden kann. Diese Methode vermeidet den Prozess der häufigen Auseinandersetzung mit dem Server, spart Zeit bei der Datenanzeige und ermöglicht es den Zuschauern, die Ergebnisse ohne Wartezeit zu sehen, was auch die Belastung des Servers reduzieren kann. Zusätzlich. Dank der XML- und XSLT-Technologie sind Datenspeicherung und Datenanzeige getrennt, und unser Code kann wiederverwendet werden, was die Belastung für Programmierer beim Schreiben von Code erheblich reduziert.
Nachfolgend implementieren wir unsere Funktion Schritt für Schritt.

Zuerst: XSLT erstellen

Die erste Zeile des XSLT-Stylesheets gibt die XML-Spezifikationsversion an, der das XML entspricht, und dann den vom Stylesheet verwendeten Namespace die XSL-Spezifikation So schreiben Sie die offizielle Version von XSL, anstatt die Entwurfsschreibmethode von XSL zu verwenden:

   <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

Hinweis: Es gibt große Unterschiede in den Funktionen und Schreibmethoden zwischen den beiden.

 <?xml version="1.0"?>  
   <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Als nächstes definieren wir das Template-Tag in XSLT:

<xsl:template match="/">  
   <xsl:apply-templates select="/客户关系表"/>  
   </xsl:template>  
    
   <xsl:template match="/客户关系表"></xsl:template>

Wir schreiben den anzuzeigenden Stil in die Vorlage. Wir verwenden HTML-Dateninseln zum Speichern unserer Daten. Diese Daten können mithilfe von XML-Abfragen von SQL Server 2000 abgerufen werden. Für Datenbanken, die XML nicht unterstützen, können wir unsere eigenen Komponenten schreiben, um die Daten in das XML-Format zu konvertieren und sie dann einzufügen die Dateninsel im Inneren. Es gibt zwei Möglichkeiten, Dateninseln in HTML zu verwenden:
Eine besteht darin, Daten direkt einzubetten, wie unten gezeigt:

 <XML id=&#39;&#39;Data&#39;&#39;>  
   <客户关系表>  
   <客户>每条数据</客户>  
   </客户关系表>  
   </XML>

Die andere besteht darin, externe Dateien über das SRC-Attribut zu referenzieren, wie unten gezeigt:

 <XML id=&#39;&#39;Data&#39;&#39; src=&#39;&#39;Data.xml&#39;&#39;></XML>

Um die Daten in der Dateninsel zu verwenden, müssen Sie sie über den ID-Namen referenzieren. Da es sich bei der XSLT-Datei natürlich auch um eine Art XML-Formatdatei handelt, kann dies auch der Fall sein erreicht durch diese Methode:

<XML id=&#39;&#39;Style&#39;&#39; src=&#39;&#39;Style.xsl&#39;&#39;></XML>

Wir fügen der Seite Markup DIV hinzu, um die Ergebnisse unserer Konvertierung anzuzeigen:

   <div id="DisplayArea"></div>

Verwenden Sie XSLT, um Konvertieren Sie die Daten in der Dateninsel mithilfe der DOMDocument-Methode transNode() und zeigen Sie die Ergebnisse über das innerHTML-Attribut von DIV an:

DisplayArea.innerHTML = Data.transformNode(Style.DocumentElement)

Schritt 2: Implementieren Sie die clientseitige Sortierfunktion

Legen wir zunächst ein Standard-Sortierfeld fest, wählen Sie hier „Seriennummer“ als Standard-Sortierschlüsselwort aus, ordnen Sie es in aufsteigender Reihenfolge an und fügen Sie das Sortier-Tag im XSLT hinzu:

<xsl:for-each select="客户">  
   <xsl:sort select="序号" order="descending" data-type="number"/>  
   </xsl:for-each>

Weiter , fügen wir der Stylesheet-Funktion eine Sortierung hinzu, damit sie auf Benutzeroperationen reagieren kann. Wir fügen für jede Spalte des Tabellenkopfes ein onClick-Ereignis hinzu, das die Funktion sort() aufruft und es dem Benutzer ermöglicht, die Spalte durch Klicken auf zu sortieren Tabellenkopf.

  <td onClick="sort(&#39;&#39;序号&#39;&#39;)">序号</td>  
   Sort()函数的语句如下所示：  
   Function Sort(strField)  
    
   Dim sortField  
   Dim sortOrderAttribute  
    
   &#39;&#39;　得到原来排序字段的属性值  
   Set sortField = Style.XMLDocument.selectSingleNode("//xsl:sort/@select")  
    
   &#39;&#39;　得到原来排序的顺序属性值  
   Set sortOrderAttribute = Style.XMLDocument.selectSingleNode("//xsl:sort/@order")  
    
   &#39;&#39;　如果我们已经按所点击的列的字段排序，我们必须改变排序的顺序；  
   &#39;&#39;　否则，我们只需要按新所点击的列字段按默认的顺序进行排序  
   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  
   &#39;&#39;　输出排序后的结果  
   DisplayArea.innerHTML = Data.transformNode(Style.DocumentElement)  
    
   End Function

Als nächstes implementieren wir die Funktion, die Anzahl der Datensätze auf jeder Seite anzuzeigen und die vorherige und nächste Seite festzulegen. Verwenden Sie das span-Tag, um anzuzeigen, welche Seite aktuell angezeigt wird, wie viele Seiten insgesamt und wie viele Datensätze insgesamt vorhanden sind. Wir zeigen standardmäßig 6 Datensätze pro Seite an und verwenden die Variable intRecordsPerPage, um diesen Wert zu speichern:

<table width="100%" border="0" style="font-size:9pt">  
   <tr>  
   <td align="left"><b>第 <span id="CurrentPage"></span> 页 总 <span id="PageCount"></span> 页    共有 <span id="RecordCount"></span> 条记录</b></td>  
   <td align="right"><b>每页记录数：<input onblur="setRecordsPerPage()" id="RecordsPerPage" style="vertical-align:middle;height:15pt;width:30px"/></b></td>  
   <td align="right">  
   <span id="Paging">  
   <input type="button" OnClick="FirstPage()" value="第一页"/>  
   <input type="button" OnClick="PReviousPage(1)" value="上一页"/>  
   <input type="button" OnClick="nextPage(1)" value="下一页"/>  
   <input type="button" OnClick="LastPage()" value="最末页"/>  
   </span>  
   </td>  
   </tr>  
   </table>

Im Folgenden wird der Vorgang der Schaltfläche „Nächste Seite“ als Beispiel verwendet, um den Konvertierungsprozess zu veranschaulichen verschiedene Seiten. Diese Funktion bestimmt die Anzahl der anzuzeigenden Datensätze und die entsprechende Seite basierend auf dem Parameter intPage. Die Änderung des Wertwerts jeder Schaltfläche wird durch dynamische Änderung des Inhalts des XSL-DOM erreicht:

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中有这样一个选择模板的句子：

<xsl:apply-templates select="/客户关系表"/>

为了实现通用性的要求，我们可以使用通配符：

  <xsl:apply-templates select="/*"/>

这里我们使用了子运算符"/"，它选择了根下的所有节点，两者的不同点在于："/客户关系表"选择的是根下的客户关系表子节点，而"/*"选择的是根下所有的直接子节点，在上面的XML数据格式中，二者是完全等价的。
对于下面的for-each循环来说：

<xsl:for-each select="客户">  
   <xsl:sort select="序号" order="ascending"/>  
   </xsl:for-each>

我们可以改变成这样的形式：

  <xsl:for-each select="./*">  
   <xsl:sort select="./*[1]" order="ascending"/>  
   </xsl:for-each>

这里"./*"表示你应当包含进去当前节点下所有的一级子节点，语法"./*[1]"表示的是选择当前节点中的第一个子节点。
另外还有一个地方可以改进的是，我们可以把它改成，表示在每一次循环中选择当前节点。
在我们的函数中，还使用了一些硬代码，如果不做改动的话，我们的通用性还是实现不了，因此，我们下面就看看如何替换硬代码中的语句。
在创建表头的时候，我们使用了 序号的语句，如果XML数据里没有序号节点的话，这里显然会出现错误的，为了实现通用性，我们自定义了一个函数getName，来取得所要显示的节点的名称：

<td>  
   <xsl:attribute name="onClick">  
   Sort(&#39;&#39;<xsl:value-of select="user:getName(.)"/>&#39;&#39;)  
   </xsl:attribute>  
   <xsl:value-of select="user:getName(.)"/>  
   </td>

自定义函数是XSLT的一个突出的功能，要使用这个特性，我们得用msxml:script元素来定义，同时，必须在样式单定义的时候指定一个用户定义的名字空间。下面就是我们使用自定义函数的全部内容：

 <xsl:stylesheet xmlns:xsl=http://www.w3.org/1999/XSL/Transform  
   xmlns:msxsl="urn:schemas-microsoft-com:xslt"  
   xmlns:user="http://lucky.myrice.com"  
   version="1.0">  
   <msxsl:script language="VBScript" implements-prefix="user">  
   <![CDATA[  
   function getName(node)  
   getName = node.item(0).nodeName  
   end function  
   }>  
   </msxsl:script>

在我们的XSLT文件中，使用了两个循环，我们分别进行相应的更改，第一处：显示表头的地方改为，它等同于；第二处循环是显示每行记录，改成。还有其他的地方需要更改的，请参见后面的完整源代码部分。这样我们就完成了通用的XSLT文件，不管你的XML数据有多少字段，也不管节点名称是什么，我们都无需更改XSLT文件，就可以实现我们的功能了。最终的浏览效果将会象下图所示：

以下是完整的Style.xsl文件的内容：

  
     
     
     
     
    
     
   <xsl:apply-templates select="/*"/>  
     
    
     
   
  
   
  
   
第  页 总  页    共有  条记录
  
   
每页记录数：
  
   
  
     
     
     
     
     
     
   
  
   
  
   
  
     
     
     
     
   
  
     
   Sort('''')  
     
     
   
  
     
     
   以下是进行输出的Exam.htm文件：  
     
     
     
     
     
     
     
   
客户关系表
  
     
   <客户关系表 xmlns:dt="urn:schemas-microsoft-com:datatypes">  
   <客户><序号 dt:dt="int">01<姓名>Mi<电子邮件>water@21cn.com  
   <客户><序号 dt:dt="int">02<姓名>uyi<电子邮件>Lily@sina.com  
   <客户><序号 dt:dt="int">03<姓名>uiyu<电子邮件>John@21cn.com  
   <客户><序号 dt:dt="int">04<姓名>Doug<电子邮件>Karry@163.net  
   <客户><序号 dt:dt="int">05<姓名>Ellen<电子邮件>vivki@sina.com  
   <客户><序号 dt:dt="int">06<姓名>Frank<电子邮件>net_lover@mengxianhui.com.cn  
   <客户><序号 dt:dt="int">07<姓名>Greg<电子邮件>meng@mengxianhui.com  
   <客户><序号 dt:dt="int">08<姓名>Harry<电子邮件>sunny@xianhui.net  
   <客户><序号 dt:dt="int">09<姓名>Ingrid<电子邮件>cathy@hotmail.com  
   <客户><序号 dt:dt="int">10<姓名>Jeff<电子邮件>your@mxh.com  
   <客户><序号 dt:dt="int">11<姓名>Kelly<电子邮件>Iloveyou@mengxianhui.com  
   <客户><序号 dt:dt="int">12<姓名>Larry<电子邮件>smilling@mengxianhui.com  
   <客户><序号 dt:dt="int">13<姓名>Mark<电子邮件>money@21cn.com  
   <客户><序号 dt:dt="int">14<姓名>Nancy<电子邮件>www@yahoo.com  
   <客户><序号 dt:dt="int">15<姓名>Peter<电子邮件>dotnet@aol.com  
   <客户><序号 dt:dt="int">16<姓名>Rachel<电子邮件>billgates@microsoft.com  
   <客户><序号 dt:dt="int">17<姓名>Seth<电子邮件>flying@yous.net  
   <客户><序号 dt:dt="int">18<姓名>Tim<电子邮件>agooyboy@lovegirl.com  
     
     
   <XML id=&#39;&#39;Style&#39;&#39; src=&#39;&#39;Style.xsl&#39;&#39;></XML>  
   <div id="DisplayArea"></div>  
   
资料来源：【孟宪会之精彩世界】
  
     
   

   把上面的内容拷贝到本地计算机上，分别保存为相应的文件，在IE5+和XML3.0+的环境下即可看到效果！ 

 以上就是XML创建可排序、分页的数据显示页面的内容，更多相关内容请关注PHP中文网（www.php.cn）！