Каков самый простой способ позволить пользователю перетаскивать строки таблицы, чтобы изменить их порядок?

У меня есть приложение Ruby on Rails, которое я пишу, где пользователь имеет возможность редактировать счет-фактуру. Они должны иметь возможность переназначить порядок строк. Прямо сейчас у меня есть индексный столбец в db, который используется как механизм сортировки по умолчанию. Я просто разоблачил это и разрешил пользователю его редактировать.

Это не очень элегантно. Я хотел бы, чтобы пользователь мог перетаскивать строки таблицы. Я немного использовал Scriptaculous и Prototype и знаком с ними. Я сделал списки перетаскивания, но не так хорошо сделал таблицы. У кого-нибудь есть предложения не только переупорядочивать, но и эффективно фиксировать реорганизацию?

Кроме того, пользователь может динамически создавать новую строку в JS прямо сейчас, так что строка также должна быть переупорядочиваемой.

Бонусные баллы, если это можно сделать с помощью RJS вместо прямого JavaScript.

Ответ 1

Я использовал библиотеку пользовательского интерфейса Yahoo для этого:

http://developer.yahoo.com/yui/dragdrop/

Ответ 2

MooTools сортировки на самом деле лучше, чем script.aculo.us, поскольку они динамичны; MooTools позволяет добавлять/удалять элементы в список. Когда новый элемент добавляется в сортировку script.aculo.us, вам необходимо уничтожить/воссоздать сортировку, чтобы сортировать новый элемент. При этом будет много накладных расходов, если в списке много элементов. Мне пришлось переключаться с script.aculo.us на более легкий MooTools только из-за этого ограничения и в конечном итоге был очень доволен этим решением.

Способ MooTools для создания вновь добавленного элемента сортируется просто:

sortables.addItems(node);

Ответ 3

Хорошо, я еще немного почесал и понял что-то, что, похоже, в основном работает.

edit.html.erb:

...
<table id="invoices">
   <thead>
     <tr>
      <th>Id</th>
      <th>Description</th>
     </tr>
   </thead>
   <tbody id="line_items">
      <%= render :partial => 'invoice_line_item', :collection => @invoice.invoice_line_items.sort %>
   </tbody>
</table>

<%= sortable_element('line_items', {:url => {:action => :update_index}, :tag => :tr, :constraint => :vertical}) -%>
...

приложение/контроллеры/invoices.rb

...
def update_index
  params["line_items"].each_with_index do |id, index|
    InvoiceLineItem.update(id, :index => index)
  end
  render :nothing => true
end
...

Важная часть: tag = > : tr в "sortable_element" и params [ "line_items" ] - это дает новый список идентификаторов и запускается при падении.

Отвращение: делает вызов AJAX при отмене, я думаю, что предпочитаю хранить заказ и обновлять его, когда пользователь нажимает "save". Не проиндексирован в IE.

Ответ 4

Мне нравится jQuery http://docs.jquery.com/UI/Sortables

$( "# MyList" ) сортировка ({});.

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

Ответ 5

Интерфейс Yahoo был проще, чем я ожидал, заработал менее чем за четыре часа.

Ответ 6

Сценарии сортировки, похоже, как путь, так как он встроен. http://github.com/madrobby/scriptaculous/wikis/sortable

Ответ 7

С Prototype и Scriptaculous:

Sortable.create('yourTable', {
    tag: 'tr',
    handles: $$('a.move'),
    onUpdate: function() {
        console.log('onUpdate');
    }
});