Ajax复选框多选删除的实现

来源:互联网 发布:matlab周期方波编程 编辑:程序博客网 时间:2024/06/15 08:12

AJAX多选删除的思路是通过控制器从后台删除数据,然后前台的数据是不会刷新的,我们需要用jQuery把前台的数据也删掉。

首先,引用jquery

[html] view plain copy print?
  1. <script src="{{asset('lib/js/jquery-2.0.3.min.js')}}"></script>  

然后,写出一个个的复选框,其中之一是这样
[html] view plain copy print?
  1. ...   
  2. <tr>  
  3.                                 <td><input type="checkbox" name="chk" class="chk" value="{{$c->id}}"></td>  
  4.                                 <td>{{$c->user->name}}</td>  
  5. </tr>  
  6. ...  

接着,写出全选/反选功能和删除按钮
[html] view plain copy print?
  1. <input type="checkbox" name="allcheck" id="all" value="0">  
  2. <input type="submit" class="btn btn-danger" id='deletesome' value="删除选中">  
  3. <input type="hidden" name="delete" id='delete' value=""> //他负责存放勾选的复选框中的VALUE  

最后,我们来写JS,这里是多选删除
[javascript] view plain copy print?
  1. $(function(){  
  2.     $("#deletesome").click(function(){  
  3.   
  4.         $.ajax({  
  5.                 url:"/deletesuggestionsajax",  
  6.                 type:"get",  
  7.                 dataType:"json",  
  8.                 data:"delete="+$(this).next().val(),  
  9.                 success:function(data){  
  10.                     if(data.status == 1){  
  11.                        $(":checked").parent().parent().remove(); //删除所有选中的,用的时候注意删除对象的正确选择  
  12.   
  13.                     }else{  
  14.                         alert('系统故障');  
  15.                     }  
  16.   
  17.                 }  
  18.         });  
  19.   
  20.     });  
  21.       
  22. })  

这里是单个的删除,就是在每条后面跟个删除按钮,那时候用这个

[html] view plain copy print?
  1. $(function(){  
  2.     $(".ajaxdelete").click(function(){  
  3.         // console.log($(this).next().val());  
  4.         var me=this;    //先做个闭包,否则在success里不能用$(this)  
  5.   
  6.         $.ajax({  
  7.                 url:"/deletesuggestionajax",  
  8.                 type:"get",  
  9.                 dataType:"json",  
  10.                 data:"id="+$(this).next().val(),  
  11.                 success:function(data){  
  12.                     if(data.status == 1){  
  13.                         $(me).parent().parent().remove();  //删除当前的这个  
  14.                     }else{  
  15.                         alert('系统故障');  
  16.                     }  
  17.   
  18.                 }  
  19.         });  
  20.   
  21.     });  
  22.       
  23. }) 
原创粉丝点击