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

Question

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

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

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

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

Answer 1

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

$ ( "# MyList") сортируется ({});.

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

Answer 2

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

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 по капле, думаю, я бы предпочел сохранить заказ и обновлять его, когда пользователь нажимает «сохранить». Не проверено в IE.

Answer 3

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

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

sortables.addItems(node);

Answer 4

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

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

Answer 5

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

Answer 6

С Prototype и Scriptaculous:

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

Answer 7

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