【问题标题】:Need instruction for beginner with sortable and serialize需要可排序和序列化的初学者指导
【发布时间】:2011-10-04 10:59:41
【问题描述】:

您可以在各处找到有关如何使列表可排序的示例。但是,我需要将新订单发布到另一个页面。我必须监督一些愚蠢的事情,但经过 3 天后,我仍然没有解决方案。 我有一个查询输出

  • 然后是jquery代码
        <script>
        $(function() {
            $( "#ulsortable" ).sortable();
    
        });
            $('#frm-sort').submit(function(){
                var sort_serialized = $("#ulsortable").sortable("serialize");
            });
        </script>
    
        <form action="#request.site.webroot#/actions/act_writeneworder.cfm" method="post" id="frm-sort">
      <input type="submit" name="save" id="save" value="save" />
      <input type="hidden" name="sort_serialized" id="sort_serialized" value="" />
    </form>
    

    然而,变量 sort_serialized 给出了一个空字符串。这是我第一次使用 jQuery。任何帮助将不胜感激。 比安卡

  • 【问题讨论】:

    标签: javascript jquery jquery-ui jquery-ui-sortable


    【解决方案1】:

    根据documentation for serialize

    将可排序的项目 ID 序列化为表单/ajax 可提交字符串。调用此方法会生成一个哈希值,该哈希值可以附加到任何 url,以便轻松地将新的商品订单提交回服务器。

    默认情况下,它会以“setname_number”格式查看每个项目的 id,它会输出像“setname[]=number&setname[]=number”这样的哈希值。

    您还可以提供选项哈希作为第二个参数,以自定义定义函数的工作方式。可能的选项是:'key'(用你想要的任何东西替换 part1[])、'attribute'(测试 'id' 以外的另一个属性)和'expression'(使用你自己的正则表达式)。

    如果 serialize 返回一个空字符串,请确保 id 属性包含下划线。它们必须采用以下形式:“set_number” 例如,具有 id 属性 foo_1、foo_5、foo_2 的 3 元素列表将序列化为 foo[]=1&foo[]=5&foo[]=2。您可以使用下划线、等号或连字符来分隔集合和数字。例如 foo=1 或 foo-1 或 foo_1 都序列化为 foo[]=1。

    您的列表项中有id 属性吗?

    您是否已验证所有这些都包含下划线并且格式正确?

    【讨论】:

    • 我不确定我是否理解你刚才所说的一切。对于您的问题,所有列表项都有一个唯一 ID,即它们在数据库中的 ID。
    • 导致 id=ID_12345 等
  • 您能否编辑您的帖子以包含#ulsortable 元素的内容?在源代码的上下文中解释这个问题可能是最容易的。
  • 【解决方案2】:

    您正在为序列化设置一个变量 =,而不是实际的隐藏字段,如果您使用设置隐藏字段值会发生什么

    $("#sort_serialized").val($("#ulsortable").sortable("serialize").toString()); 
    

    还有一个问题,其中包含有关将序列化列表发布到可能有用的另一个页面的更多信息。

    jQuery: What to do with the list that sortable('serialize') returns?

    ------------------ 这是一个适用于您的示例 --------------------- ------

    您应该能够在 html 页面中发布此内容,在头部调整您的脚本和样式参考,它会起作用。当您单击按钮时,它会将序列化列表放入文本框中。例如,在移动了几个项目后,我得到了结果

    Item[]=1&Item[]=4&Item[]=2&Item[]=3

    这里是代码。

    <html xmlns="http://www.w3.org/1999/xhtml" >
     <head>
         <title>Sample Sort and Serialize</title>
    <link href="Content/Css/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
    <script src="Content/Scripts/jquery-1.6.min.js" type="text/javascript"></script>
         <script src="Content/Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
     </head>
     <body>
         <form>
         <script language="javascript">
             $(function() {
                 $("#ulSortable").sortable();
                 $("#ulSortable li").addClass("ui-widget-header");
    
                 $('#btnSort').click(function() {
                     $("#sort_serialized").val($("#ulSortable").sortable("serialize").toString());
            });
        });
       </script> 
       <style>
             #ulSortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
             #ulSortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor: pointer;}
             #ulSortable li span { position: absolute; margin-left: -1.3em; }
       </style>
    
         <ul id="ulSortable">
             <li id="Item_1">Item 1 Content</li>
             <li id="Item_2">Item 2 Content</li>
             <li id="Item_3">Item 3 Content</li>
             <li id="Item_4">Item 4 Content</li>
         </ul>
         <br /><br />           
    
         <input type="text" id="sort_serialized" size="50"/>
         <input type="button" id="btnSort" value="Sort List" />
    
    </form>
     </body>
     </html>
    

    【讨论】:

    • 我都试过了 $("#sort_serialized") = $("#ulsortable").sortable("serialize"); AND var sort_serialized = $('ulsortable').sortable('serialize');然后在下一页中,我转储了变量 sort_serialized,它一直说它是一个空字符串。所有列表项都有一个 ID。我感到完全迷失了。
    • 在那里,我添加了一个代码示例,其中包含一个简单的可排序列表和一个将序列化列表放入文本框中的按钮。希望这会有所帮助。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签