使用jQuery和Rails 3实现ajax可排序列表

Question

有许多类似的问题,但我找不到一个完全符合我的需求.

你认为这是一个非常普遍的问题,那里应该有一个抛光的宝石解决方案.

我想重新排序列表并使用ajax将每个项目的位置保存到数据库,这非常类似于Basecamp中列表中的待办事项.虽然能够在嵌套列表中将项目从一个级别移动到另一个级别会很好,但我根本不需要该功能.

我正在使用Rails 3.1,jQuery.将解决方案与可排序的jQuery插件集成是有意义的,但我对任何解决方案都持开放态度.

如果你不知道任何现成的解决方案,你能否指点一下如何解决它.

我的应用程序曾经使用acts_as_category插件,但它没有被维护,我已经手动实现了所有其他树功能.

Answer 1

这里有一篇不错的博文:

是 webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery/

仍然显示在http://web.archive.org/web/20120315004343/http://webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery

实质上:

1. 前端使用jQuery UI可排序,允许拖放DOM元素的重新排序
2. 后端使用acts_as_list来处理更新数据库

这些都看起来相当稳健,我能够实现所概述的基本功能的变化,在同一屏幕上创建新项目和一些CSS 3铃声和口哨(只是风格.your-class.ui-sortable-helper适当),没有太大惊小怪.我没有在浏览器中进行过广泛测试,但在WebKit和Firefox中看起来很开心.

博客上的示例并没有真正使用acts_as_list - 它只是使用jQuery序列化对象ID,然后直接在控制器中迭代它们 - 但我想如果你需要自动化后端的那些函数,那么在后端使用这些函数很有用出于某种原因.

博客文章的关键代码:

使用Javascript:

$(document).ready(function(){
  $('#books').sortable({
    axis: 'y',
    dropOnEmpty: false,
    handle: '.handle',
    cursor: 'crosshair',
    items: 'li',
    opacity: 0.4,
    scroll: true,
    update: function(){
      $.ajax({
        url: '/books/sort',
        type: 'post',
        data: $('#books').sortable('serialize'),
        dataType: 'script',
        complete: function(request){
          $('#books').effect('highlight');
        }
      });
    }
  });
});

视图:

<li id="book_<%= book.id %>">

这包括一个id book_5,它允许$('#books').sortable('serialize')在Javascript中创建一个Rails可以解析的查询参数.

控制器:

def sort
  @books = Book.all
  @books.each do |book|
    book.position = params['book'].index(book.id.to_s) + 1
  book.save
end

这可能不合适,具体取决于模型的范围/访问控制方式.在我自己的解决方案中,我迭代了params['book'],并包括一些检查/错误处理,以确保只接受有意义的值.

(PS这与Ryan Bates在同一主题上的付费,视频播放中给出的方法非常相似.)

(PPS我知道这是一个老问题,但是,就像StackOverflow一样,谷歌让我来到这里,所以我想我会记录我的所作所为.)