问题同样困扰好久，前几天是CSRF认证问题，今天遇到了批量删除选择选中元素的问题，网上查找了好多代码，可算是把这个业务逻辑实现了，鼓掌，接下来听听我的解决方案吧，主要就是LayUI中的from组件的checkbox监听事件，接下来看debug过程吧！
路由设置
Laravel比较人性化的原因之一就是路由自定义化程度高，可以说开发是这个流程：
路由设置->前台数据获取请求后台->后台控制器获取参数响应并回馈前台
这里我是用的是JSON传值，还是比较人性化的。
代码语言：javascript复制//图片批量删除
Route::post('pic/delAll', 'PicController@delAll');前台界面设计
代码语言：javascript复制<!-- 批量删除按钮及响应事件 -->
<button class="layui-btn layui-btn-danger" onclick="delAll()">
<i class="layui-icon layui-icon-delete"></i>批量删除
</button>
<!-- 表格设计 -->
<table class="layui-table">
<thead>
<tr>
<th>
<div class="layui-form">
<input type="checkbox" name="check_all" id="" lay-skin="primary" />
</div> </th>
<th>ID</th>
<th>标题</th>
<th>缩略图</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($data as $value)
<tr>
<td>
<div class="layui-form">
<input type="checkbox" value="{{ $value->id }}" lay-skin="primary" lay-filter="RandomCheckbox" />
</div> </td>
<td>{{ $value->id }}</td>
<td>{{ $value->title }}</td>
<td> <img class="layui-nav-img" src="{{ url($value->img) }}" alt="{{ $value->title }}" /></td>
<td> <button class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius"> <i class="layui-icon layui-icon-edit"></i> </button> <button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius" href="javascript:;" onclick="del(this, {{ $value->id }});"> <i class="layui-icon layui-icon-delete"></i> </button> </td>
</tr>@endforeach
</tbody>
</table>核心代码：
代码语言：javascript复制<div class="layui-form">
<input type="checkbox" value="{{ $value->id }}" lay-skin="primary" lay-filter="RandomCheckbox" />
</div>前台JS代码设计
代码语言：javascript复制<script>
/**
* 网页作用域变量定义区
*/
var arr=[]; //存储checkbox选中数值
/**
* layui组件初始化
*/
layui.use(['element', 'form'], function () {
form = layui.form;
//checkbox监听响应并且存储到数组中
form.on('checkbox(RandomCheckbox)', function(data){
//判断数值是否存在
var index = arr.indexOf(data.value);
if(index>=0){
//已经存在改元素，按照重复点取消数值原则，
// 删除操作，并且获取要删除元素对应数组的下标
var subscript = subScript(arr, data.value);
//删除对应下标元素 splice函数
arr.splice(subscript, 1);
}else{
arr.push(data.value);
}
});
});
/**
* 获取数组对应元素下标方法
* @param arr
* @param data
* @returns {number|*}
*/
function subScript(arr, data){
//获取数组长度
var i = arr.length;
//遍历判断数组对应元素并返回下标
while(i--){
if(arr[i] === data){
return i;
}
}
return -1;
}
/**
* 批量删除方法
*/
function delAll(){
//判断数组中是否有元素存在
var long = arr.length;
if(long == 0){
layer.msg("你还没有选择要删除的行，请选择");
return;
}
layer.confirm('确定要删除么？', {
btn: ['确定','取消']
}, function() {
//将数组转换为字符串
//注意：arr定义为此页面作用域变量
str = arr.join(',');
//传输给后台数据 ajax请求
$.post(
//请求地址
'/adminhttps://img.yuanmabao.com/zijie/pic/delAll',
//数据类型 请求方式 及 CSRF认证
{'str':str, '_method':'post', '_token':'{{ csrf_token() }}'},
//回调处理结果并显示界面
function(res){
//如果大于0，则表示成功
if(res.code>0){
layer.alert(res.msg,{icon:2})
}else{
layer.msg(res.msg);
setTimeout(function(){window.location.reload();}, 1000)
}
},
'json'
);
});
}
</script>这个代码的业务逻辑是：
- 首先定义页面作用域数组arr进行接收选择事件；
- 获取页面点击checkbox事件所传递的值，并进行判断是否取消其选择或者再次选中，（选中第一次进行push压栈一下数组，选择第二次就要判断数组中是否存在，若存在则获取元素对应下标并且做出splice删除操作，以此类推）；
- 点击按钮时，将数组转换为string字符串类型之后采用Ajax的方式传至后台控制器；
- 后台控制器进行操作返回状态值；
- 前台获取状态值进行反馈用户，此业务逻辑完成。
Controller后台控制器
在这里可以注意到的是Laravel可以直接删除字符串形式的元素，使用了in($str)的方式。
代码语言：javascript复制/**
* 批量删除
* @param Request $request
*/
public function delALL(Request $request){
$id = $request->input('str');
$sql = DB::update("update pic set status=1 where id in($id)");
if($sql){
exit(json_encode(array('code'=>0, 'msg'=>'删除成功')));
}else{
exit(json_encode(array('code'=>1, 'msg'=>'删除出现异常')));
}
}好了，以上就是我解决的这个问题的方式，有疑问评论区问我即可。
本文链接：https://cloud.tencent.com/developer/article/1558263
本文采用CC BY-NC-SA 3.0 Unported协议进行许可，转载请保留此文章链接
