Переупорядочить таблицу HTML с помощью jQuery на основе заданного массива идентификаторов строк - PullRequest
Новая
       18

Переупорядочить таблицу HTML с помощью jQuery на основе заданного массива идентификаторов строк

2 голосов
/ 02 марта 2011

У меня есть таблица HTML, в которой каждая строка данных имеет уникальный атрибут id.Я пишу скрипт, который опрашивает сервер на предмет данных и использует полученные результаты для повторной сортировки таблицы.С сервера я получаю массив, подобный следующему: 

var order_arr = [6, 4, 2, 1, 5, 3]

, который я хочу использовать для визуальной повторной сортировки некоторых табличных данных, например: 

<tr id="user-1">...</tr>
<tr id="user-2">...</tr>
<tr id="user-3">...</tr>
<tr id="user-4">...</tr>
<tr id="user-5">...</tr>
<tr id="user-6">...</tr>

, чтобы онпользователь так: 

<tr id="user-6">...</tr>
<tr id="user-4">...</tr>
<tr id="user-2">...</tr>
<tr id="user-1">...</tr>
<tr id="user-5">...</tr>
<tr id="user-3">...</tr>

Я написал для этого код jQuery на jsFiddle , но я не знаю, является ли это лучшим методом.Он выбирает массив элементов <tr> и сортирует их по соответствующему индексу идентификатора каждой строки.Он заканчивается вызовом .html(), который просто заменяет все содержимое тела таблицы.

Итак .. tl; dr:

  1. Является ли этот код лучшимспособ визуально пересортировать таблицу HTML по массиву, содержащему желаемый порядок идентификаторов строк?
  2. Как я могу сделать это анимированным?Я думал, что вместо этого мог бы написать это как хак CSS, в котором каждая строка таблицы имеет абсолютную позицию, и я мог просто запустить .animate() после вычисления, какую позицию должна занимать каждая строка.Мысли против моего текущего кода?

1 Ответ

2 голосов
/ 22 марта 2011

Лучшее решение, которое я смог найти, сохранившее оригинальную функциональность и добавленную анимацию, было с помощью CSS. Вот соответствующий JS: 

function sort(order_arr) {
    var top = 0;    
    $.each(order_arr, function(idx, val) {
        var el = $('tbody tr#user-' + val);

        el.animate({
            position: 'absolute',
            top: top + 'px'
        }, 400);
        top += el.outerHeight();
    });
}

Демонстрация на jsFiddle

...