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

前端之家收集整理的这篇文章主要介绍了使用jQuery和Rails 3实现ajax可排序列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有很多类似的问题,但我找不到一个完全符合我需求的问题。

你会认为这是一个很常见的问题,应该有一个抛光的宝石解决方案。

我想重新排序列表,并将每个项目的位置保存到数据库中,而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

主要有:

>前端使用jQuery UI sortable允许DOM元素的拖放重新排序
>后端使用acts_as_list处理更新数据库

这两者似乎相当强大,我能够实现一个基本功能的变化,新的项目创建在同一个屏幕上,一些CSS 3铃声和口哨(只是适当地设计.your-class.ui-sortable-helpper )没有太大的惊喜。我没有通过浏览器进行广泛的测试,但是在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 %>">

包括一个像book_5这样的id,它允许$(‘#books’)。在Javascript中可以排序(‘serialize’)来创建一个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’],并且包括一些检查/错误处理,以确保仅接受有意义的值。

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

(P.P.S.我知道这是一个古老的问题,但是像StackOverflow一样,Google让我在这里,所以我以为我会记录我做了什么。)

原文链接:https://www.f2er.com/jquery/181677.html

猜你在找的jQuery相关文章