Ajax複選框多選刪除的實現
阿新 • • 發佈:2019-02-03
AJAX多選刪除的思路是通過控制器從後臺刪除資料,然後前臺的資料是不會重新整理的,我們需要用JQUERY把前臺的資料也刪掉。
首先,引用JQUERY
<script src="{{asset('lib/js/jquery-2.0.3.min.js')}}"></script>
然後,寫出一個個的複選框,其中之一是這樣
... <tr> <td><input type="checkbox" name="chk" class="chk" value="{{$c->id}}"></td> <td>{{$c->user->name}}</td> </tr> ...
接著,寫出全選/反選功能和刪除按鈕
<input type="checkbox" name="allcheck" id="all" value="0">
<input type="submit" class="btn btn-danger" id='deletesome' value="刪除選中">
<input type="hidden" name="delete" id='delete' value=""> //他負責存放勾選的複選框中的VALUE
最後,我們來寫JS,這裡是多選刪除
$(function(){ $("#deletesome").click(function(){ $.ajax({ url:"/deletesuggestionsajax", type:"get", dataType:"json", data:"delete="+$(this).next().val(), success:function(data){ if(data.status == 1){ $(":checked").parent().parent().remove(); //刪除所有選中的,用的時候注意刪除物件的正確選擇 }else{ alert('系統故障'); } } }); }); })
這裡是單個的刪除,就是在每條後面跟個刪除按鈕,那時候用這個
$(function(){ $(".ajaxdelete").click(function(){ // console.log($(this).next().val()); var me=this; //先做個閉包,否則在success裡不能用$(this) $.ajax({ url:"/deletesuggestionajax", type:"get", dataType:"json", data:"id="+$(this).next().val(), success:function(data){ if(data.status == 1){ $(me).parent().parent().remove(); //刪除當前的這個 }else{ alert('系統故障'); } } }); }); })