ドラッグ＆ドロップで GridView の行を入れ替え (2012/11/11 記）
ブログの記事 Table Drag and Drop jQuery Plugin
に書いたコードを実際に試すためのページを追加しました。
マウスによるドラッグ＆ドロップで table の行を入れ替える jQuery プラグイン を ASP.NET の GridView コントロールに適用しています。
入れ替えた結果の行の並び順を、行をドロップしたタイミングで、プラグインに用意されている serialise() メソッドで文字列として取得し、それを jQuery Ajax を利用して web サービスに送信し、web サービスのメソッドで文字列を編集してクライアントに戻しています。
トップへ
目次へ
Ajax result
行を入れ替えた結果が表示されます。
| 0 | Name_0 | 123000 | 20 | 123000 | Note_0 |
| 1 | Name_1 | 246000 | 40 | 492000 | Note_1 |
| 2 | Name_2 | 369000 | 60 | 1107000 | Note_2 |
| 3 | Name_3 | 492000 | 80 | 1968000 | Note_3 |
| 4 | Name_4 | 615000 | 100 | 3075000 | Note_4 |
| 5 | Name_5 | 738000 | 120 | 4428000 | Note_5 |
| 6 | Name_6 | 861000 | 140 | 6027000 | Note_6 |
| 7 | Name_7 | 984000 | 160 | 7872000 | Note_7 |
| 8 | Name_8 | 1107000 | 180 | 9963000 | Note_8 |
| 9 | Name_9 | 1230000 | 200 | 12300000 | Note_9 |