使用带有表单的 jQueryUI 可排序列表

Posted 2023-02-22

【中文标题】使用带有表单的 jQueryUI 可排序列表

【英文标题】：using jQueryUI sortable list with forms

【发布时间】：2011-07-05 03:00:54

【问题描述】：

我正在使用 jQueryUI 创建一个可排序的列表，并且 UI 部分工作得很好，因为我可以在网页上根据需要对项目进行排序。但是，我无法弄清楚排序列表的顺序是如何包含在 POST 中的。我是 javascript 的菜鸟，所以如果这真的很简单，请原谅我。

这是我的 html 的相关部分：

<script type="text/javascript">
  google.load("jquery", "1");
  google.load("jqueryui", "1");
  function OnLoad()
    $( "#sortable" ).sortable( axis: "y", containment: "#ballot", scroll: false );
    $( "#sortable" ).disableSelection();
  
  google.setOnLoadCallback(OnLoad);
</script>

[...]

<form method="POST" action="/vote">
<input type="hidden" name="key" value=" election.key ">
<input type="hidden" name="uuid" value=" uuid ">
<div id="ballot" class="center">
<ol id="sortable" class="rankings">
  <li class="ranking">Jamie</li>
  <li class="ranking">Joanie</li>
  <li class="ranking">Morley</li>
  <li class="ranking">Frank</li>
  <li class="ranking">Larry</li>
</ol>
</div>
</form>

如何在 POST 中编码 Jamie、Joanie、Morley、Frank 和 Larry 的顺序？

【参考方案1】：

您可以在您的可排序对象上使用.serialize 方法：http://docs.jquery.com/UI/Sortable#method-serialize

$( "#sortable" ).sortable('serialize') 会给你一个 ajax 可提交的项目数组。如果您不使用 ajax，只需将其分配给输入框。或者，如果使用 ajax，只需将其传递到您的数据数组中

编辑 此处示例：http://jsfiddle.net/jomanlk/KeAer/2/

正如 jquery 文档所指出的那样，要使其正常工作，您的元素需要具有 set_number 形式的 ID（例如 rank_1、rank_2）。所以我修改了你的 HTML

只需将表单中的return false去掉，表单提交的输入框就会设置序列化值

【讨论】：

约翰，我没有使用 AJAX。要将其分配给输入框，我会这样做吗？：

我已经编辑了我的回复，其中包含有关使用情况和示例的详细信息。正确的使用方式是$('.sel').sortable('serialize')

【参考方案2】：

另一种选择是只有一个隐藏的输入表单字段，其中项目的 ID 值作为值和相同的名称。然后在排序停止后提交表单。这些值将按照排序后的顺序在发布的数据中全部可用。

我会这样做：

$(".sortable").each(function () 
    $(this).sortable(
        update: function (event, ui) 
            $(this).closest("form").trigger("onsubmit");
        
    );
);

表格看起来像这样：

<form ...>
<ul class="sortable">

        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Some info here<input id="id_name" name="id_name" type="hidden" value="1" /></li>

        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Some more info<input id="id_name" name="id_name" type="hidden" value="2" /></li>

</ul>
</form>