tp5 全选/全不选 /删除 /批删

最新推荐文章于 2021-08-05 13:10:46 发布

原创最新推荐文章于 2021-08-05 13:10:46 发布 · 4.6k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何在layui框架中实现表单的全选、全不选和批量删除功能，涉及前端表单操作和layui的JavaScript库应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个表单前端知识是有关于layui的使用所以需要引入layui的js文件

表单代码

<table class="layui-table" lay-skin="line">
    <colgroup>
        <col width="20">
        <col width="100">
        <col width="">
        <col width="110">
        <col width="50">
    </colgroup>
    <thead>
    <tr>
        <th colspan="5">
            <a href="javascript:document.location.reload()" title="刷新"><button class="layui-btn layui-btn-primary layui-btn-small" type="button">刷新</button></a>
            <a href="javascriot:;" class="batchDel" title="删除"><button class="layui-btn layui-btn-primary layui-btn-small" type="button">删除</button></a>
            <a href="javascriot:;" class="delete_completely" title="彻底删除"><button class="layui-btn layui-btn-primary layui-btn-small" type="button">彻底删除</button></a>
            <a href="javascriot:;" class="important" title="标为重要"><button class="layui-btn layui-btn-primary layui-btn-small" type="button">已读</button></a>
            <a href="javascriot:;" class="read" title="标为已读"><button class="layui-btn layui-btn-primary layui-btn-small" type="button">重要</button></a>
        </th>
    </tr>
    <tr>
        <th><input type="checkbox" lay-filter="checkeds" lay-skin="primary"></th>
        <th>发件人</th>
        <th>主题</th>
        <th colspan="2">发件时间</th>
    </tr>
    </thead>
    <tbody>
    {foreach name="arr" item="v"}
    <tr>
        <td class="check-mail">
            <input type="checkbox" class="checkone" value="{$v.m_id}" name="m_id[]" lay-skin="primary">
        </td>
        <td>{$v.sender}</a></td>
        <td><a href="{:url('mail_detail', ['m_id' => $v['m_id']])}">{$v.m_title}</a></td>
        <td>{$v.m_time || date="Y-m-d",###}</td>
        <td class="text-c">
            {if condition='$v.m_state==2'}
            <i class="layui-icon tab" tab-attr="a" style="font-size: 18px;color: #1E9FFF;cursor: pointer;">&#xe658;</i>
            {else}
            <i class="layui-icon tab" tab-attr="b" style="font-size: 18px;color: #ccc;cursor: pointer;">&#xe600;</i>
            {/if}
        </td>
    </tr>
    {/foreach}
    </tbody>
</table>


js代码
layui.use(['form', 'element',], function () {
        var form = layui.form
            ,$=layui.$
            ,layer=layui.layer;
//        全选控制
        form.on('checkbox(checkeds)', function(data){
            if(data.elem.checked){
                $('.checkone').prop('checked',true);
            }else{
                $('.checkone').prop('checked',false);
            }
            form.render('checkbox');
        });
//        删除功能
        $('.batchDel').click(function () {
            layer.confirm('确认要删除吗？', {
                btn: ['确定', '取消'] //按钮
            },function (index){
                var d=$('form').serialize();
                console.log(d);
                return false;
                if(d==''){layer.msg('未选中任何邮件'); return false;}
                $.ajax({
                    url:'{:url("mail/mail_batchDel")}',
                    type:'post',
                    data:d,
                    dataType:"json",
                    success:function(data){
                        if(data.code == 200){
                            $('input:checkbox[name=m_id]:checked').each(function(i){
                                $(this).parents("tr").remove();
                            });
                            layer.msg(data.msg, {icon: 1, time: 1800});
                        }else if(data.code==400){
                            layer.msg(data.msg, {icon: 2, time: 1800});
                        }
                    }
                });
            });
        });

控制器代码
//收件箱删除
public function mail_batchDel()
{
    if ($this->request->isAjax()) {
        $datas = $this->request->post();
        $res = Db::table('inbox')->where('m_id', 'in', $datas['m_id'])->update(['m_state' => 3]);
        if ($res == FALSE) {
            return ['code' => 400, 'msg'  => '删除失败！',];
        }
        $arr = [];
        foreach ($datas['m_id'] as $v) {
            $arr[] = [
                'm_id'    => $v,
                'u_id'    => Session::get('userData.id'),
                'd_state' => 0,
                'd_time'  => time(),
            ];
        }
        Db::table('mail_dustbin')->insertAll($arr);
        return ['code' => 200, 'msg'  => '删除成功！',];
    }
}