用戶定義過濾使用XML/XSL構建的HTML表格

我是網絡開發新手，並且發現自己一直在堅持如何使網站訪問者過濾和排序由XML/XSL生成的出版物的HTML表格。由於服務器的限制，我不能使用.php或ASP.NET - 數據必須保持爲平面文件。用戶定義過濾使用XML/XSL構建的HTML表格

下面是XML文件的基本結構：

<xml> 
    <records> 
    <record> 
     <contributors> 
      <author>Author 1</author> 
      <author>Author 2</author> 
      <author>Author 3</author> 
     </contributors> 
     <title>Publication Title</title> 
     <type>Publication Type</type> 
     <keywords>Multiple Keywords</keywords> 
     <year>1995</year> 
     <abstract>Abstract Text Here</abstract> 
    </record> 
    </records> 
</xml>

而且，我的XSL：

<table id="cvPubs"> 
    <thead> 
     <tr> 
     <th>Authors</th> 
     <th>Title</th> 
     <th>Type of Publication</th> 
     <th>keywords</th> 
     <th>Year</th> 
     <th>Abstract</th> 
     </tr> 
    </thead> 
    <tbody> 
    <xsl:for-each select="descendant::record"> 
     <tr> 
     <td><xsl:value-of select="keywords" /></td> 
     <td><xsl:value-of select="contributors/*[position()]" /></td> 
     <td><xsl:value-of select="titles/title" /></td> 
     <td><xsl:value-of select="abstract" /></td> 
     <td><xsl:value-of select="titles/tertiary-title" /></td> 
     <td><xsl:value-of select="year" /></td> 
     </tr> 
    </xsl:for-each> 
    </tbody> 
</table>

我想下拉列表添加到keyword場，和一個用戶自定義文本字段爲contributors和abstract字段。

XSL文件輸出表格完美，我只是不知道什麼是最好的方法是建立過濾器和排序功能。我已經嘗試了一些用於表格排序/過濾的JavaScript和jQuery腳本，但是我無法讓它們正常工作。我沒有得到任何錯誤，但我沒有得到添加的功能。

任何指導將不勝感激。謝謝閱讀！

來源

2010-12-21 Sally House

我認爲如果你繼續走下XSLT的道路，你將會陷入一片泡菜。

是的，它作爲一個單一的表格輸出是相對靜態的轉換工作正常，但是現在你想添加所有的花裏胡哨你的XSLT將變得越來越複雜和沒有多用途因爲它只是用於轉換。

我建議，由於您沒有使用服務器端代碼，因此您會使用原生JavaScript庫的全部功能來處理客戶端上的排序以及您在此頁面上需要的其他功能。

Ext JS想到了，但還有其他一些例子，如Dojo或YUI也可以爲您提供服務。

您正在查找的組件通常稱爲「網格」。

在Ext JS中，您可以實施GridPanel。或者，如果您的數據中有超過500條記錄，則使用Buffered GridPanel，這是一個類似的實現，它只針對正在顯示的行呈現DOM。

希望這是有用的。

來源

2010-12-21 01:26:49

Steven - 非常感謝您的建議，並確認我沒有太過偏離JavaScript的道路！我也會閱讀你的建議。非常感謝。節日快樂！ – 2010-12-21 16:44:44

不客氣。祝你聖誕節快樂。順便說一句，當你看到一些複雜的代碼時，不要被JS嚇倒，只要一步一步學習其他人在網絡上的例子。 Javascript寫起來很簡單，但很難掌握。 – 2010-12-24 23:02:00

用戶定義過濾使用XML/XSL構建的HTML表格

回答

相關問題