网上查了好几个，终于试出1个可以用的，基本上都是后台可以接收到多个id，但是数据库删除这步就无法删除。
1、效果
（目前是直接删除，下一步准备更新为软删除->删除到回收站，然后回收站再去清空，这样比较安全）
左侧勾选要删除的项目.png
删除提示.png
2、模板
html部分
<div class="layui-card-header">
<button class="layui-btn layui-btn-danger" onclick="datadel()">
<i class="layui-icon"></i>批量删除</button>
<button class="layui-btn" onclick="x_admin_show('添加产品','{:url(\'Customer/add\')}')">
<i class="layui-icon"></i>添加</button></div>
<div class="layui-card-body ">
<table class="layui-table layui-form">
<thead>
<tr>
<th width="2%">
<input type="checkbox" class="all" lay-skin="primary">
</th>
<th width="4%">ID</th>
<th width="8%">所属项目</th>
<th width="10%">姓名/中介</th>
<th width="8%">电话</th>
<th width="5%">状态</th>
<th>跟进记录</th>
<th width="5%">添加人</th>
<th width="8%">创建日期</th>
<th width="6%">最后跟进</th>
<th width="7%">操作</th>
</thead>
<tbody>
{volist name="datas" id="vo"}
<tr>
<td>
<input name="ids" class="ids" type="checkbox" value="{$vo.id}" lay-skin="primary" ></td>
<td>{$vo.id}</td>
<td>{:GetSortTitle($vo.sort)}</td>
<td>{$vo.name}</td>
<td>{$vo.phone}</td>
<td>{if $vo.status==1}咨询{/if}
{if $vo.status==2}约看{/if}
{if $vo.status==3}已带看{/if}
{if $vo.status==4}跟进中{/if}
{if $vo.status==5}复看{/if}
{if $vo.status==6}无效咨询{/if}
{if $vo.status==7}无效客户{/if}
{if $vo.status==8}签别处{/if}
{if $vo.status==9}已签约{/if}
{if $vo.status==10}战败{/if}
</td>
<td>{$vo.content}<br>
</td>
<td>{$vo.createuser}</td>
<td>{$vo.createtime|date="Y-m-d H:i"}</td>
<td>{$vo.updatetime|date="Y-m-d"}</td>
<td class="td-manage">
<a title="添加跟进" onclick="x_admin_show('添加跟进','{:url(\'customer/followUp\')}?id={$vo.id}')" href="javascript:;" type="button" class="layui-btn layui-btn-sm layui-btn-danger">跟进
</a>
<a title="编辑" onclick="x_admin_show('编辑','{:url(\'customer/edit\')}?id={$vo.id}')" href="javascript:;">
<i class="layui-icon"></i>
</a>
<a title="删除" onclick="member_del(this,'{$vo.id}')" href="javascript:;">
<i class="layui-icon"></i>
</a>
</td>
</tr>
{/volist}
</tbody>
</table>
</div>
js部分
<script>layui.use(['laydate', 'form','layer'],
function() {
$ = layui.jquery;//jquery
var laydate = layui.laydate;
layer = layui.layer;//弹出层
//执行一个laydate实例
laydate.render({
elem: '#start' //指定元素
});
//执行一个laydate实例
laydate.render({
elem: '#end' //指定元素
});
});
/*删除*/
function member_del(obj,id){
layer.confirm('确认要删除吗？',function(index){
//发异步删除数据
$.get('{:url(\'del\')}','id='+id,function (data) {
if (data.res ==1){
$(obj).parents("tr").remove();
layer.msg('已删除!',{icon:1,time:1000});
}
})
});
}
function datadel(){
$ids = $("input[name='ids']:checked");
var checkID=[];
$("input[name='ids']:checked").each(function(i){
checkID[i] = $(this).val();
});
//判断数组是否为空。空的话禁止点击
if(checkID.length == 0){
return;
}
// console.log(checkID);
layer.confirm('确认要删除吗？',function(index){
// $ids = $(".ids");
$.ajax({
type: 'POST',
url:"{:url('delAll')}",
data:{checkID:checkID},
dataType: 'json',
success: function(data){
// alert(data);
// $(obj).parents("tr").remove();
$ids.each(function(i){
$(this).parents("tr").remove();
// console.log($(this).parents("tr"));
});
layer.msg('数据已删除!',{icon:1,time:1000});
},
error:function(data) {
// console.log(data.msg);
},
});
});
}
</script>
3、后台方法
（1）引入db类
use think\Db;
（2）方法
public function delAll()
{
$data = $_POST['checkID'];
$DB = new Db;
$res=$DB::table("customer")->delete($data);
if($res){
return['res'=>1,'msg'=>'删除客户成功！'];
}
}
4、模板中重要的几点
（1）单选框属性值要插入id值，name class属性均要填写，后面jq部分要使用
<input name="ids" class="ids" type="checkbox" value="{$vo.id}" lay-skin="primary" ></td>
（2）按钮点击事件
<button class="layui-btn layui-btn-danger" onclick="datadel()"><i class="layui-icon"></i>批量删除</button>
（3）jquery如何把选中的id提交到后台
$("input[name='ids']:checked").each(function(i){
checkID[i] = $(this).val();
});
（4）删除后不刷新页面显示删除效果，操作DOM元素
$ids.each(function(i){
$(this).parents("tr").remove();
// console.log($(this).parents("tr"));
});
（5）tp5.1批量删除的语法,data是一个数组。
$res=$DB::table("goods")->delete($data);
5、Layui操作成功后返回父级并且刷新
window.parent.location.reload();
网友评论