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>


  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现 layui 表格导入和导出 Excel 的后端代码可以参考以下示例: 导出 Excel: ```php <?php //连接数据库 $conn = mysqli_connect("localhost","root","","test"); //查询数据 $sql = "SELECT * FROM users"; $result = mysqli_query($conn, $sql); //引入PHPExcel库 require_once './PHPExcel/PHPExcel.php'; //创建PHPExcel对象 $objPHPExcel = new PHPExcel(); //设置表头 $objPHPExcel->setActiveSheetIndex(0)->setCellValue('A1', 'ID'); $objPHPExcel->setActiveSheetIndex(0)->setCellValue('B1', '姓名'); $objPHPExcel->setActiveSheetIndex(0)->setCellValue('C1', '年龄'); $objPHPExcel->setActiveSheetIndex(0)->setCellValue('D1', '性别'); //循环输出数据 $i = 2; while ($row = mysqli_fetch_array($result)) { $objPHPExcel->setActiveSheetIndex(0)->setCellValue('A' . $i, $row['id']); $objPHPExcel->setActiveSheetIndex(0)->setCellValue('B' . $i, $row['name']); $objPHPExcel->setActiveSheetIndex(0)->setCellValue('C' . $i, $row['age']); $objPHPExcel->setActiveSheetIndex(0)->setCellValue('D' . $i, $row['sex']); $i++; } //设置文件名和下载方式 $filename = '用户信息.xlsx'; header('Content-Type: application/vnd.ms-excel'); header('Content-Disposition: attachment;filename="' . $filename . '"'); header('Cache-Control: max-age=0'); //输出Excel文件 $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007'); $objWriter->save('php://output'); //关闭连接 mysqli_close($conn); ?> ``` 导入 Excel: ```php <?php //连接数据库 $conn = mysqli_connect("localhost","root","","test"); //引入PHPExcel库 require_once './PHPExcel/PHPExcel.php'; //获取上传的Excel文件 $file = $_FILES['file']['tmp_name']; //创建PHPExcel对象 $objReader = PHPExcel_IOFactory::createReader('Excel2007'); $objPHPExcel = $objReader->load($file); //获取当前工作表 $sheet = $objPHPExcel->getSheet(0); //获取最大行数和列数 $highestRow = $sheet->getHighestRow(); $highestColumn = $sheet->getHighestColumn(); //循环读取数据 for ($i = 2; $i <= $highestRow; $i++) { $rowData = $sheet->rangeToArray('A' . $i . ':' . $highestColumn . $i, NULL, TRUE, FALSE); //插入数据到数据库 $sql = "INSERT INTO users (name, age, sex) VALUES ( '" . $rowData[0][1] . "', '" . $rowData[0][2] . "', '" . $rowData[0][3] . "' )"; mysqli_query($conn, $sql); } //关闭连接 mysqli_close($conn); //跳转到列表页面 header("Location: list.php"); ?> ``` 注意:上述代码中,需根据实际情况修改数据库连接信息、Excel 文件路径和表格列名等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小呀小萝卜儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值