javascript - jQuery 可排序自定义索引范围序列化

Question

我正在使用 jQuery UI 可排序插件来管理数据库中数据的权重值。开箱即用的 jQuery 可排序序列化将返回列表中要更新的所有数据索引。这对我来说是不必要的，因为唯一在更新时具有权重变化的项目是项目的新索引和先前索引之间的项目(反之亦然)。

例如，让我们看一下以下数据集:

<div id="sortable">
    <div id="data_A">Data A</div>
    <div id="data_B">Data B</div>
    <div id="data_C">Data C</div>
    <div id="data_D">Data D</div>
    <div id="data_E">Data E</div>
    <div id="data_F">Data F</div>
</div>

[0] = A
[1] = B
[2] = C
[3] = D
[4] = E
[5] = F

如果我将 D 移动到列表中的位置 1，我们现在有以下内容:

<div id="sortable">
    <div id="data_A">Data A</div>
    <div id="data_D">Data D</div>
    <div id="data_B">Data B</div>
    <div id="data_C">Data C</div>
    <div id="data_E">Data E</div>
    <div id="data_F">Data F</div>
</div>

[0] = A
[1] = D
[2] = B
[3] = C
[4] = E
[5] = F

只有索引 1(新位置)到 3(先前位置)会受到影响，并且需要数据库更新它们的权重。

我的问题是，我如何才能在每次更新时只序列化这个特定的数据集？

这是我目前使用我的代码所处的位置:

$("#sortable").sortable({
    placeholder: "sortable-placeholder",
    start: function (event, ui) {
        $(this).attr('data-previndex', ui.item.index());
    },
    update: function (event, ui) {
        var newPosition = ui.item.index();
        var prevPosition = $(this).attr('data-previndex');

        $.ajax({
            type: "POST",
            url: "/topics/updateorder",
            // sends all data ** TODO: WE ONLY WANT TO PASS SERIALIZED DATA FOR INDEXES newPosition - prevPosition (or visa-versa) **
            data: $(this).sortable("serialize") // currently sends data[]=A&data[]=D&data[]=B&data[]=C&data[]=E&data[]=F, we want data[]=D&data[]=B&data[]=C
        });
    }
});

显然我需要一个自定义序列化器或某种(我认为？)，只是不确定如何。然而，仅传递更改后的数据的一个问题是我无法再根据已发布的表单数据的索引更新权重(因为不再传递所有数据)。我还必须以某种方式传递它们相对于所有其他数据的索引值。

谢谢。

Answer 1

我认为更简单的方法是将元素的新位置简单地传递给服务器。这样您就不会为所有元素发送数据(这听起来像是您要避免的)。

查看可排序小部件的事件:http://jqueryui.com/demos/sortable/#events

您可以绑定(bind)一个函数来更新，该函数可用于获取元素的新位置并通过 ajax 将其发送到服务器。

因为服务器知道元素和它的旧位置，服务器可以处理将所有剩余元素“推”到一个位置所需的计算，而您只需向服务器发送一个字符串和整数请求。