类似的问题有很多,但我找不到完全符合我需求的问题。
您可能会认为这是一个非常常见的问题,应该有一个完善的 gem 解决方案。
我想使用ajax重新排序列表并将每个项目的位置保存到数据库中,就像Basecamp中列表中的待办事项一样。虽然能够将嵌套列表中的项目从一个级别移动到另一个级别会很好,但我根本不需要该功能。
我正在使用 Rails 3.1、jQuery。将解决方案与可排序 jQuery 插件集成是有意义的,但我对任何解决方案持开放态度。
如果您不知道任何现成的解决方案,您能否指导我如何解决。
我的应用程序曾经使用acts_as_category插件,但它没有得到维护,我已经手动实现了所有其他树功能。
最佳答案
这里有一篇不错的博客文章:
是 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-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/