Переместить tr по индексу на новую позицию - PullRequest
Новая
       23

Переместить tr по индексу на новую позицию

2 голосов
/ 25 ноября 2011

У меня есть таблица с фиксированным расположением строк. Каждая строка имеет уникальный идентификатор. Когда данные возвращаются из базы данных, они имеют другой порядок строк в этой таблице. Возвращенные данные имеют тот же индекс, который существует в фиксированном макете, поэтому я могу найти соответствующую строку в фиксированной таблице. Мне нужно переместить строки в фиксированном макете таблицы, чтобы они соответствовали порядку строк в данных.

Макет таблицы: 

<table>
    <tr id="a1"><td>Some Value1</td></tr>
    <tr id="a2"><td>Some Value2</td></tr>
    <tr id="a3"><td>Some Value3</td></tr>
    <tr id="a4"><td>Some Value4</td></tr>
    <tr id="a5"><td>Some Value5</td></tr>
</table>

Так что, если заказ из базы данных a3, a4, a5 мне нужна таблица, чтобы выглядеть следующим образом. 

<table>
    <tr id="a3"><td>Some Value1</td></tr>
    <tr id="a4"><td>Some Value2</td></tr>
    <tr id="a5"><td>Some Value3</td></tr>
    <tr id="a1"><td>Some Value4</td></tr>
    <tr id="a2"><td>Some Value5</td></tr>
</table>

Можно ли переместить строки по индексу строки или, если я клонирую строку, переместить ее в определенный индекс строки, а затем удалить старую строку / позицию с помощью чего-то подобного. 

var clonedRow = $("#tbl_lp_Forms > tbody > tr[class=" + myformurl + "] ").clone(true);
$('#tbl_lp_Forms tr:first').before(clonedRow);

Надеюсь, вы можете помочь!

Ответы [ 2 ]

8 голосов
/ 25 ноября 2011

Прежде всего - если вы хотите переместить строку, вам не нужно ее клонировать.Когда вы выбираете какой-либо элемент HTML и добавляете / добавляете его в другом месте, тогда он будет удален из старой позиции - так работает DOM.Таким образом, согласно html, который вы написали, когда вы делаете это: 

var $table = $('table');
$table.prepend($('#a3'));

, тогда строка с идентификатором 'a3' будет удалена из ее старой позиции и помещена в начало таблицы.

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

var order = ['a3', 'a4', 'a5', 'a1', 'a2'];

, затем, чтобы отсортировать строки по этой таблице, вам нужно просто выполнить итерацию по последнему элементу в этом массиве, получить строку с текущим идентификатором из таблицыи поместите его в начало следующим образом: 

var order = ['a3', 'a4', 'a5', 'a1', 'a2']; 
var $table = $('table');        

for (var i = order.length; --i >= 0; ) {
    $table.prepend($table.find('#' + order[i]));
}

А когда вы хотите переместить один ряд и поставить перед другим: 

var $rowa = $('#a1');
var $rowb = $('#a5');
$rowb.insertBefore($rowa);

// or even like this
$('#a5').insertBefore('#a1');
1 голос
/ 25 ноября 2011

Почему вы пытаетесь сделать сортировку в JS? Просто сохраните порядок сортировки в базе данных при их сохранении, а затем ORDER BY этот столбец при выборе данных для отображения при их возврате. Вы можете нормализовать это, поместив индексы в таблицу 1: M и присоединив ее к своей основной таблице данных, или вы можете сохранить ее в виде денормализованной строки с разделителем в самой основной таблице данных (не рекомендуется).

...