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

标签 jquery ruby-on-rails ruby-on-rails-3 jquery-ui-sortable

类似的问题有很多,但我找不到完全符合我需求的问题。

您可能会认为这是一个非常常见的问题,应该有一个完善的 gem 解决方案。

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

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

如果您不知道任何现成的解决方案,您能否指导我如何解决。

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

最佳答案

这里有一篇不错的博客文章:

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 sortable允许对 DOM 元素进行拖放重新排序
  2. 后端使用acts_as_list处理更新数据库

这两个看起来都相当强大,而且我能够实现概述的基本功能的变体,在同一屏幕上创建新项目和一些 CSS 3 花哨的东西(只需适本地设置 .your-class.ui-sortable-helper 的样式),没有太多麻烦。我还没有跨浏览器进行广泛的测试,但在 WebKit 和 Firefox 中似乎很满意。

博客上的示例并没有真正使用acts_as_list - 它只是使用jQuery序列化对象ID,然后直接在 Controller 中迭代它们 - 但我想如果你需要的话,在后端使用这些函数会很有用由于某种原因自动进行更改。

博客文章中的关键代码:

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 %>">

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

Controller :

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

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

(P.S. 这与 Ryan Bates 在他的关于同一主题的付费视频广播中提供的方法非常相似。)

(P.P.S.我知道这是一个老问题,但是,就像 StackOverflow 中经常出现的那样,Google 让我来到这里,所以我想我应该记录一下我所做的事情。)

关于jquery - 使用 jQuery 和 Rails 3 实现 ajax 可排序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7664317/

相关文章:

javascript - HTML 5 <audio> - 在特定时间点播放文件

javascript - 使用jquery的登录页面不重新提交

javascript - MVC 中 session 的客户端计时器

ruby-on-rails - Rails3 - 提取 route 的常见 Action

javascript - 使用 Jquery append 在点击时呈现部分

javascript - 使用 Javascript 在 PHP 中选择选项时启用按钮

ruby-on-rails - Geokit ActiveModel::MissingAttributeError: 无法写入未知属性 `within`

ruby-on-rails - 适合有抱负的公用事业应用程序的廉价 Rails 托管解决方案

ruby-on-rails-3 - 如何更新两个不同页面上的两个不同属性?

ruby - Rails 将子错误与父错误合并