2020-06-26 TP5.1+layui(x-admin)批量删除信息

网上查了好几个,终于试出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">&#xe63c;</i>
                                            </a>
                                            <a title="删除" onclick="member_del(this,'{$vo.id}')" href="javascript:;">
                                                <i class="layui-icon">&#xe640;</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();

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354