1

我有一个可排序的行表，其中包含用户可以动态添加更多行的输入。但现在我希望能够将这些行分组。理论上：

<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 可排序 UI为了这）。

我遇到的问题是弄清楚如何动态添加集合和项目行，同时在排序时保持正确的数组键和值对。

任何帮助表示赞赏！谢谢！

4

1 回答 1

0 
$(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');
        }
    });
});
于 2017-04-28T08:13:37.627 回答