layui 关于table 导入方法

 

<!--导入数据操作层-->
<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>