javascript 使用带有表单的 jQueryUI 可排序列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5131460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using jQueryUI sortable list with forms
提问by gaefan
I'm using jQueryUI to create a sortable list, and the UI part works great in that I can sort the items as desired on the web page. I can't figure out, though, how the order of the sorted list is included in the POST. I'm a total noob with javascript so please forgive me if this is really simple.
我正在使用 jQueryUI 创建一个可排序的列表，UI 部分非常有用，因为我可以在网页上根据需要对项目进行排序。但是，我无法弄清楚排序列表的顺序如何包含在 POST 中。我是 javascript 的完全菜鸟，所以如果这真的很简单，请原谅我。
Here are the relevant portions of my html:
以下是我的 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>
How can the order of Jamie, Joanie, Morley, Frank, and Larry be encoded in the POST?
如何在 POST 中对 Jamie、Joanie、Morley、Frank 和 Larry 的顺序进行编码？
采纳答案by JohnP
You can use the method .serializeon your sortable object : http://docs.jquery.com/UI/Sortable#method-serialize
您可以.serialize在可排序对象上使用该方法：http: //docs.jquery.com/UI/Sortable#method-serialize
$( "#sortable" ).sortable('serialize')will give you an ajax submittable array of items. Just assign it to an input box if you are not using ajax. Or simply pass it into your data array if using ajax
$( "#sortable" ).sortable('serialize')会给你一个 ajax 可提交的项目数组。如果您不使用 ajax，只需将其分配给输入框。或者，如果使用 ajax，只需将其传递到您的数据数组中
EDITExample here : http://jsfiddle.net/jomanlk/KeAer/2/
此处编辑示例：http: //jsfiddle.net/jomanlk/KeAer/2/
As the jquery docs note, for this to work your elements need to have ids in the form of set_number(e.g. rank_1, rank_2). So I've modified your HTML
正如jquery docs 指出的那样，要使其工作，您的元素需要具有set_number（例如rank_1、rank_2）形式的id 。所以我修改了你的 HTML
Just remove the return falsein the form and the serialized value will be set to the input box on form submission
只需删除return false表单中的，序列化值将设置为表单提交时的输入框
回答by Doug Lampe
Another option is to just have a hidden input form field with the ID value for the item as the value and the same name. Then submit the form after sorting stops. The values will all be available in the posted data in the order they were after the sort.
另一种选择是只有一个隐藏的输入表单字段，其中项目的 ID 值作为值和相同的名称。然后在排序停止后提交表单。这些值将按照排序后的顺序在发布的数据中可用。
I do something like this:
我做这样的事情：
$(".sortable").each(function () {
$(this).sortable({
update: function (event, ui) {
$(this).closest("form").trigger("onsubmit");
}
});
});
And the form looks like this:
表格如下所示：
<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>
