【layui】table 表格数据导入

Minions_Fatman

已于 2024-01-04 14:33:20 修改

阅读量451

点赞数

分类专栏： layui 文章标签： layui javascript ecmascript

于 2023-11-13 11:41:22 首次发布

本文链接：https://blog.csdn.net/Minions_Fatman/article/details/134373907

版权

layui 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1、弹窗-数据导入

admin.popup({
   	title: "数据导入",
    area: admin.screen() < 2 ? ['95%', '90%'] : ["500px", "220px"],
    id: "LAY-popup-import",
    success: function (layero, index) {
        view(this.id).render('/member/add_import').done(function () {
            form.render(null, 'add_import'); // 弹窗的lay-filter值
            // 监听提交*****文件上传
            upload.render({
                elem: '#LAY_avatarUpload'
                , url: layui.setter.baseUrl + 'admin/member/member_import'
                , multiple: true
                , accept: 'file' //允许上传的文件类型
                , acceptMime: '.xlsx,.csv'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#ht_file').val(file.name);
                    });
                }
                , done: function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                            layer.close(index); //执行关闭
                            table.reload('list'); //重载表格
                        });
                        $('#ht_file').attr('type', 'text');
                    } else {
                        layer.msg(res.msg, { icon: 5, anim: 6, shade: 0.5, time: 1000 });
                    }
                }
            });
        });
    }
});

2、/member/add_import.html

<form class="layui-form" action="" lay-filter="add_import" style="padding: 0 20px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">上传文件</label>
        <div class="layui-input-block">
            <div class="">
                <button type="button" class="layui-btn" id="LAY_avatarUpload" style="background-color: #5fb878;">
                <i class="layui-icon">&#xe67c;</i>选择文件</button>
                <span style="height: 38px;line-height: 38px;color: #999;font-size: 13px;margin-left: 10px;">仅支持.csv或.xlsx格式</span>
            </div>
            <div class="" style="margin-top: 5px;">
                <input type="hidden" id="ht_file" placeholder="附件地址" disabled class="layui-input">
            </div>
        </div>
    </div>
    <a onclick="xs_export()" style="color: red;margin-left: 10%;text-decoration:underline;">请点击下载导入模板,按照模板格式导入</a>
</form>

<script>
layui.use(['admin','form','upload','layedit','view','setter','layer'], function(){
    var $ = layui.$
        ,admin = layui.admin
        ,setter = layui.setter
        ,layedit = layui.layedit
        ,element = layui.element
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,upload = layui.upload
        ,router = layui.router();

    element.render();
    form.render(null, 'add_import');

    // 会员导入模板导出
    window.xs_export=()=>{
        window.location.href = layui.setter.baseUrl+'admin/member/member_download_template';
        // window.location.href = window.location.origin+'/meeting_member_unit_import.xlsx';
    }

});
</script>