批量删除一般都会使用复选框,我们先来实现复选框的 全选和反选
- 按钮
<button class="layui-btn layui-btn-xs" id="selectAll">全选</button>
<button class="layui-btn layui-btn-xs" id="selectReserve">反选</button>
- 复选框 (value 为tp5循环的 id)
<input lay-skin="primary" class="getid" name="checkBoxGroup" type="checkbox" value="{$vo.id}">
- jquery实现选中渲染 (依赖layui的 form 模块)
layui.use(['form'],
function() {
var form = layui.form;
$ = layui.jquery;
//全选
$("#selectAll").click(function() {
$(":checkbox[name='checkBoxGroup']").each(function() {
$(this).prop("checked", true);
form.render('checkbox');
});
});
//反选
$("#selectReserve").click(function() {
$(":checkbox[name='checkBoxGroup']").each(function() {
$(this).prop("checked", !$(this).prop("checked"));
form.render('checkbox');
});
});
});
- 批量删除函数 (将选中的 id 处理为逗号隔开的 字符串 传给后端)
//js删除数组最后一个元素
function truncate(arr) {
return arr.slice(0, -1);
}
/*-批量删除*/
function delAll() {
var str = '';
$(":checkbox[name='checkBoxGroup']:checked").each(function() {
str += $(this).val() + ",";
});
var arr = str.split(',');
arr = truncate(arr); //删除数组最后一个元素
var checkde_count=arr.length;
if (arr.length == 0) {
layer.msg('请至少选择一项');
return false;
}
layer.confirm('确认要删除这 <b style="color:red;">'+checkde_count+'项</b> 吗?' + '( '+str+')',
{btn: ['删除', '取消']},
function(){
$.post("/index.php/index/Admin/admin_all_del",
{data: str},
function(res) {
if (res.code > 0) {
layer.alert(res.msg, {
icon: 2
});
} else {
layer.msg(res.msg);
setTimeout(function() {
window.location.reload();
},
1000);
}
},
'json');
});
}
- tp后端处理
//批量删除
public function admin_all_del(){
//接收参数
$map = input();
$data=$map['data'];
$data=trim($data,',');
$where = 'id in('.$data.')';
$list=Db::name('news')->where($where)->delete();
if($list!==false) {
$this->returnMsg(0, '成功删除'.$list.'项!');
}else{
$this->returnMsg(1, '删除失败');
}
}