2009-05-11 16 views
3

私はjavascriptで自分のxmlデータを並べ替える方法を探していて、やがてデータもフィルタリングしたいと思っています。私はこれがすべてxslファイルで可能だと知っていますが、私はそれをクライアント側でやりたいと思います。Xml、xsl Javascript sorting

javascriptを使用して複数の場所を並べ替えて検索しましたが、そのほとんどがxmlファイル固有であるか、何が起こっているのか把握できませんでした。

本当に何かアドバイスをお願い申し上げ

非常に良いapprouchは、ソートのためにそれの内側にparameerチェックとXSLを持っているし、それにいくつかのJSを適用することです
+0

何をXMLに並べ替えますか? XMLの外観はどうですか? – Nosredna

答えて

4

AJAXで使用することができます。最初のものは変換したいxmlです。 2番目はxmlを変換するために使用したいxsltです。どちらのパラメータも、ノードまたはノード自体に変換される文字列(XHR.responseXMLなど)を受け入れます。

パズルの第2部分は、xslの組み込みのxsl:sortを使用するソートです。

<xsl:sort 
    select="expression" 
    lang="language-code" 
    data-type="text|number|qname" 
    order="ascending|descending" 
    case-order="upper-first|lower-first"/> 

すべてのパラメータは、select文のほかにオプションです。

サンプルソートの使用法:

<xsl:for-each select="catalog/cd"> 
    <xsl:sort select="artist"/> 

    <xsl:value-of select="artist"/> 
    <xsl:text> - </xsl:text> 
    <xsl:value-of select="title"/> 
</xsl:for-each> 

あなたはw3schoolsxsl:sortに関する詳細な情報を見つけることができます。

0

XSLTはFYI、すべての主要なブラウザのリリースでサポートされています^ _ ^(IE 6+、FF 1+、SF 2+、CHROME、OPERA 9+)

なく、あなたがやってわからなく、XSLTすることができますまた、

function transformXML(_xml, _xsl) { 
    var 
    xml = typeof _xml == 'string' 
     ? new DOMParser().parseFromString(_xml, 'text/xml') 
     : _xml // assume this is a node already 
    ,xsl = typeof _xsl == 'string' 
     ? new DOMParser().parseFromString(_xsl, 'text/xml') 
     : _xsl // assume this is a node already 
    ,processor = new XSLTProcessor() 
    ; 

    processor.importStylesheet(xsl); 

    return processor.transformToDocument(xml.firstChild); 
} 

この関数は、2つのparamsを受け入れる:本の最初の部分はJavaScriptで変換を実行している

2

私はxslシートでソートしません。 私はtablesorterpluginjqueryを使用します。

Getting Startedセクションは非常に簡単です(以下で再現します)。

tablesorterプラグインを使用するには、HTML文書のタグ内jQueryライブラリとtablesorterプラグインを含める:標準のHTMLテーブルに取り組んでいますtablesorter

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

。スタートは、ドキュメントがロードされたとき、あなたのテーブルをソートするtablesorterを伝えることで

<table id="myTable"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 
:ヘッダをクリックして

$(document).ready(function() 
    { 
     $("#myTable").tablesorter(); 
    } 
); 
、あなたはあなたのテーブルが今あることがわかりますあなたはTHEADとTBODYタグを含める必要があります。ソート可能!また、テーブルを初期化するときに設定オプションを渡すこともできます。これは、第1列と第2列を昇順でソートするようにtablesorterに指示します。

$(document).ready(function() 
    { 
     $("#myTable").tablesorter({sortList: [[0,0], [1,0]]}); 
    } 
);