JQuery & PHP - 如何在表单中保存重新排序的 div 组？答案

【问题标题】：JQuery & PHP - How to save reordered group of divs within a form?JQuery & PHP - 如何在表单中保存重新排序的 div 组？
【发布时间】：2020-03-11 04:56:16
【问题描述】：

我知道那里有类似的问题，但我似乎找不到可以回答我的特定问题的问题。我有一个表单，其中包含一组基于 JSON 数组（保存在单独的 JSON 文件中）生成的 div。

我使用 Bootstrap 作为设计基础（我会省去冗长的 HTML 标记）和 JQueryUI 的“可排序”功能来重新排序列表。我似乎无法解决的问题是如何在更新 JSON 时保存该订单。

这是我目前的设置：

<script>
var wrapper=$('#eventWrapper');
$(wrapper).sortable();
$(wrapper).disableSelection();
var add_button=$('#addEventButton');

$.getJSON('events.json',function(events){
  var count=Object.keys(events).length;
  if(count>0){
    for(var i=1;i<=count;i++){
      //Load the input values
      var name=events[i].name;
      var date=events[i].date;
      //Build the event card
      var currentEvent='<div class="ui-state-default">...<input type="text" name="event'+i+'[name]" value="'+name+'">...<input type="text" name="event'+i+'[date]" value="'+date+'">...<button class="remove_event">Remove event</button></div>';
      //Newest event on top, plz!
      $(wrapper).prepend(currentEvent);
    }
  };
  var x=count;
  $(add_button).click(function(e){
    e.preventDefault();
    x++;
    var newEvent='<div class="ui-state-default">...<input type="text" name="event'+x+'[name]">...<input type="text" name="event'+x+'[date]">...<button class="remove_event">Remove event</button></div>';
    $(wrapper).prepend(newEvent);
  });
  $(wrapper).on("click",".remove_event",function(e){
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });
});
$('#updateBtn').click(function(e){
  e.preventDefault();
  $.ajax({
    type:'POST',
    url:'updateList.php',
    data:$('#eventForm').serialize(),
    success:...
  });
});

对于updateList.php：

<?php
$json=json_encode($_POST);
$file='events.json';
file_put_contents($file, $json);
if(file_exists($file)){
    echo json_encode(array('success'=>1));
}else{
    echo json_encode(array('success'=>0));
}
?>

#eventForm 封装了一系列事件，这些事件首先由 JSON 构建，然后由用户添加/删除/重新排序（使用 sortable() 单击/拖动、删除按钮和添加事件按钮）。在提交表单之前或提交表单时，如何更新输入数组的 x 值以反映重新排序的列表？

【问题讨论】：

解决了这个问题，我用头撞墙直到墙倒塌
看来你的for循环应该从var i=0开始，其次，应该使用jquery的$.each函数来减少行代码。不是for循环函数的问题。

标签： javascript php jquery ajax sorting

【解决方案1】：

看来我解决了自己的问题！如果其他人在他们的项目中遇到类似问题，我会这样做：

我修改了这段代码：

for(var i=1;i<=count;i++){
      //Load the input values
      var name=events[i].name;
      var date=events[i].date;

到这里：

for(i in events){
    var name=events[i].name;
    var date=events[i].date;

“for”循环中的简单更改让世界变得不同！

我没有错误地保存，而是错误地从 JSON 文件中读取内容。如果用户将卡片 [1,2,3,4] 重新排序为 [3,2,4,1]，我之前根据给定的输入“名称”将 JSON 文件读取为 [3,2,4,1] .

现在重新加载时，旧的 [3,2,4,1] 现在按顺序读取为 [1,2,3,4]，忽略输入的“名称”可能是什么。

【讨论】：