Railsで作るドラッグアンドドロップで表示順を変更できる方法とranked_modelの使い方です。
いつもRails関係の情報でお世話になっているjnchitoさんの記事を参考に、自分もRailsでドラッグ&ドロップ機能を実装できました!
ありがとうございます！
こちらの元記事よりも汎用的なjavascriptコードになっているのがさすがです！
目次
ranked_modelの細かな仕様
ranked_modelですが、使い方にコツがあるようなので、記録として残しておきたいと思います。
before_saveでdefault valueが設定される
ranked_modelで管理しているモデルのカラムですが、フォームからレコードを新規作成すると自動的にdefault valueが設定されます。10個すでにレコードがある場合は、4372893みたいな乱数がrow_orderカラムに設定されます。数字が汚いです。解決方法は後述します。
同じvalueのrow_orderがあれば1つ後ろにずれる
row_orderカラムが[1,2,3,4,5]という値ですでにレコードがあるとします。フォームからrow_orderカラムを5で作成すると、最新のレコードのrow_orderカラムが5になって、既存の5だったものは6になります。
先頭にもってくるとマイナスになる
ドラッグ&ドロップでレコードを先頭に持ってくると、これまた-4794328みたいな乱数がrow_orderカラムに設定されます。これを解決する方法は後述します。
きれいな数字にするには？
並べ替えるたびに、row_orderカラムの数字が汚くなってしまいます。乱数だったり、数字の間が抜けてしまったり。サンプルアプリのようにrow_orderカラムをviewに表示しない時はいいのですが、表示したいときもありますよね？
Sortable Bootstrap Tables in Rails — http://benw.me
私の場合はbefore_actionで自分で定義したメソッドを呼び出すことで解決しました。
Fruitテーブルをrow_order順に並べ替えてから、1から順番にrow_orderカラムをupdateしています。これでrow_orderカラムが1から始まる連番になります。
ajaxのコードはまだ書いていないので、ブラウザをリロードしないとrow_orderカラムのviewは更新されないのであしからず。
# fruits_controller.rb class FruitController < ApplicationController after_action :reset_row_order, only: [:sort, :create, :update] def reset_row_order Fruit.rank(:row_order).each_with_index do |fruit, i| fruit.update_attribute :row_order, i + 1 end end
コメントを残す