Rails how to create sortable rows?_问答_开发者

开发者 https://www.devze.com 2023-04-12 15:06 出处：网络

How do I create a sortable rows with Rails and Jquery. I have added a column named position to my table that I want to have sortable rows.

How do I create a sortable rows with Rails and Jquery.

I have added a column named position to my table that I want to have sortable rows.

I have created this action in my controller:

def sort
  params[:faqs].each_with_index do |id, index|
    Faq.update_all(['position=?', index+1], ['id=?', id])
  end
  render :nothing =&g开发者_如何转开发t; true
end

And created a route for the action. But how do I create a table with sortable rows? Instead of a sortable list: http://railscasts.com/episodes/147-sortable-lists

You need to add a new integer datatype cloumn in table. Take a look at following jquery plugin for sorting elements.

http://jqueryui.it/demos/sortable

Below is an example of sorting elements.

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>           
</head>
<body style="font-size:62.5%;">

<ul id="sortable">
   <% unless @images.blank? %>
     <% @images.each do |image| %>
       <li id="<%= image.id %>">Item 1</li>
     <% end %>
   <% end %>
</ul>
<script type"text/javascript">
$(document).ready(function() {        
        $('.sortable').sortable({
            update: function(event, ui) {
                var question_list = $(this).sortable('toArray').toString();
                alert(question_list);
//this will give you the new order list from here you can fire ajax call for updating the order
            }
        });
        });
</script>
</body>
</html>

Check this updated RailsCast for Sortable Lists with JQuery UI!

http://railscasts.com/episodes/147-sortable-lists-revised (updated episode)