jQuery UI的Sortable serialize()方法

jQuery UI 的 Sortable 组件提供了一个 serialize() 方法，该方法用于将 Sortable 实例中的项目序列化为一个字符串。在本教程中，我们将详细介绍 Sortable 的 serialize() 方法的使用方法。

serialize() 方法基本语法如下：

$( ".selector" ).sortable( "serialize" );

其中，".selector" 是 Sortable 的 CSS 选择器。

以下两个示例：

示例一：使用 Sortable 的 serialize() 方法

$( "#my-sortable" ).sortable({
  update: function( event, ui ) {
    var serialized = $( this ).sortable( "serialize" );
    console.log( serialized );
  }
});

这将创建一个名为 my-sortable 的 Sortable 实例，并在 update 事件处理程序中使用 serialize() 方法将 Sortable 实例中的项目序列化为一个字符串。序列化后的字符串将被记录在控制台中。

示例二：使用 Sortable 的 serialize() 方法和 PHP

$( "#my-sortable" ).sortable({
  update: function( event, ui ) {
    var serialized = $( this ).sortable( "serialize" );
    $.ajax({
      url: "sort.php",
      type: "POST",
      data: serialized
    });
  }
});

这将创建一个名为 my-sortable 的 Sortable 实例，并在 update 事件处理程序中使用 serialize() 方法将 Sortable 实例中的项目序列化为一个字符串。然后，使用 jQuery 的 ajax() 方法将序列化后的字符串发送到名为 sort.php 的 PHP 脚本。

总结：

jQuery UI 的 Sortable 组件提供了一个 serialize() 方法，该方法用于将 Sortable 实例中的项目列化为一个字符串。要使用 serialize() 方法，需要将其与 Sortable 的 jQuery 对象一起使用。可以在 update 事件处理程序中使用 serialize() 方法，以在 Sortable 实例中的项目发生更改时序列化项目可以将序列化后的字符串到服务器进行处理。