1. 程式人生 > >js 通過全選操作來進行批量刪除與批量修改

js 通過全選操作來進行批量刪除與批量修改

效果圖

1.先說js進行全選: 

//展示這麼多,其實只需要看標紅部分就行

<form  name="action" class="form-horizontal" role="form"  method="post" enctype="multipart/form-data" action="batch">
<div class="widget-body">
    <!--新增連結開始-->
    <button type="button"  class="btn btn-sm btn-azure btn-addon" onClick="javascript:window.location.href = '{:url('addlink')}'"> <i class="fa fa-plus"></i> 新增連結</button>
    <!--新增連結結束-->
    <!--資料進行顯示-->
        <table class="table table-bordered table-hover" >
            <thead>
            <tr>
                <th style="width: 10px">
                    <label>
                    <input class="checkboxes" value="chkall" type="checkbox"   name="chkall" id="selectAll" >
<span class="text"></span> </label> </th> <th class="text-center" >連結名稱</th> <th class="text-center">所屬位置</th> </tr> </thead> <tbody id="content"> {volist name="Link" id="lisres"} <tr > <!--顯示位置--> <td> <label> //這個很重要
<input class="checkboxes" value="{$lisres.id}" type="checkbox" name="checkbox[]" > <span class="text"></span> </label> </td> <td class="text-center">{$lisres.nav_name}</td> <td class="text-center">{$lisres.nav_type}</td> </tr> {/volist} </tbody> </table> <!--批量移動刪除操作--> <div class="action"> <select class="btn-group" style="margin:10px;width: 150px"
name="action" onchange="douAction()"> <option value="0">請選擇...</option> <option value="del_all">刪除</option> <option value="category_move">移動至</option> </select> <select name="new_cat_id" class="btn-group" style="margin:10px;width: 150px ;display: none" > <option value="0">未分類</option> <option value="mainnav">主導航欄</option> <option value="top">頂部</option> <option value="bottom">底部</option> </select> <button class="btn shiny " type="submit" style="margin:10px">執行</button> </div> </form>

//關鍵程式碼已經標出

<!--全選操作-->
<script type="text/javascript">
    $(function(){
        $("#selectAll").bind("click",function(){
            if($(this).prop("checked")){
                $("input[type='checkbox']").not(this).prop("checked",true);
            }else{
                $("input[type='checkbox']").not(this).prop("checked",false);
            }
        });
    });
</script>

//刪除還是移動?

<!--批量操作-->
<script type="text/javascript">
    onload = function()
    {
        document.forms['action'].reset();
    }
    function douAction(){
        var frm = document.forms['action'];
        frm.elements['new_cat_id'].style.display = frm.elements['action'].value == 'category_move' ? '' : 'none';
    }

</script>

 

//控制器進行操作

public  function batch(){
   $data=input('post.');
   if($data['action']=='del_all'){
      //通過id吧文章找出來
      $ids=implode(',',$data['checkbox']);
      if($data!='null'){
         if(db('link')->delete($ids)){
            $this->success('刪除文章成功','lis');
         }else{
            $this->error('刪除文章失敗','lis');

         }
      }else{
         $this->error('未選中任何資料');

      }

   }else{
      foreach($data['checkbox'] as $key=>$value){
         $Art=db('link')->where("id"==$value)->select();
         foreach($Art as $k=>$v){
            $Article=new \app\admin\model\Link();
            $res=$Article->update(['id'=>$value,'nav_type'=>$data['new_cat_id']]);
         }

      }if($res){
         $this->success('轉移成功','lis');
      }else{
         $this->error('轉移失敗','lis');

      }


   }
}

 

 

//噗,好吧,我覺得只有我自己看的懂了,不過問題也不大,畢竟自己的筆記嘛,以後多許多看吧