2021-4-14 工作记录--LayUI-全代码(批量删除+下载模板+导入表格+删除 等)

<!--css-->
<style>
    * {
        -webkit-overflow-scrolling: touch;
    }
    .wx_add_widthBox {
        width: 150px;
        margin-left: 4px;
        display: inline-block;
    }
    @media screen and (max-width: 1750px) {
        .wx_add_widthBox {
            width: 130px;
        }
    }

    @media screen and (max-width: 1580px) {
        .wx_add_widthBox {
            width: 110px;
        }
    }
    /*000*/

    @media screen and (max-width: 1200px) {
        .wx_add_widthBox {
            width: 100%;
        }
        .wx_seach {
            margin-left: 0.3em;
        }
    }

    @media screen and (max-width: 1000px) and (min-width: 300px) {
        .addleft {
            margin-left: 0.3rem;
        }
        .searchBtn {
            margin-left: 0.3rem;
            padding: 0;
            width: 1rem;
            height: 0.5rem;
            line-height: 0.5rem;
            margin-top: 0.1rem;
            border-radius: 1rem;
        }
        .layui-table-cell {
            min-width: 3rem;
            padding: 0 5px;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
            word-break: break-all;
        }
        .layui-table-cell,
        .layui-table-tool-panel li {
            white-space: pre-wrap;
        }
        .layui-btn-container .layui-btn {
            margin-left: 0.1rem;
            margin-bottom: 0;
        }
        .layui-table-view {
            height: 11rem;
        }
        .layui-table-page {
            height: 1.1rem;
            overflow: auto;
            padding: 0.3rem 0 0;
        }
        .wx_add_widthBox {
            margin-left: 0.1rem;
        }
    }
    .allDel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(.5, .5, .5, .5);
        display: none;
    }
    .allDel .promo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        border-radius: 6px;
        overflow: hidden;
    }
    .allDel .promo h3 {
        background: #c80000;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: white;
        padding: 5px 0;
        letter-spacing: 2px;
        position: relative;
    }
    .allDel .promo h3 i {
        font-size: 15px;
        /*float: right;*/
        position: absolute;
        top: 50%;
        right: 2%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .allDel .promo .fww {
        padding: 30px;
    }
    .allDel .promo .fww .layui-form-item label {
        font-size: 18px;
    }

    .allDel .promo .fww .layui-form-item textarea {
        width: 100%;
        height: 200px;
        margin-top: 10px;
        font-size: 16px;
    }

    .allDel .promo .fww .layui-input-block {
        margin-left: 0;
        width: 420px;
    }

    .allDel .promo .fww .btn button {
        width: 100%;
        border: none;
        text-decoration: none;
        outline: none;
        background: #c80000;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        height: 40px;
        line-height: 40px;
        color: white;
        border-radius: 5px;
        cursor: pointer;
    }

    .allDel .promo .fww p {
        font-size: 18px;
        color: red;
        text-align: center;
        margin-top: 10px;
    }
    .demoTable {
        margin: 20px 0 5px 0;
    }
    .layui-btn-container {
        margin: 10px 0 0 4px;
    }
    .layui-form-select dl {
        max-height: 157px;
    }
    .excle{
        border-collapse: collapse;
    }
    .excle th{
        width: 120px;
        background-color: #f2f2f2;
        height: 36px;
        text-align: center;
        font-size: 12px;
    }
    .excle tbody tr{
        border-top: #f2f2f2  solid 1px;
    }
    .excle td{
        width: 90px;
        height: 36px;
        text-align: center;
        font-size: 12px;
    }
    .content {
        width: 250px;
    }
</style>

<!--HTML-->
<div class="z wx_content">

    <!--第一行内容-->
    <div class="demoTable">
        <div class="layui-inline">
            <form class="layui-form">
                <!--校区选择-PHP渲染-->
                <div class="layui-input-block wx_add_widthBox">
                    <select name="school" lay-filter="aihao">
                        <option value="all">校区选择</option>
                        {volist name='$school' id='v'}
                        <option value="{$v.id}">{$v.title}</option>
                        {/volist}
                    </select>
                </div>
            </form>
        </div>
        <div class="layui-inline wx_add_widthBox content">
            <input class="layui-input" name="title" id="demoReload" autocomplete="off" placeholder="输入客户姓名|客户电话|邀约人|邀约电话">
        </div>
        <div class="layui-inline wx_add_widthBox">
            <input type="text" name="starttime" id="date1" lay-verify="date" placeholder="开始时间" autocomplete="off" class="layui-input" lay-key="1">
        </div>
        <div class="layui-inline wx_add_widthBox">
            <input type="text" name="endtime" id="date2" lay-verify="date" placeholder="结束时间" autocomplete="off" class="layui-input" lay-key="2">
        </div>
        <button class="layui-btn wx_seach addleft searchBtn" id="reload" data-type="reload">搜索</button>
    </div>

    <!--表格-->
    <table id="demo" lay-filter="test"></table>

</div>


<!--引入jquery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--引入layui-->
{include file="system@block/layui" /}


<!--头工具栏内容-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchdel" data-type="getCheckData"><i class="layui-icon layui-icon-delete" style="font-size:20px;"></i> 批量删除</button>
        <button class="layui-btn layui-btn-sm downExcel"><a href="https://swt-app.oss-cn-chengdu.aliyuncs.com/excle/daofang.xlsx" target="_blank" style="color: #fff">下载模板</a></button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>导入表格
        </button>
    </div>
</script>

<!--操作里的内容-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    let table, test, arr = []
    layui.use(['form', 'laydate'], function() {
        var laydate = layui.laydate;
        var form = layui.form
        laydate.render({
            elem: '#date1' // 对应开始时间的id
        });
        laydate.render({
            elem: '#date2' // 对应结束时间的id
        });
        form.on("select", function(data) {
            if (data.elem.name == 'school') { // 对应前面校区选择-select-name
                console.log(data)
            }
        });
    })

    layui.use('table',function() {
        table = layui.table;
        table.render({
            elem: '#demo', // 对应前面table的id
            id: 'testReload',
            limit:20, // 每页显示的条数（默认：10）
            page:true, // 开启分页
            toolbar:"#toolbarDemo",
            url: "{:url('')}", // 数据接口
            cols: [[ //表头
                    {
                        type: 'checkbox' // 复选框列
                    }, {
                        field: 'id',
                        title: 'ID',
                        align: 'center',
                    },  {
                        field: 'schoolname',
                        title: '校区',
                        align: 'center',
                    },  {
                        field: 'create_time',
                        title: '时间',
                        align: 'center',
                        // layui-时间戳转换成日期
                        // templet: function (d) {
                        //     return util.toDateString(d.time * 1000, "yyyy-MM-dd")
                        // }
                    }, {
                        field: 'name',
                        title: '客户姓名',
                        align: 'center',
                    }, {
                        field: 'children',
                        title: '学员名称',
                        align: 'center',
                    }, {
                        field: 'phone',
                        title: '客户电话',
                        align: 'center',
                    }, {
                        field: 'type',
                        title: '邀约类型',
                        align: 'center',
                    }, {
                        field: 'real_name',
                        title: '邀约人',
                        align: 'center',
                    }, {
                        field: 'code',
                        title: '邀约人编号',
                        align: 'center',
                    }, {
                    field: 'admin',
                    title: '导入人',
                    align: 'center',
                    }, {
                    field: 'input_time',
                    title: '导入时间',
                    align: 'center',
                    }, {
                    field: 'active',
                    title: '操作',
                    align: 'center',
                    templet: '#barDemo',
                }
            ]],
        })

        // 全选复选框：获取选中的信息
        table.on('checkbox(test)', function() { // test是table对应的lay-filter
            arr = table.checkStatus('testReload').data
        });

        // 头工具栏事件
        // 批量删除
        table.on('toolbar(test)', function(obj){ //注：toolbar 是头工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'batchdel':
                    checkData = checkStatus.data;
                    delList=[];
                    for (var i = 0; i < checkData.length; i++) {
                        delList.push(checkData[i].id);
                    }
                    if(delList == ''){
                        layer.alert('请选择删除项');return;
                    }
                    layer.confirm('确定批量删除吗？', function(index){
                        layer.close(index);
                        $.ajax({
                            type:'post',
                            dataType:'json',
                            url:"{:url('getAarrivevisitDel')}",
                            data:{id:delList.join(',')}, // delList.join(',') 表示将delList这个数组转换成字符串，中间以逗号分隔
                            success:function (res) {
                                if (res.sta === 2000) {
                                    layer.msg(res.msg,{icon:1})
                                } else {
                                    layer.msg(res.msg,{icon:2});
                                }
                            }
                        });
                    });
                break;
            }
        });

        //工具条事件
        // 删除
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    $.ajax ({
                        type: 'post'
                        ,url: "{:url('getAarrivevisitDel')}"
                        ,data: {id:data.id}
                        ,success:function (res) {
                            var res = JSON.parse(res);
                            if(res.sta === 2000) {
                                layer.msg(res.msg,{icon:1},function() {
                                // 向服务端发送删除指令
                                $(tr).remove();
                                }); // 弹出框
                                // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            } else {
                                layer.msg(res.msg,{icon:2});
                            }
                        }
                        ,error:function (err) {
                            layer.msg('网络超时');
                        }
                    })
                });
            }
        });

        // 导入表格【注意该段代码所放的位置，不然会没有效果哟】
        function importTable() {
        	layui.use('upload', function(){
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: "{:url('ImportExcel')}" //上传接口
                ,accept:'file'
                ,auto:false
                ,acceptMime:'xlsx/*'
                ,choose:function (obj) {
                    obj.preview(function(index, file, result){
                        if (file.name.substring(file.name.length-4) != 'xlsx' && file.name.substring(file.name.length-3) != 'xls'){
                            layer.msg('请选择正确的xls或xlsx文件格式')
                        }else{
                            obj.upload(index, file)
                        }
                    });
                }
                ,done: function(res){
                    if(res) {
						if(res.sta === 2000 && res.data.length !== 0){
                        let str =''
                        let s = '<table class="excle"><thead><tr><th>校区</th><th>时间</th><th>客户姓名</th><th>学员名称</th><th>客户电话</th><th>邀约类型</th><th>邀约人</th><th>邀约人编号</th></tr></thead><tbody>'
                        let e = '</tbody></table>'
                        res.data.forEach(function(value){
                            str += `<tr><td>${value.school}</td><td>${value.time}</td><td>${value.name}</td><td>${value.children}</td><td>${value.phone}</td><td>${value.type}</td><td>${value.real_name}</td><td>${value.code}</td></tr>`
                        })
                        let tb = s + str + e
                        //页面层
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['960px', '300px'], //宽高
                            content: tb
                        });
                    	} else {
                        	layer.msg(res.msg)
                    	}
					} else { 
						layer.msg('表格异常，请重新加载');
					}
                }
                ,error: function(res){
                    //请求异常回调
                    layer.msg('表格异常，请重新加载');
                }
            });
        });
       }
       importTable();
        
    })

    // 搜索重载1
    let $ = layui.$,
        active = {
            reload: function(obj) {
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: obj
                }, 'data');
            }
        }

    // 搜索重载2
    $('#reload').on('click', function() { // reload对应上面搜索的id
        var school_id = $('select[name=school]').val(); // 校区选择
        var title = $('input[name=title]').val() // 输入姓名|电话|考核标题
        var starttime = $('input[name=starttime]').val() // 开始时间
        var endtime = $('input[name=endtime]').val() // 结束时间
        let obj = {
            school_id,title,starttime,endtime
        }
        active.reload(obj)
    });

</script>