Как отсортировать список строк таблицы с помощью javascript/jquery?
Допустим, у меня есть такой html:
<table>
<tr>
<th>Sort Order</th>
<th>Name</th>
</tr>
<tr class="item" id="item_1">
<td class="sortorder">1</td>
<td>ABC</td>
</tr>
<tr class="item" id="item_2">
<td class="sortorder">2</td>
<td>DEF</td>
</tr>
<tr class="item" id="item_3">
<td class="sortorder">3</td>
<td>XYZ</td>
</tr>
</table>
Я хочу, чтобы пользователь мог сортировать строки в таблице (исключая первую строку с <th>
s, поэтому все строки с классом .item
), перетаскивая их, а затем обновляя порядок сортировки.
Например, если пользователь перетаскивает DEF в первую позицию, а ABC заменяет его, я хочу, чтобы порядок сортировки DEF говорил 1,а ABC - 2.
Как это можно сделать?
При необходимости я могу хранить все элементы отдельно в javascript массив или объект, чтобы я мог перебирать их и обновлять порядок сортировки каждого элемента всякий раз, когда пользователь изменяет порядок сортировки.
2 ответа:
Вы можете использовать сортируемый список пользовательского интерфейса jQuery. Он хорошо поддерживается во всех браузерах и имеет множество опций и обратных вызовов. Они используют список в своем примере, но вы можете также легко использовать таблицу.
JQuery интерфейса документации сортируемый - http://jqueryui.com/demos/sortable/
Сортируемый учебник / руководство - http://www.petefreitag.com/item/736.cfmПример:
$('table').sortable({ items : '.item', update : function(event, ui) { alert('sort order updated'); // Display sort order - also checkout serialize() method in jQuery UI Docs alert('sort order: ' + $(this).sortable('toArray').toString()); } });