javascriptでテーブルで並べられたデータの順番を入れ変えようと思った。
prototype.jsで動くscriptaculous.jsでsortableを使おうと思ったけど、
処理が重いのか動きが鈍すぎて使い物にならない。
とりあえずボタンクリックで上に移動、下に移動が実現できれば良しとした。
順番の保存はテーブル内にhiddenタグを入れてpostされた順番をそのまま取得すれば、良さそうだ。
HTML
<table id="imglist_table" > <thead> <tr class="head"> <td width="100px">画像</td> <td>あげる</td> <td>さげる</td> </tr> </thead> <tbody> <tr id="tr1"> <td><em>画像</em></td> <td><a title="順番を上げます" onclick="itemUp('tr1');return false;" href="#"></td> <td><a title="順番を下げます" onclick="itemDown('tr1');return false;" href="#"></td> </tr> <tr id="tr2"> <td><em>画像</em></td> <td><a title="順番を上げます" onclick="itemUp('tr2');return false;" href="#"></td> <td><a title="順番を下げます" onclick="itemDown('tr2');return false;" href="#"></td> </tr> <tr id="tr3"> <td><em>画像</em></td> <td><a title="順番を上げます" onclick="itemUp('tr3');return false;" href="#"></td> <td><a title="順番を下げます" onclick="itemDown('tr3');return false;" href="#"></td> </tr> </tbody> </table>
javascript（prototype.js使用）
function itemUp(thisElem) { var tbleElem = $('imglist_table'); var tbodyElem = tbleElem.getElementsByTagName("tbody")[0]; if ( $(thisElem).previousSibling){ tbodyElem.insertBefore( $(thisElem) , $(thisElem).previousSibling ); } } function itemDown(thisElem) { var tbleElem = $('imglist_table'); var tbodyElem = tbleElem.getElementsByTagName("tbody")[0]; if ($(thisElem).nextSibling){ tbodyElem.insertBefore( $(thisElem).nextSibling , $(thisElem) ); } }
ざっくり書くとこんな感じになった。
子ノードを追加するappendChildと指定エレメントの上部に挿入するinsertBeforeがあるけど、順番を下げる場合は、指定の下に挿入が無くて困った。
よーーく悩んでみれば、下のエレメントを上部に挿入でいけるじゃんって思いついた。
俺ってすげーｗ
tableにtbodyを使っているのはIE対策。
上の要素、下の要素を確認するためif(Elem)を使っているけど
もしかしたらブラウザによってダメな場合があるかも？
あとは、改良して、瞬間移動されるのをエフェクトを使って移動しましたーって
ビジュアル的にわかりやすくするとか必要かもね。
後から調べたらここをよく読んでおけばよかったかも＾＾；
http://d.hatena.ne.jp/uupaa/20080130
Trackbacks /
Pingbacks