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

时间:2011-02-27 04:29:37

标签: javascript jquery-ui forms post

我正在使用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>

Jamie,Joanie,Morley,Frank和Larry的命令如何在POST中编码?

2 个答案:

答案 0 :(得分:15)

您可以在可排序对象上使用方法.serializehttp://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,序列化值就会设置为表单提交上的输入框

答案 1 :(得分:6)

另一种选择是只有一个隐藏的输入表单字段,其中项目的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>