Как отсортировать список строк таблицы с помощью javascript / jquery? - PullRequest
Новая
       6

Как отсортировать список строк таблицы с помощью javascript / jquery?

2 голосов
/ 16 августа 2011

Допустим, у меня есть 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 ]

2 голосов
/ 16 августа 2011

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

Сортируемая документация по jQuery UI - 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());
    }
});
1 голос
/ 16 августа 2011

Существует несколько уже написанных плагинов сортировки таблиц для jQuery:

...