js 通過全選操作來進行批量刪除與批量修改
阿新 • • 發佈:2018-11-12
效果圖
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'); } } }
//噗,好吧,我覺得只有我自己看的懂了,不過問題也不大,畢竟自己的筆記嘛,以後多許多看吧