如何序列化與jQueryUI可排序列表的當前項相關的數據？

我正在使用jQueryUI 1.8.14。我想實施sortable list，並且每次用戶更改項目位置時，都會在我的應用程序數據庫中保存相關的項目位置更改。如何序列化與jQueryUI可排序列表的當前項相關的數據？

要做到這一點，我打算檢索和序列化id值和剛剛改變了立場項目的新位置值（我需要做的是這樣產生並以執行準備數據AJAX HTTP請求）。總之，使用serialize一種方法，在official documentation descibed它將系列化所有的項目在一個submittable字符串id值（例如：key=1&key=2&...），但我想序列只當前項目id價值和檢索其新的位置值。

我該怎麼做\代碼？

在這個時候，我想實現這個功能是這樣的：

JavaScript代碼：

$jQ(function() { 
    $jQ("#sortable_list").sortable({ 
    placeholder: "ui-state-highlight", 
    update: function(event, ui) { 

     // Here I would like to "serialize" ONLY the current updated item and 
     // then perform the AJAX HTTP request 

     // alert($jQ("#sortable_list").sortable("serialize")) 
     ... 
    } 
    }); 
    $jQ("#sortable_list").disableSelection(); 
});

HTML代碼

<ul id="sortable_list"> 
    <li class="ui-state-default" id="key_1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
    <li class="ui-state-default" id="key_2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
    ... 
</ul>

對於istance，如果我更改相關的項目位置到id="key_2"我想將這些數據序列化到key=2（注意：通常serialize方法會生成像key=1&key=2&...這樣的數據）。此外，我想包括該項目的當前\新位置（例如：new_position=1）。最後，我想要執行包含這些參數的AJAX HTTP請求：<URL_string>?key=2&new_position=1。

來源

2011-10-27 user502052

測試它http://jsfiddle.net/kRsCE/

$jQ(function() { 
    $jQ("#sortable_list").sortable({ 
    placeholder: "ui-state-highlight", 
    update: function(event, ui) { 
     var itemid = $(ui.item).attr('id'); 
     var position; 
     $jQ("sortable_list > li").each(function(index) { 
      if($(this).attr('id') == itemid) { 
       position = index; 
       return; 
      } 
     }); 
     $.post('yourajaxscript', '&key='+itemid+'&new_position='+position, function(data) { 
      //handle response 
     }); 
    } 
    }); 
    $jQ("#sortable_list").disableSelection(); 
});

來源

2011-10-27 14:38:51 netiul

我無法檢索'$ JQ外'position'值（「sortable_list>李」）。每個（函數（指數）{...}'JavaScript語句。我得到以下錯誤：'位置未定義* $ jQ（function（）{$ jQ（「＃sortable_li ... ortable_list」）。disableSelection（）;}）;'。 – user502052

更多，也許我可以使用' ui.position'（正式文檔中描述的）而不是運行'$ jQ（「sortable_list> li」）。each（function（index）{...}'code ...但是如何使用它？if我運行'alert（ui.position）'我得到如下警告消息：''[object Object]'「...我怎麼檢查那個對象？ – user502052

看來從ui對象中檢索拖動的項目更可靠。謝謝你指點我。我更新了代碼。我同意它在列表中不太好，但我不認爲有另一種解決方案。雖然ui.position給出了與文檔相關的元素的確切位置（以像素爲單位）。所以，是的，你可以用它來確定位置（'ui.position.top'），但是你必須將它與其他元素的位置進行比較。沒有更好的解決方案。 – netiul

如何序列化與jQueryUI可排序列表的當前項相關的數據？

回答

相關問題