Динамические поля ввода в таблице

Question

У меня есть таблица сортируемых строк с входными данными, к которым пользователи могут динамически добавлять больше строк. Но теперь я хотел бы иметь возможность сгруппировать эти строки в наборы. Теоретически:

<tr>
  <td><input type="text" name="set[0][name]" value="setname" /></td>
<tr>
<tr>
  <td><input type="text" name="set[0][items][0][itemname]" value="itemname" /><td>
</tr>
<tr>
  <td><input type="text" name="set[0][items][1][itemname]" value="itemname" /><td>
</tr>
<tr>
  <td><input type="text" name="set[1][name]" value="setname" /></td>
<tr>
<tr>
  <td><input type="text" name="set[1][items][0][itemname]" value="itemname" /><td>
</tr>
<tr>
  <td><input type="text" name="set[1][items][1][itemname]" value="itemname" /><td>
</tr>

Мне бы хотелось, чтобы наборы и элементы были сортируемыми, чтобы пользователь мог изменить начальную точку набора, перетаскивая строку набора, или изменить элементы набора, перетаскивая элементы (я использую сортируемый пользовательский интерфейс jQuery. за это).

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

Любая помощь приветствуется! Спасибо!

Answer 1

$(document).on("click", $('.sortable'), function (e) {
    $('.sortable').sortable({
        start: function (event, ui) {
            var start_pos = ui.item.index();
            ui.item.data('start_pos', start_pos);
        },
        change: function (event, ui) {
            var start_pos = ui.item.data('start_pos');
            var index = ui.placeholder.index();
            if (start_pos < index) {
                $('.sortable :nth-child(' + index + ')').addClass('highlights');
            } else {
                $('.sortable').children(' :eq(' + (index + 1) + ')').addClass('highlights');
            }
        },
        update: function (event, ui) {
            var redirectUrl = $('#hiddenRedirectUpdateOrder').val();
            $.ajax({
                url: redirectUrl,
                type: 'POST',
                cache: false,
                contentType: 'application/json',
                data: JSON.stringify({ orders: $(this).sortable('toArray') }),
            });
            $('.sortable').removeClass('highlights');
        }
    });
});