Question

请寻求一点帮助：

我实施了一个拖拉机在我正在构建的调查中删除重新排序功能，但是当用户重新订购时，我不确定如何将列表的顺序提交给我的服务器。

以下是重新订购的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>

Answer 1

尝试这样的事情：

$("#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();

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

Answer 2

以下是使用表单并提交给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>

将重新排序的列表的顺序提交给我的服务器

2 个答案: