javascript - 如何在 Laravel 中为可拖动列实现 AJAX

Question

我在 Laravel 中使用 jQuery Sortable 在表格列上实现了可拖动功能。我现在想要使用 AJAX 更新使用这些列中的数据的数据库。

我正在尝试在线浏览资源，但仍然无法理解如何继续。

以下是我迄今为止实现的代码:

<!-- View(blade template) -->
<table id="sort1">
  <thead>
    <tr>
      @foreach($tasks as $status => $task)
        <td id="{{$status}}"><strong>{{$status}}</strong><br><br>
          <table id="sort" style="table-layout: fixed;width: 180px;">
            <tr>
              <td id="{{$status}}" style="table-layout: fixed; background-color: Cornsilk  ; ">Drop the task here</td>
            </tr>
          </table>
          @foreach($task as $key => $list)
            <table id="sort" style="table-layout: fixed;width: 180px;">
              <tr>
                <td id="" {{$list[ '_id']}} style="table-layout: fixed; background-color: Cornsilk  ; ">
                  Summary:{{$list['summary']}}<br>
                  Milestone ID:{{$list['projectID']}}<br>
                  Assignee:{{$list['assignee']}}<br>
                  Priority:{{$list['priority']}}<br>
                  <label id="{{$list['_id']}}" style="display:none;">{{$list['_id']}}</label>
                </td>
              </tr>
            </table>
          @endforeach
        </td>
      @endforeach
    </tr>
  </thead>
</table>

$(function() {
  $("table #sort").sortable({
    tolerance: "intersect",
    connectWith: "table #sort",
    dropOnEmpty: "true"
  }).disableSelection();
});

$("table #sort").sortable({
  start: function(event, ui) {
    var line = ui.item.closest('td').text();
    var new_status = line.split('\n')[0];
    console.log(new_status);
  }
});

$(function() {
  $("table #sort").sortable({
    receive: function(event, ui) {
      var line = ui.item.closest('td').text();
      var new_status = line.split('\n')[0];
      console.log(new_status);
      var objid = ui.item.find('label').html()
      console.log(objid);
    }
  });
});    

基本上应该发生的是，一旦将给定值从一列拖动到另一列，表标题就会保存为该特定数据的状态。

现在我能够检索两者的表头(原始表头和正在删除数据的表头)以及数据的 id 。我现在需要提供 ID 并使用此 id 保存新状态。

有什么方法可以在 Laravel 中使用 AJAX 来完成此操作吗？任何其他可以帮助我开始的引用资料的基本工作示例就足够了。

Answer 1

我以前没有使用过 jQuery 可排序。但是您可以做的是在监听拖动事件的函数内部，我假设它是:

  $("table #sort").sortable({
    receive: function(event, ui) {
      var line = ui.item.closest('td').text();
      var new_status = line.split('\n')[0];
      console.log(new_status);
      var objid = ui.item.find('label').html()
      console.log(objid);
    }
  });

然后您可以在其中添加 ajax 函数，如下所示:

  $("table #sort").sortable({
        receive: function(event, ui) {
          var line = ui.item.closest('td').text();
          var new_status = line.split('\n')[0];
          console.log(new_status);
          var objid = ui.item.find('label').html()
          console.log(objid);
          $.ajax({
            url: 'new/status', //create a route that points to controller to  save new status
            data: {objid, new_status},
            method: 'post',
            success: function(data){
              alert("success")
            },
            error: function(data){
              alert("fail")
            }
          });
        }
      });