這篇文章主要介紹了jQuery+ajax實現批量刪除功能,結合完整實例形式分析了jQuery+ajax結合bootstrap與layer.js插件實現的批量刪除與交互功能相關操作技巧,需要的朋友可以參考下
完整代碼如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Ding Jianlong Html</title> <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link href="https://cdn.bootcss.com/layer/2.4/skin/layer.min.css" rel="external nofollow" rel="stylesheet"> </head> <body> <div class="container"> <button class="btn btn-danger radius" onClick="batch_del()" style='margin:10px;'>批量刪除</button> <table style="width: 500px;" class="table table-striped table-hover table-bordered"> <thead> <tr> <th scope='col' width="25"><input type="checkbox" value="" name="selectall"></th> <th scope='col' width="80">ID</th> <th scope='col' >標題</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" value="10001"></td> <td>10001</td> <td >標題1</td> </tr> <tr> <td><input type="checkbox" value="10002"></td> <td>10002</td> <td >標題2</td> </tr> <tr> <td><input type="checkbox" value="10003"></td> <td>10003</td> <td >標題3</td> </tr> <tr> <td><input type="checkbox" value="10004"></td> <td>10004</td> <td >標題4</td> </tr> <tr> <td><input type="checkbox" value="10005"></td> <td>10005</td> <td >標題5</td> </tr> </tbody> </table> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/layer/2.4/layer.min.js"></script> <script> /*批量選中的效果*/ $('input:checkbox[name="selectall"]').click(function(){ if($(this).is(':checked')){ $('input:checkbox').each(function(){ $(this).prop("checked",true); }); }else{ $('input:checkbox').each(function(){ $(this).prop("checked",false); }); } }); /*獲取ids,批量刪除*/ function batch_del() { var ids = ''; $('input:checkbox').each(function(){ if(this.checked == true){ ids += this.value + ','; } }); //layer.alert(ids);return; //下面的ajax根據自己的情況寫 layer.confirm('批量刪除后不可恢復，謹慎操作！', {icon: 7, title: '警告'}, function (index) { $.ajax({ type: 'POST', url: '你的url地址?ids=' + ids, data: {"1": "1"}, dataType: 'json', success: function (data) { if (data.code == 200) { $(obj).parents("tr").remove(); layer.msg(data.message, {icon: 1, time: 1000}); } else { layer.msg(data.message, {icon: 2, time: 3000}); } }, error: function (data) { console.log(data.msg); }, }); }); } </script> </body> </html>
轉載 ：https://www.jb51.net/article/162628.htm
-------------------------------------------------------------------自己項目------------------------------------------------------------------------------------------------------------------
<include file="public@header" /> </head> <body> <div class="wrap js-check-wrap"> <ul class="nav nav-tabs"> <li class="active"><a href="{:url('order/index')}">訂單列表</a></li> <li><a href="{:url('order/add')}">訂單添加</a></li> </ul> <form class=" well form-inline margin-top-20" method="get" action="{:url('order/index')}"> 接龍名稱: <input type="text" class="form-control" name="name" style="width: 250px;" value="{$name}" placeholder="請輸入接龍名稱/超市名稱"> <input type="submit" class="btn btn-primary" value="搜索" /> <a class="btn btn-danger" href="{:url('order/index')}">清空</a> <a class="btn btn-info" href="{:url('order/order_list')}">訂單歷史記錄</a> </form> <button class="btn btn-danger radius" onClick="batch_del()" style='margin:10px;'>批量刪除</button> <table class="table table-hover table-bordered"> <thead> <tr> <th width="60"> <input type="checkbox" value="" name="selectall"> </th> <th width="60">id</th> <th width="60">接龍名稱</th> <th width="60">超市名稱</th> <th width="60">產品名稱</th> <!--<th width="60">用戶名</th>--> <th width="60">數量</th> <th width="60">添加時間</th> <th width="60">操作</th> </tr> </thead> <tbody> <foreach name="data" item="vo"> <tr> <td> <input type="checkbox" value="{$vo['id']}" name="ids[]"> </td> <td>{$vo.id}</td> <td>{$vo.jl_name} </td> <td> {$vo.jl_market_name} </td> <td> {$vo.jl_product_name}</td> <!--<td> {$vo.jl_user_name}</td>--> <td> {$vo.jl_order_num}</td> <td> {$vo.create_time}</td> <td> <!--<a class="btn btn-xs btn-primary" href="{:url('order/edit',array('id'=>$vo["id"]))}">編輯</a>--> <a class="btn btn-xs btn-danger js-ajax-delete" href="{:url('order/delete',array('id'=>$vo["id"]))}">刪除</a> </td> </tr> </foreach> </tbody> </table> <div class="pagination">{$page}</div> <table class="table table-hover table-bordered"> <thead> <tr> <th width="60">當日產品名稱</th> <th width="60">當日產品總數量</th> <th width="60"></th> </tr> </thead> <tbody> <foreach name="arr" item="arrvo"> <tr> <td> {$arrvo.jl_product_name} </td> <td> {$arrvo.num}</td> <td> </td> </tr> </foreach> </tbody> </table> </div> <script src="/static/js/admin.js"></script> <script src="/static/layer/layer.js"></script> <script> /*批量選中的效果*/ $('input:checkbox[name="selectall"]').click(function(){ if($(this).is(':checked')){ $('input:checkbox').each(function(){ $(this).prop("checked",true); }); }else{ $('input:checkbox').each(function(){ $(this).prop("checked",false); }); } }); /*獲取ids,批量刪除*/ function batch_del() { var ids = ''; $('input:checkbox').each(function(){ if(this.checked == true){ ids += this.value + ','; } }); if(ids == ''){ layer.alert('請選擇刪除項');return; } // layer.alert(ids);return; // str="2,2,3,5,6,6"; //這是一字符串 // var strs= new Array(); //定義一數組 // strs=str.split(","); //字符分割 var strs_ids= new Array(); var str_1 = ids.replace(/\s*/g,"");//去掉空格-字符串 var str_2 = str_1.replace(/^,+/,"").replace(/,+$/,""); //去掉首尾逗號 //console.log(str_2);return; strs=str_2.split(","); for (i=0;i<strs.length ;i++ ) { //分割后的字符輸出 strs_ids.push(strs[i]); } // return; //下面的ajax根據自己的情況寫 layer.confirm('批量刪除后不可恢復，謹慎操作！', {icon: 7, title: '警告'}, function (index) { $.ajax({ type: 'post', url: "{:url('order/delete_pl')}", data: {ids:strs_ids}, dataType: 'json', success: function (data) { //console.log(data); if (data.code == 200) { // $(obj).parents("tr").remove(); layer.msg(data.message, {icon: 1, time: 1000},function () { window.location.reload(); }); } else { layer.msg(data.message, {icon: 2, time: 3000},function () { window.location.reload(); }); } }, error: function (data) { console.log(data.msg,function () { window.location.reload(); }); }, }); }); } </script> </body> </html> </body> </html>
后台接受參數
public function delete_pl() { if(request()->isPost()){ $ids = input('post.'); // dump($ids['ids']); foreach ($ids['ids'] as $k => $v){ // dump($v); $this->delete_all($v); } return json(['code'=>200,'message'=>'刪除成功']); } } public function delete_all($id='') { $navModel = new OrderModel(); $intId =$id; if (empty($intId)) { $this->error(lang("NO_ID")); } //dump($intId);die; $delivery_order_detail_info = DB::name("delivery_order_detail")->where("id", $intId)->find(); $product_num = $delivery_order_detail_info['product_num']; $product_price = $delivery_order_detail_info['product_price']; $change_price = $product_num * $product_price; // // score 字段減 5 // Db::table('think_user')->where('id', 1)->setDec('score', 5); $delivery_order_info =DB::name("delivery_order") ->where("id", $delivery_order_detail_info['delivery_order_id'])->find(); $product_sum_num = $delivery_order_info['product_sum_num'] - $product_num; //刪除后的總數量 $product_sum_price = $delivery_order_info['product_sum_price'] - $change_price; //刪除后的總價格 // // DB::name("delivery_order") // ->where("id", $delivery_order_detail_info['delivery_order_id']) // ->update(['product_sum_num'=>$product_sum_num,'product_sum_price'=>$product_sum_price]); DB::name("delivery_order") ->where("id", $delivery_order_detail_info['delivery_order_id']) ->delete(); DB::name("delivery_order_detail")->where("order_id", $intId)->delete(); $navModel->where("id", $intId)->delete(); // $this->success(lang("DELETE_SUCCESS"), url("order/index")); }