2008-09-17 7 views
10

これまでに、行と列の両方をソートできるHTMLドラッグアンドドロップのソート可能なテーブルが必要でしたか?私はそれが何かのために死ぬだろうと知っています。ソート可能なリストがたくさんありますが、ソート可能なテーブルを見つけることは不可能です。HTMLのドラッグアンドドロップソート可能なテーブル

私はあなたがscript.aculo.usが提供するツールでかなり近づくことができると知っていますが、いくつかのクロスブラウザーに関する問題がありました。

答えて

4

私は過去にdhtmlxGridを使用しました。とりわけ、ドラッグアンドドロップの行/列、クライアント側のソート(文字列、整数、日付、カスタム)およびマルチブラウザのサポートをサポートしています。

コメントへの応答: いいえ、それ以上見つからない - そのプロジェクトから移ったばかりです。 :-)

+0

あなたは過去にそれを使用しました。それはあなたが何か良いものを見つけたことを意味しますか?)私は時間をかけてそれを掘り起こし、私が望むすべてのものに見えます。助けてくれてありがとう! – JHollanti

0

sorttable?それはあなたの要求にうまく合っているようです。

ソート可能なJavascriptファイルを読み込み、ソート可能にするテーブルごとに、<テーブル>タグにclass = "sortable"を適用します。

ほとんどの種類のデータを並べ替える方法をすぐに理解できますが、何かがない場合は、カスタムソートキーを追加してソート方法を伝えることができます。ドキュメントはそれをすべてうまく説明しています。

+0

ドラッグやドロップがないことを除いて。私は行ごとにテーブルをソートできるようにする必要がありますが、いくつかのルールではありません。 – JHollanti

+0

ああ、申し訳ありませんが、私の悪い。 –

5

SortablesjQueryにお勧めします。あなたはリストアイテムや、テーブルを含むほとんどすべてのものに使うことができます。

jQueryは非常にブラウザ間でフレンドリーであり、私は常にそれをお勧めします。

+1

jQueryのソート可能なテーブルを取得できませんでした。テーブル全体または個々のセルをドラッグするだけです。しかし、行ベースのドラッグはありません。 – JHollanti

0

Javaを気にしない場合は、GWT-DNDと呼ばれるGWT用の非常に便利なライブラリがあります。オンラインデモをチェックして、それがどれほど強力かを確認してください。

+0

私はJavaを気にしませんが、誰か他の人がいるかもしれません:) 真剣にも、Javaは少し重いと感じます。 – JHollanti

+4

Javaを使用すると、ソート可能なテーブルが必要になるため、スクラップでハンマーでハンマーを使用するように見えます。 –

1

ほとんどのフレームワーク(Yui、MooTools、jQuery、Prototype/Scriptaculousなど)にはソート可能なリスト機能があります。それぞれを少し調べて、あなたのニーズに最も合ったものを選んでください。

18

jQuery UIのソート可能なプラグインを使用しました。 JavaScriptの

$('.sort').sortable({ 
    cursor: 'move', 
    axis: 'y', 
    update: function(e, ui) { 
     href = '/myReorderFunctionURL/'; 
     $(this).sortable("refresh"); 
     sorted = $(this).sortable("serialize", 'id'); 
     $.ajax({ 
      type: 'POST', 
      url: href, 
      data: sorted, 
      success: function(msg) { 
       //do something with the sorted data 
      } 
     }); 
    } 
}); 

<table id="myTable"> 
<thead> 
<tr><th>ID</th><th>Name</th><th>Details</th></tr> 
</thead> 
<tbody class="sort"> 
<tr id="1"><td>1</td><td>Name1</td><td>Details1</td></tr> 
<tr id="2"><td>2</td><td>Name1</td><td>Details2</td></tr> 
<tr id="3"><td>3</td><td>Name1</td><td>Details3</td></tr> 
<tr id="4"><td>4</td><td>Name1</td><td>Details4</td></tr> 
</tbody> 
</table> 

、その後、このPOSTを指定したURLへのアイテムのIDの直列化されたバージョン:これに似たマークアップ。この関数(私の場合はPHP)は、データベース内のアイテムの注文を更新します。

+0

他の人に役立つ場合 - 私はこの例で問題がありました - 'serialize'呼び出しがnullを返していました。それは、私がIDを変更したときに働いていました.Lathanの答え[ここ](http://stackoverflow.com/a/966303/1714)に従っています。 [タグ:jquery]のバージョンに関連するかどうかは不明です – Hobo

3

David Heggieの答えが私にとって最も有用でした。それは少し簡潔にすることができます:

var sort = function(event, ui) { 
    var url = "/myReorderFunctionURL/" + $(this).sortable('serialize'); 
    $.post(url, null,null,"script"); // sortable("refresh") is automatic 
} 

$(".sort").sortable({ 
    cursor: 'move', 
    axis: 'y', 
    stop: sort 
}); 

私と同じマークアップで動作します。

0

シリアライズ()を単に「ID_1」の代わりに「1」

例としてのTRのID値を設定するデビッドHeggieの溶液中にnullを返す:上記

<tr id="id_1"><td>1</td><td>Name1</td><td>Details1</td></tr> 
<tr id="id_2"><td>2</td><td>Name1</td><td>Details2</td></tr> 
<tr id="id_3"><td>3</td><td>Name1</td><td>Details3</td></tr> 
<tr id="id_4"><td>4</td><td>Name1</td><td>Details4</td></tr> 

するID [] =」としてシリアライズします1 & id [] = 2 & id [] = 3 "

「_」ではなく「=」、「 - 」または「_」を使用できます。 「id」以外の単語。

関連する問題