博客

jQuery UI的Sortable serialize()方法

  • Post category:jquery

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 实例中的项目发生更改时序列化项目。可以将序列化后的字符串到服务器端进行处理。

Tags: