<!--导入数据操作层-->
<div class="layui-form-item">
    <div class="layui-form-label">导入操作</div>
    <div class="layui-form-block">
      
        <div class="layui-upload-drag" style="display:none" id="ImportExcel">
        <i class="layui-icon"></i><p>点击上传,或将文件拖拽到此处</p><div class="layui-hide" id="uploadDemoView"> </div> </div>

        <table class="layui-hide" id="ImportTable" lay-filter="ImportTable"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="ImportExcel">导入</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            </div>
        </script>
    </div>
</div>

<script>
        layui.config({
            base: '/Content/libs/layuiExts/',
        }).extend({
            excel: 'excel',
        });
        layui.use(['table', 'layer', 'excel', 'upload', 'form'], function () {
            var table = layui.table
            layer = layui.layer,
                excel = layui.excel,
                upload = layui.upload,
                form = layui.form;

            table.render({
                elem: '#ImportCarrierNumTable',
                toolbar: '#tableToolbar',
                title: '数据表',
                loading: false,
                cols: [[
                    { field: 'importStatus', title: '导入状态' },
                    { field: 'carrierNumber', title: '列名', unresize: true, sort: true },

                ]]
            });

    //表格工具栏
table.on('toolbar(ImportCarrierNumTable)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'ImportExcel':
$("#ImportExcel").remove();
$("body").append('<div class="layui-upload-drag" style="display:none" id="ImportExcel"><i class="layui-icon"></i><p>点击上传,或将文件拖拽到此处</p><div class="layui-hide" id="uploadDemoView"> </div> </div>');
layer.open({
type: 1,
shade: false,
area: ['350px', '260px'],
title: '导入Excel',
content: $("#ImportExcel"),
cancel: function () {
layer.close();
$("#ImportExcel").remove();
},
success: function (layero, index) { ImportExcel();
},
});
break;
};
});

//导入方法
            function ImportExcel() {

                var uploadRender;
                let uploadAction = {
                    elem: '#ImportExcel',
                    title: '请选择Excel文件',
                    accept: 'file', //普通文件
                    exts: 'xls|excel|xlsx', //导入表格
                    auto: false,
                    choose: function (obj) {// 选择文件回调
                        if (uploadRender != null && uploadRender != undefined && uploadRender != "") {
                            uploadRender = upload.render()
                            //uploadRender.config.elem.next()[0].value = '';
                            //uploadRender = undefined;
                        }
                        var files = obj.pushFile();
                        try {
                            var fileArr = Object.values(files);
                            for (var index in files) {
                                if (files.hasOwnProperty(index)) {
                                    delete files[index];
                                }
                            }
                            uploadExcel(fileArr)

                            $("#ImportExcel").remove();
                        } catch (e) {
                            layer.alert(e.message);
                        }

                        //var fileArr = Object.values(files);// 注意这里的数据需要是数组,所以需要转换一下
                        ////console.debug(fileArr)
                        //// 用完就清理掉,避免多次选中相同文件时出现问题
                        //for (var index in files) {
                        //    if (files.hasOwnProperty(index)) {
                        //        delete files[index];
                        //    }
                        //}
                        //uploadExcel(fileArr);//  // 如果只需要最新选择的文件,可以这样写: uploadExcel([files.pop()])

                    },
                    error: function () {
                        //关闭所有弹出层
                        layer.closeAll(); //疯狂模式,关闭所有层
                    }
                };

                uploadRender = upload.render(uploadAction);

            };
            function uploadExcel(files) {
                try {

                    console.log(files);
                    let excelObj;
                    // 方式一:先读取数据,后梳理数据
                    excel.importExcel(files, {}, function (data) {
                        console.log(data);
                        let filed;
                        for (let obj in data[0]) {
                            excelObj = data[0][obj];
                            for (let i in excelObj[0]) {
                                console.log(excelObj[0][i]);
                                if (excelObj[0][i].indexOf("承运单号") >= 0) {
                                    filed = i
                                }
                            }
                        }

                        if (filed == null || filed == undefined || filed == "") {

                            layer.confirm('缺少【需要得列名】列', {
                                btn: ['确认']
                            }, function (index, layero) {
                                $("#ImportExcel").remove();
                                layer.closeAll();
                            });

                            return;
                        }

                        excelObj = excel.filterImportData(data, {
                            'carrierNumber': filed
                        });

                        for (let obj in data[0]) {
                            let shree = excelObj[0][obj];
                            shree.splice(0, 1);
                            table.reload('ImportCarrierNumTable', {
                                data: shree
                            });
                        }
                        files = undefined;
                        layer.closeAll();
                    });

                } catch (e) {
                    files = undefined;
                    layer.alert(e.message);
                }
            };

            form.render();
            form.render('select');
        });

    </script>

layui 关于table 导入方法的更多相关文章

  1. mysql source命令超大文件导入方法总结

    本文章来给各位朋友介绍利用mysql source命令超大文件导入方法总结,下面收集了两种解决办法,一种是把数据库分文件导出然后再导入,另一种是修改my.ini配置文件,下面我一一给各位朋友介绍. 导 ...

  2. LayUI之table数据表格获取行、行高亮等相关操作

    前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

  3. layui教程---table

    layui.config({ base: "${ctx}/static/js/" }).use(['form', 'layer', 'jquery', 'common','elem ...

  4. Layui的本地存储方法-Layui.data的基本使用

    本地存储是对 localStorage 和 sessionStorage 的友好封装,可更方便地管理本地数据. localStorage 持久化存储:layui.data(table, setting ...

  5. mysql 文件导入方法总结

    数据导入3三种方法 一.phpMyAdmin 限制大小:2M 1.创建数据库 2.导入.sql或.sql.zip文件 大数据导入方法一:http://jingyan.baidu.com/article ...

  6. mediawiki数据库的下载地址及导入方法

    mediawiki导入数据库 数据库下载:http://zh.wikipedia.org/wiki/Wikipedia:%E6%95%B0%E6%8D%AE%E5%BA%93%E4%B8%8B%E8% ...

  7. Exporter - 实现默认的导入方法用于模块

    Exporter - 实现默认的导入方法用于模块 简介: In module YourModule.pm: package YourModule; require Exporter; @ISA = q ...

  8. SAP ABAP规划 使用LOOP READ TABLE该方法取代双LOOP内部表的方法

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlueXVlemhhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  9. JavaScript后台代码操作HTML TABLE的方法

    原文:JavaScript后台代码操作HTML TABLE的方法 var rowNum = 0,fileNum = 0; //行号与列号 var oNewRow; //定义插入行对象 var oNew ...

  10. vivado License导入方法与资源获取

    前言 以下安装说明基于已经正确安装vivado 笔者操作环境:linux vivado版本:2015.2 vivado License导入方法: 点击菜单栏[Help],选择[Manage Licen ...

随机推荐

  1. 远程连接到轻量应用服务器PG数据库

    不建议这样做,但是开发时方便需要.进入正题. PG是不支持远程连接的,需要连接直接该参数. 在其data目录里,有二个配置文件: pg_hba.conf:配置数据库的访问权限 postgresql.c ...

  2. luaL_ref如何使用

    // main.lua中有个全局函数function gf() print("hello world")end// c++中处理void callgf(){ lua_getglob ...

  3. Postwoman教程

    1.安装 打开git或cmder,输入如下命令: cd d:/GitDemo/ git clone https://github.com/liyasthomas/postwoman cd postwo ...

  4. 详细介绍MessageQueueSelector

    一.MessageQueueSelector 详解 MessageQueueSelector 是 RocketMQ 提供的一个接口,用于自定义消息发送时的队列选择策略. 通过实现该接口, 开发者可以控 ...

  5. 开发 MCP Proxy(代理)也可以用 Solon AI MCP 哟!

    MCP 有三种通讯方式: 通道 说明 备注 stdio 本地进程内通讯 现有 sse http 远程 http 通讯 现有 streamable http 远程 http 通讯 (MCP 官方刚通过决 ...

  6. 小模型工具调用能力激活:以Qwen2.5 0.5B为例的Prompt工程实践

    在之前的分析中,我们深入探讨了cline prompt的设计理念(Cline技术分析:prompt如何驱动大模型对本地文件实现自主变更),揭示了其在激发语言模型能力方面的潜力.现在,我们将这些理论付诸 ...

  7. Windows 实用工具(新机、全新系统、重装系统必备)

    Windows 实用工具 https://www.lanzoub.com/b0ziu7owh 密码:akoc HEU_KMS_Activator Windows 激活工具. 下载链接: Github: ...

  8. 2K star!三分钟搭建企业级后台系统,这款开源Java框架绝了!

    2K star!三分钟搭建企业级后台系统,这款开源Java框架绝了! "LikeAdmin Java是基于Spring Boot + Mybatis Plus + Vue 3的快速开发平台, ...

  9. js技术之“自定义包含方案”

    调用 // 用于判断包含 function diaoyong(arr, str){ // 初始化 var sizes = ['L','XL','S','M']; for (var i = 0; i & ...

  10. vue3 基础-Vuex 全局数据状态管理

    针对页面间, 组件间的数据共享问题, Vue 提供一个数据管理框架 Vuex, 早期主要是用于 Vue2 , 而现在用 Vue3 也是可以正常使用, 但在 Composition API 下则会感到这 ...