Question

你可以在各处找到关于如何使列表排序的例子。但是，我需要将新订单发布到另一个页面。我必须监督一些愚蠢的事情但是在经过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。任何帮助将不胜感激。比安卡

Answer 1

根据documentation for serialize：

将sortable的item id序列化为form / ajax submittable字符串。调用此方法会生成一个哈希值，该哈希值可以附加到任何URL，以便轻松地将新的项目顺序提交回服务器。

默认情况下，通过查看“setname_number”格式的每个项目的ID，它会发出一个哈希，例如“setname [] = number＆amp; setname [] = number”。

您还可以使用选项哈希作为第二个参数来自定义函数的工作方式。可能的选项是：'key'（用你想要的任何东西替换part1 []），'attribute'（测试另一个属性而不是'id'）和'expression'（使用你自己的正则表达式）。

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

您的列表项上是否有id个属性？

您是否确认所有这些内容都包含下划线并且格式正确？

Answer 2

您正在设置变量=到serailization，而不是实际的隐藏字段，如果您使用

设置隐藏字段值会发生什么

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

此处还有一个问题，其中包含有关将序列化列表发布到其他可能有用的页面的详细信息。

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

------------------这是一个有效的例子--------------------- ------

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

项目[] = 1＆安培;项目[] = 4和;项目[] = 2及项目[] = 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>

需要有关可排序和序列化的初学者指导

2 个答案: