Подтвердить что ты не робот

Реализовать сортируемые списки ajax с помощью jQuery и Rails 3

Есть много похожих вопросов, но я не могу найти тот, который точно соответствует моим потребностям.

Вы думаете, что это очень распространенная проблема, и там должны быть отполированные решения для драгоценных камней.

Я хочу переупорядочить список и сохранить позицию каждого элемента в базе данных с помощью ajax, очень похожего на список дел в списке в Basecamp. Хотя было бы неплохо иметь возможность перемещать элементы с одного уровня на другой во вложенных списках, мне вообще не нужна эта функция.

Я использую Rails 3.1, jQuery. Было бы разумно интегрировать решение с сортируемым плагином jQuery, но я открыт для любых решений.

Если вы не знаете каких-либо готовых решений, можете ли вы дать мне указания о том, как это сделать.

Мои приложения использовали плагин act_as_category, но он не поддерживался, и я реализовал все другие функции дерева вручную.

4b9b3361

ОТВЕТЫ

Ответ 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

По существу:

  • В интерфейсе используется jQuery UI sortable, чтобы разрешить переупорядочивание элементов DOM перетаскивания мышью.
  • Внутренний сервер использует acts_as_list для обработки обновления базы данных.

Оба они кажутся достаточно надежными, и я смог реализовать вариацию основных функциональных возможностей, описанных выше, с созданием нового элемента на одном экране и некоторыми колокольчиками и свистами CSS 3 (просто стиль .your-class.ui-sortable-helper соответственно) без особых проблем, Я не тестировал широко в браузерах, но он выглядит счастливым в WebKit и Firefox.

Пример в блоге не очень сильно влияет на act_as_list - он просто сериализует идентификаторы объектов с помощью jQuery, а затем выполняет итерацию над ними в контроллере напрямую, но я думаю, что полезно иметь эти функции на задней панели, если вам нужно автоматизировать изменения оттуда по какой-то причине.

Key code из сообщения в блоге:

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, который позволяет $('#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'] и включил некоторую проверку/обработку ошибок, чтобы обеспечить принятие только значимых значений.

(P.S. это очень похоже на подход, которым Райан Бэйтс дает в своем, платный, видеозапись по той же теме.)

(P.P.S. Я знаю, что это старый вопрос, но, как это часто бывает с StackOverflow, Google достал меня сюда, поэтому я подумал, что буду документировать то, что я сделал.)