需要针对初学者的可排序和序列化指导

发布于 2024-12-08 04:09:54 字数 638 浏览 0 评论 0原文

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

然后是jquery代码

<前><代码> <脚本> $(函数() { $( "#ulsortable" ).sortable(); }); $('#frm-sort').submit(function(){ var sort_serialized = $("#ulsortable").sortable("serialize"); }); <表单操作=“#request.site.webroot#/actions/act_writeneworder.cfm”方法=“post”id=“frm-sort”> <输入类型=“提交”名称=“保存”id=“保存”值=“保存”/> <输入类型=“隐藏”名称=“sort_serialized”id=“sort_serialized”值=“”/>/>

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

原文

You can find exemples everywhere about how to make a list sortable. But then, I need to post the new order to another page.I must oversee something stupid but after having passed 3 days on it I still don't have the solution.
I have an query output

Then the jquery code

    <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>

The variable sort_serialized however gives an empty string. This is my first experience with jQuery. Any help would be greatly appreciated.
Bianca

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

杀手六號 2024-12-15 04:09:54

根据序列化文档：

将可排序的项目 ID 序列化为表单/ajax 可提交字符串。调用此方法会生成一个哈希值，该哈希值可以附加到任何 url，以便轻松地将新的商品订单提交回服务器。
默认情况下，它通过查看格式为“setname_number”的每个项目的 ID 来工作，并输出类似“setname[]=number&setname[]=number”的哈希值。
您还可以提供选项哈希作为第二个参数来自定义函数的工作方式。可能的选项是：“key”（用您想要的任何内容替换part1[]）、“attribute”（测试“id”之外的另一个属性）和“expression”（使用您自己的正则表达式）。
如果序列化返回空字符串，请确保 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 属性吗？

您是否已验证它们全部包含下划线并且格式正确？

回复收藏 0 原文

╰ゝ天使的微笑 2024-12-15 04:09:54

您正在将变量 = 设置为序列化，而不是实际的隐藏字段，如果您设置隐藏字段值，会发生什么情况，

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

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

jQuery：如何处理可排序的列表（' Serialize') 返回？

------------------ 这是一个适合您的示例 ------------------ ------------

您应该能够将其发布在 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>

You are setting a variable = to the serailization, but not the actual hidden field, what happens if you set the hidden field value using

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

also here is a question that has more information about posting a serialized list to another page that may be useful.

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

------------------ Here is an Example for you that works ---------------------------

You should be able to post this in an html page, adjust your Script and Style Refereneces in the head and it will work. When you click the button it will put the serialized list in the textbox. For example after moving a couple of Items, I get the result

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

Here is the code.

<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>

回复收藏 0 原文

~没有更多了~