代码之家 › 专栏 › 技术社区 › MVS

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

laravel ajax jquery php javascript

MVS · 技术社区 · 6 年前

我试图通过网上资源,但仍然无法理解如何继续进行同样的。

<!-- 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并使用这个 身份证件

有什么方法可以让我在Laravel中使用AJAX来完成这个任务吗?一个基本的工作实例,任何其他的参考,可以帮助我开始将远远不够。

1 回复 | 直到 6 年前

marc_s 6 年前

我以前没有使用过jquerysortable。但你能做的是在监听拖动事件的函数中,我假设它是:

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