1

请在这方面寻求一点帮助：

我在我正在构建的调查中实现了拖放重新排序功能，但是我不确定一旦用户重新排序后如何将列表的顺序提交到我的服务器。

这是用于重新排序的 JS：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$(function() {
$(  "#sortable"  ).sortable();
$(  "#sortable"  ).disableSelection();
});
</script>

和html：

<ol id="sortable">
<li><label for=""><input type="checkbox" name="resortable-option1" value="1">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option2" value="2">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option3" value="3">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option4" value="4">Option 1</label></li></ol>
4

2 回答 2

3

尝试这样的事情： 

$("#sortable").sortable({
      stop: function (event, ui) {

            //Serializes the sortable's item id's into an array of string
            var senderStrIndexArray = $(this).sortable("toArray");

            $.ajax({
                 type: "POST",
                 url: '...',
                 data: { senderOrderedServicesIds: senderStrIndexArray },
            });
      }           
});

$(  "#sortable"  ).disableSelection();

您将发送一个包含项目排序索引的数组，然后您可以将它们写入数据库。

于 2013-02-22T14:13:55.667 回答
1

这是一个使用表单并提交到 PHP 的示例：

动作页面：

 <?php
    if(isset($_POST["resortable-option"])){
       foreach($_POST["resortable-option"] as $item){
         echo $item."<br>";
       }
    }
 ?>

HTML 表单：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
   $(function() {
      $(  "#sortable"  ).sortable();
      $(  "#sortable"  ).disableSelection();
   });
</script>
<form action="ActionPage" method="post">
   <ol id="sortable">
   <li><label for=""><input type="checkbox" name="resortable-option[]" value="1">Option 1</label></li>
   <li><label for=""><input type="checkbox" name="resortable-option[]" value="2">Option 2</label></li>
   <li><label for=""><input type="checkbox" name="resortable-option[]" value="3">Option 3</label></li>
   <li><label for=""><input type="checkbox" name="resortable-option[]" value="4">Option 4</label></li></ol>
   <input type="submit" value="send">
</form>
于 2013-02-22T14:25:01.740 回答