テーブル行を手動でソートするスクリプト

/web/javascript

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

num data
row1 row1 row1 row1 row1 row1 row1 row1 row1 row1
row2 row2 row2 row2 row2 row2 row2 row2 row2 row2
row3 row3 row3 row3 row3 row3 row3 row3 row3 row3
row4 row4 row4 row4 row4 row4 row4 row4 row4 row4

row5 row5 row5

row5 row5 row5

row5 row5 row5

row5 row5 row5

row5 row5 row5
row6 row6 row6 row6 row6 row6 row6 row6 row6 row6

前回のサンプルを踏み台に、テーブル行を並び替えるスクリプトを作ってみる。というかコレが本当にやりたかったこと。詳しい動きは...

  1. 任意の行を選択する (選択行をマーキング)
  2. 別の行を選択する
  3. 2.の直前に1.の行を移動する

まあ暫くやってみれば解ると思う。てきと～にプチプチ・ソートと名付けよう。並び替えるときに同時に<input>タグのvalueも再設定してたりするんだけど、これに意味があって、まあ要するに表示メニューの並び替えを変更/登録するWebアプリのために作ったスクリプトなんだ。なかなかウケは良いですよ？ Webでのドラッグ＆ドロップは労力に見合うほどの効果があるか疑問だった、って判断しただけですけどね！

p.s.: ちょっと追記。使いやすいドラッグ＆ドロップの設計はたいへんだ、ということ。もちろんこのスクリプトの動作も解りにくい。けど、ツールチップを表示するとか選択後のclass指定を工夫するとか考え付くことはいっぱいあって、俺にはこれをベースに弄るほうが楽に思える。

解説は以下にて。(デモは「続き」で動きます。)

rowSelect()

  1. var rowSelect = {
  2. init: function(table){
  3. this.rowList = $(table).getElementsByTagName('tr');
  4. for(i=1; i<this.rowList.length; i++){
  5. //addEvent(this.rowList[i],'mouseover',rowSelect.msOver,false);
  6. //addEvent(this.rowList[i],'mouseout',rowSelect.msOut,false);
  7. //addEvent(this.rowList[i],'click',rowSelect.selected,false);
  8. this.rowList[i].onmouseover = rowSelect.msOver;
  9. this.rowList[i].onmouseout = rowSelect.msOut;
  10. this.rowList[i].onclick = rowSelect.selected;
  11. }
  12. },
  13.  
  14. msOver: function(e){
  15. //var row = e.currentTarget;
  16. var row = this;
  17. if(row.className == 'msOver') return;
  18. if(rowSelect.selectFlag != row) addClass(row,'msOver');
  19. },
  20.  
  21. msOut: function(e){
  22. //var row = e.currentTarget;
  23. var row = this;
  24. if(row.className != 'msOver') return; // '' or 'selected'
  25. if(rowSelect.selectFlag != row) delClass(row,"msOver");
  26. },
  27.  
  28. selected: function(e){
  29. //var row = e.currentTarget;
  30. var row = this;
  31. if(rowSelect.selectFlag == row){
  32. delClass(row,"msOver");
  33. delClass(row,"selected");
  34. rowSelect.selectFlag = null;
  35. return;
  36. }
  37. else if(rowSelect.selectFlag && rowSelect.selectFlag != row){
  38. var selectedRow = rowSelect.selectFlag;
  39. delClass(selectedRow,"msOver");
  40. delClass(selectedRow,"selected");
  41. var cloneRow = selectedRow.cloneNode(true);
  42.  
  43. //delete&insert
  44. selectedRow.parentNode.removeChild(selectedRow);
  45. row.insertAdjacentElement('beforeBegin',cloneRow);
  46.  
  47. //addEvent
  48. cloneRow.onmouseover = rowSelect.msOver;
  49. cloneRow.onmouseout = rowSelect.msOut;
  50. cloneRow.onclick = rowSelect.selected;
  51.  
  52. rowSelect.selectFlag = null;
  53. rowSelect.setValue(row);
  54. return;
  55. }
  56. rowSelect.selectFlag = row;
  57. delClass(row,"msOver");
  58. addClass(row,"selected");
  59. },
  60.  
  61. setValue: function(row){
  62. var rowList = row.parentNode.getElementsByTagName('tr');
  63. for(var i=1;i<rowList.length;i++){
  64. var targetNode = rowList[i].getElementsByTagName('input')[0];
  65.  
  66. // 表示番号のリセット
  67. if(targetNode.nodeName == 'INPUT') {
  68. inpList[i] = targetNode.value = i;;
  69. }
  70. }
  71. }
  72. }

5～7行目および15、22行目はaddEventListener()/attachEvent()を使う場合の指定。まあどっちでも良いんですけどね。テーブル行に本スクリプト以外のイベントを割り当てる予定がある場合は、こっちを使いましょう。詳しい理由と解説は前回の記事を参照してくださいな。

37～55行目およびsetValue()メソッドが今回追加した部分です。流れとしては、選択行を複製→削除→複製を挿入。複製したノードにはイベントが割り振られていないので、init()にて設定したのと同じようにイベント登録しておきます。そしてsetValue()にてinputタグをごにょごにょする、と。

45行目にて要素を挿入する際、insertAdjacentElement()という耳慣れないメソッドを使っていますが、これはこのままだとFirefoxで無効になるため、ちょっと一工夫しています。この処理については以前の記事「FirefoxでInsertAdjacent系メソッドを利用する」にて軽く紹介しています。

まとめ

まあ前回で難しいとこは済ませているので、今回やったことなんてホントてきとーなんですけどね。たとえば挿入処理なんかもいろいろ分岐を増やしてより直感的な挙動にしたりとか、いろいろやりようはあると思います。ただ、道はつけたというか、この場所でこういう処理をすればちゃんとできるんだ、みたいなことが今回できたので、「後は良しなに」といったところですかね！

関連記事

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。