jQuery可排序的自定義索引範圍序列化

我正在使用jQuery UI排序插件來管理我的數據庫中的數據權重值。開箱即用，jQuery可排序序列化將返回列表中的所有數據索引以進行更新。這對我來說是不必要的，因爲只有在更新時有權重變化的項目是項目的新索引和先前索引之間的項目（反之亦然）。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 
     }); 
    } 
});

很顯然，我需要自定義序列或某種（我認爲），只是不知道如何。但是，只傳遞更改後的數據的一個問題是，我無法再根據發佈的表單數據的索引更新權重（因爲它不再通過）。我必須以某種方式將它們的索引值與所有其他數據相關聯。

謝謝。

來源

2012-03-02 kspearrin

$（this）.sortable（「serialize」）返回什麼？ – DG3 2012-03-02 17:51:38

「將可排序的項目ID序列化爲form/ajax可提交的字符串。調用此方法會生成一個哈希值，該哈希值可以附加到任何url以便輕鬆地將新項目訂單提交回服務器。「有關詳細信息，請查看下面的方法> Serialize：http://jqueryui.com/demos/sortable/#method-serialize。在上面的例子中，它會返回類似於** data [] = A＆data [] = D＆data [] = B＆data [] = C＆data [] = E＆data [] = F ** – kspearrin 2012-03-02 18:21:57

我認爲這樣做的更簡單的方法是簡單地將元素的新位置傳遞給服務器。這樣你就不會爲所有元素髮送數據（這聽起來像你想要避免的）。

在爲排序插件的事件採取偷看：http://jqueryui.com/demos/sortable/#events

你可以綁定一個函數來更新它可以用來獲取元素的新位置，並通過AJAX發送到服務器。

由於服務器知道元素及其舊位置，服務器可以處理將所有剩餘元素「推」到一個位置所需的計算，並且您只向服務器發送字符串和整數你的申請。

來源

2012-03-02 18:56:04 Brian

謝謝，直到現在沒有想過這個 – kspearrin 2012-03-02 20:36:02

不客氣:) – Brian 2012-03-02 20:37:01

我想你可以用你的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將已更改的編輯數組與原始數組進行比較，並利用「索引」屬性。

如果由於某種原因，項目的數量是不同的，你將需要適應。

來源

2012-03-02 17:51:38

jQuery可排序的自定義索引範圍序列化

回答

相關問題