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

我想您可以使用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函数允许您“过滤”数组。您将要搜索的数组传递给它，以及要搜索的内容的函数。该函数采用elemenet和索引。您可以使用grep将更改的编辑数组与原始数组进行比较，并利用“index”属性。

如果由于某种原因，项目的数量不同，你需要适应它。

Answer 2

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

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

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

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

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

2 个答案: