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

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

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

<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);

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


jquery html-table move tablerow
person Rob    schedule 25.11.2011    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Во-первых, если вы хотите переместить строку, вам не нужно ее клонировать. Когда вы выбираете какой-либо элемент 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');
person Mateusz W    schedule 25.11.2011

arrow_upward
1
arrow_downward

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

person FtDRbwLXw6    schedule 25.11.2011
comment
@drrcknisn на самом деле нет необходимости в сортировке, все, что мне нужно, это перемещать строки по индексу строки. Итак, если у меня есть 1,2,3,4,5, а затем новый порядок 3,4,5,2,1. - person Rob; 25.11.2011
comment
Перемещение строк по индексу строки является сортировкой. - person FtDRbwLXw6; 25.11.2011
comment
Строки динамически перемещаются пользователем, поэтому вы не можете сортировать поля по возрастанию или убыванию. В этой таблице может быть больше или меньше строк. Поэтому все, что я ищу, это как поменять местами строки. - person Rob; 25.11.2011
comment
дизайн таблицы не хранится в формате сверху вниз. дизайн таблицы находится в строке, а затем анализируется для построения макета, чтобы его нельзя было отсортировать на стороне сервера. - person Rob; 25.11.2011
comment
Конечно, порядок сортировки строк можно сохранить. Если строка № 1 помещается пользователем в позицию № 3, когда пользователь сохраняет строку/макет/что угодно, вы просто сохраняете позицию сортировки в столбце в базе данных. При извлечении строк для повторного показа пользователю просто упорядочите результаты по этому столбцу, и ваши строки будут в том же порядке, в котором пользователь разместил их в последний раз. Я не понимаю, почему вы думаете, что этот подход не сработает... - person FtDRbwLXw6; 26.11.2011