これまでに、行と列の両方をソートできるHTMLドラッグアンドドロップのソート可能なテーブルが必要でしたか?私はそれが何かのために死ぬだろうと知っています。ソート可能なリストがたくさんありますが、ソート可能なテーブルを見つけることは不可能です。HTMLのドラッグアンドドロップソート可能なテーブル
私はあなたがscript.aculo.usが提供するツールでかなり近づくことができると知っていますが、いくつかのクロスブラウザーに関する問題がありました。
これまでに、行と列の両方をソートできるHTMLドラッグアンドドロップのソート可能なテーブルが必要でしたか?私はそれが何かのために死ぬだろうと知っています。ソート可能なリストがたくさんありますが、ソート可能なテーブルを見つけることは不可能です。HTMLのドラッグアンドドロップソート可能なテーブル
私はあなたがscript.aculo.usが提供するツールでかなり近づくことができると知っていますが、いくつかのクロスブラウザーに関する問題がありました。
私は過去にdhtmlxGridを使用しました。とりわけ、ドラッグアンドドロップの行/列、クライアント側のソート(文字列、整数、日付、カスタム)およびマルチブラウザのサポートをサポートしています。
コメントへの応答: いいえ、それ以上見つからない - そのプロジェクトから移ったばかりです。 :-)
約sorttable?それはあなたの要求にうまく合っているようです。
ソート可能なJavascriptファイルを読み込み、ソート可能にするテーブルごとに、<テーブル>タグにclass = "sortable"を適用します。
ほとんどの種類のデータを並べ替える方法をすぐに理解できますが、何かがない場合は、カスタムソートキーを追加してソート方法を伝えることができます。ドキュメントはそれをすべてうまく説明しています。
ドラッグやドロップがないことを除いて。私は行ごとにテーブルをソートできるようにする必要がありますが、いくつかのルールではありません。 – JHollanti
ああ、申し訳ありませんが、私の悪い。 –
ほとんどのフレームワーク(Yui、MooTools、jQuery、Prototype/Scriptaculousなど)にはソート可能なリスト機能があります。それぞれを少し調べて、あなたのニーズに最も合ったものを選んでください。
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)は、データベース内のアイテムの注文を更新します。
他の人に役立つ場合 - 私はこの例で問題がありました - 'serialize'呼び出しがnullを返していました。それは、私がIDを変更したときに働いていました.Lathanの答え[ここ](http://stackoverflow.com/a/966303/1714)に従っています。 [タグ:jquery]のバージョンに関連するかどうかは不明です – Hobo
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
});
私と同じマークアップで動作します。
シリアライズ()を単に「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」以外の単語。
あなたは過去にそれを使用しました。それはあなたが何か良いものを見つけたことを意味しますか?)私は時間をかけてそれを掘り起こし、私が望むすべてのものに見えます。助けてくれてありがとう! – JHollanti