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

How to serialize data related to the current item of a jQueryUI sortable list?

本文关键字：数据 列表 序列化 jQueryUI 排序      更新时间：2023-09-26

我使用jQueryUI 1.8.14。我想实现一个可排序的列表，并在每次用户更改项目位置时将相关的项目位置更改保存在我的应用程序数据库中。

要做到这一点，我计划检索和序列化id值和刚刚改变其位置的项目的新位置值(我需要这样做，以便生成和准备数据，以便执行AJAX HTTP请求)。无论如何，使用官方文档中描述的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>

例如，如果我改变与id="key_2"相关的项目位置，我只想将该数据序列化为key=2(注意:通常serialize方法生成的数据与key=1&key=2&...类似)。此外，我想包括该项目的当前'新位置(例如:new_position=1)。最后，我想执行AJAX HTTP请求，包括这些参数:<URL_string>?key=2&new_position=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();
});
相关文章：