首页 > 其他 > 详细

layui 关于table 导入方法

时间:2021-05-17 13:25:32      阅读:24      评论:0      收藏:0      [点我收藏+]

<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 导入方法

原文:https://www.cnblogs.com/LuoEast/p/14775748.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!