jQuery 可排序的自定义索引范围序列化答案

【问题标题】：jQuery sortable custom index range serializationjQuery 可排序的自定义索引范围序列化
【发布时间】：2012-03-02 17:33:57
【问题描述】：

我正在使用 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
        });
    }
});

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

谢谢。

【问题讨论】：

$(this).sortable("serialize") 返回什么？
“将可排序的项目 ID 序列化为表单/ajax 可提交字符串。调用此方法会生成一个哈希，可以附加到任何 url 以轻松将新的项目订单提交回服务器。”有关更多信息，请在方法 > 序列化下查看此处：jqueryui.com/demos/sortable/#method-serialize。在上面的例子中，它会返回类似 data[]=A&data[]=D&data[]=B&data[]=C&data[]=E&data[]=F

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

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

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

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

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

【讨论】：

谢谢。直到现在才想到这个。

【解决方案2】：

我想您可以使用 GREP 函数对您的数组执行搜索。

http://api.jquery.com/jQuery.grep/

var data = [];
data.push('A','B','C','D','E','F','G','H');

var editedData = data.slice(0);
editedData[1] = 'D';
editedData[2] = 'B';
editedData[3] = 'C';


$.grep(data,function(el,index){
return el != editedData[index];
});

grep 函数允许您“过滤”一个数组。您将要搜索的数组和要搜索的功能传递给它。该函数需要一个元素和一个索引。您可以使用 grep 并利用“index”属性将更改后的编辑数组与原始数组进行比较。

如果由于某种原因物品数量不同，您需要适应这种情况。

【讨论】：