Question

我正在使用jQueryUI 1.8.14。我希望实现sortable list并在每次用户更改项目位置时在应用程序数据库中保存相关的项目位置更改。

为此，我计划检索并序列化id值以及刚刚更改其位置的项目的新位置值（我需要这样做才能生成并准备数据以执行AJAX HTTP请求）。无论如何，使用official documentation中描述的serialize方法，它将序列化可提交字符串中的所有项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。

Answer 1

经过测试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();
});

如何序列化与jQueryUI可排序列表的当前项相关的数据？

1 个答案: