<!--导入数据操作层-->
<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. 『Plotly实战指南』--直方图绘制与应用

    在数据科学的世界里,直方图是一种不可或缺的可视化工具,它以其简洁而直观的方式,揭示了数据的内在规律,为数据分析和决策提供了有力支持. 它能够帮助我们快速识别异常值,并为统计推断提供有力支撑. 无论是对 ...

  2. Ubuntu v22.0安装zabbix --1

    检查Nginx状态 sudo systemctl status nginx 检查Zabbix Server状态 sudo systemctl status zabbix-server Nginx配置: ...

  3. 从零实现富文本编辑器#3-基于Delta的线性数据结构模型

    数据模型的设计是编辑器的核心基础,其直接影响了选区模型.DOM模型.状态管理等模块的设计.例如在quill中的选区模型是index + len的表达,而slate中则是anchor + focus的表 ...

  4. 全局搜索——Lucene.Net与盘古分词的实现思路

    一.Lucene.Net 1.Lucene.Net介绍: Lucene.Net是一个C#开发的开源全文索引库(自带的有索引管理.分词.查询) Lucene.Net.Index 提供索引管理,词组排序. ...

  5. 【BUG】未能加载文件或程序集“System.Runtime.CompilerServices.Unsafe, Version=4.0.4.1, Culture=neutral, PublicKeyT

    参考:无法加载文件或程序集System.Runtime.CompilerServices.Unsafe. 问题 我的环境: Visual Studio 2019 出错代码: MSBuildWorksp ...

  6. 正点原子ALPHA开发板使用4.3寸触摸屏LCD驱动实验显示不正常

    显示问题 裸机开发时,驱动教程的PDF里给了4.3寸LCD屏幕的设置参数.如下图所示: 但是按照这个设置,编写设备树dts文件,下载到开发板里,却出现了显示异常,具体来说就是帧率不对,图和字都是歪斜的 ...

  7. Python 3.14 新特性盘点,更新了些什么?

    Python 3.14.0 稳定版将于 2025 年 10 月正式发布,目前已进入 beta 测试阶段.这意味着在往后的几个月里,3.14 的新功能已冻结,不再合入新功能(除了修复问题和完善文档). ...

  8. 递归神经网络 RNN 原理(上)

    前篇对于 RNN 前奏, 或者说是 NLP 的基础, 语言模型 (Language Model) 有了一点认识. LM 的应用场景为 在词库中, 搜索出 符合当前给定 句子的 下一个单词, 的所有可能 ...

  9. JS高级用法:像大神一样玩转JavaScript

    @charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...

  10. 深挖diff算法:揭开代码版本控制神器的神秘面纱

    @charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...