jQuery UI Sortable serialize() 方法

jQuery UI 是一种基于 Web 的技术，由各种 GUI 小部件、视觉效果和主题组成。这些功能可以使用 jQuery JavaScript 库来实现。 jQuery UI 是为网页构建 UI 界面的最佳工具。它还可以用于构建高度交互的 Web 应用程序，或者可以用于轻松添加小部件。

在本文中，我们将学习jQuery UI 的 Sortable serialize() 方法来生成哈希，该哈希可以附加到任何可以轻松将新商品订单提交回服务器的 URL。它将可排序的项目 ID 序列化为表单/ajax 可提交字符串。此方法使用 ID 作为默认属性，例如，如果每个项目的 ID 为“geeks_value”，则将生成的哈希为“geeks[]=value & geeks[]=value”。

注意：如果 ID 属性不包含下划线，则 serialize 方法将返回一个空字符串。

句法：

调用 serialize() 方法：

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

参数：此方法接受选项作为有助于自定义序列化的参数。它属于对象类型。它包含 3 个值：

• key：它用指定的值替换part[]。它是字符串类型的。
• 属性：用于值 & 的属性名称是字符串类型。
• 表达式：正则表达式用于将属性值拆分为键值部分&是RegExp类型。

返回类型：它返回一个字符串类型的哈希。

CDN 链接：添加项目所需的 jQuery Mobile 脚本：

示例：下面的示例说明了 jQuery UI Sortable serialize()方法的实现。

HTML

  

    
    
    
    
    
    
    jQuery UI Sortable serialize method
    
        #sortableList {
            list-style-type: none;
        }
        .geeks {
            margin: 10px;
            background: lightgreen;
            padding: 10px;
            border: 1px solid green;
            font-size: 25px;
        }
    
    
        $(function() {
            $("#sortableList").sortable({
                update: function(event, ui) {
                    var hash = $(this).sortable('serialize');
                    $("#sortedList").text(hash);
                }
            });
        });
    

  

    
        
            GeeksforGeeks
        
          
        jQuery UI Sortable serialize method
          
        
            
                1.Free Tutorials 
            
            
                2.Millions of articles 
            
            
                3.Webinars by Industry Experts 
            
            
                4.Live, Online and Classroom Courses 
            
        
          
        Hash produces by serialize method is 
          
        
            
         
    

输出：

jQuery UI Sortable serialize() 方法

参考： https ://api.jqueryui.com/sortable/#method-serialize