1. 程式人生 > >Ajax複選框多選刪除的實現

Ajax複選框多選刪除的實現

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('系統故障');
                        }
   
                    }
            });

        });
        
    })