layui批量导入excel功能（由前端处理数据）

参考了很多网站，东拼西凑，最终完成了，最关键的就是excel.js这个文件的添加，需要放到layui文件夹的外面一层，不需要用script引用这个文件。

HTML部分

<div id="{id}" class="layui-form-item {selected}" data-id="{id}" data-tag="{tag}" data-index="{index}">
    <label class="layui-form-label" style="width: {labelWidth}px;display:{isLabel}">{label}:</label>
    <div class="layui-input-block" style="margin-left:0px;float: left;">
        <div class="layui-upload">
            <button type="button" class="layui-btn {_disabledClass}" id="uploadPgb" {disabled}>导入</button>
        </div>
    </div>
</div>

<script type="text/html" id="LAY-excel-export-ans">
    {{# layui.each(d.data, function(index, item){ }}
    <blockquote class="layui-elem-quote">{{d.files[index].name}}</blockquote>
    <div class="layui-tab layui-tab-brief" lay-filter="test_tab">
        <ul class="layui-tab-title">
            {{# var i=0; }}
            {{# layui.each(item, function(sheetname, content) { }}
            {{# if(i==0){ }}
            <li class="layui-this">{{=sheetname}}</li>
            {{# }else{ }}
            <li>{{=sheetname}}</li>
            {{# } }}
            {{# i++; }}
            {{# }); }}
        </ul>
        <div class="layui-tab-content">
            {{# var j=0; }}
            {{# layui.each(item, function(sheetname, content) { }}
            {{# if(j==0){ }}
            <div class="layui-tab-item layui-show">
                {{# }else{ }}
                <div class="layui-tab-item">
                    {{# } }}
                    {{# j++; }}
                    <table class="layui-table" lay-skin="row" lay-size="lg">
                        {{# layui.each(content, function(index, value) { }}
                        <tr>
                            {{# layui.each(value, function(key, val) { }}
                            <td>{{=val}}</td>
                            {{# });}}
                        </tr>
                        {{# });}}
                    </table>
                    <!-- <pre class="layui-code">{{JSON.stringify(content, null, 2)}}</pre> -->
                </div>
                {{# }); }}
            </div>
        </div>
        {{# }) }}
</script>

JS部分

layui.use(['jquery', 'layer', 'upload', 'excel', 'laytpl', 'element', 'code'], function () {

    var $ = layui.jquery;

    var layer = layui.layer;

    var upload = layui.upload;

    var excel = layui.excel;

    var laytpl = layui.laytpl;

    var element = layui.element;



    $(function () {

        $("#uploadPgb").click(function () {

            var htmlContent = '<div style="width:100%;height:100%;text-align: center;">'

            htmlContent += '<div class="layui-upload-drag" id="importData" >';

            htmlContent += '<input multiple="multiple" type="file" style="cursor:pointer;opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%;">';

            htmlContent += '<i class="layui-icon"></i>';

            htmlContent += '<p id="filename">点击选择文件，或将文件拖拽到此处，支持多文件导入</p>';

            htmlContent += '</div>';

            htmlContent += '<div ">';

            htmlContent += '<button id="downloadFiles" class="layui-btn" style="margin-top:10px;margin-bottom:10px;">下载模板</button>';

            htmlContent += '</div>';

            htmlContent += '</div>';

            layer.open({

                type: 1

                , offset: "auto"

                , id: 'layer_importData'

                , title: '导入'

                , area: '400px'

                , content: htmlContent    //需要打开的模板

                , btnAlign: 'c' //按钮居中

                , shade: 0 //不显示遮罩

                , success: function (layero, index) {

                    // 监听上传文件的事件

                    $('#importData').change(function (e) {

                        var files = e.target.files;

                        uploadExcel(files);

                    });



                    //下载模板



                }

            });

        })



    });



    function uploadExcel(files) {

        try {

            excel.importExcel(files, {

                // 读取数据的同时梳理数据

                fields: {

                    'collection_point': 'A'

                    , 'pass': 'B'

                    , 'jump_out': 'C'

                    , 'input': 'D'

                }

            }, function (data) {

                // 还可以再进行数据梳理

                /* data = excel.filterImportData(data, {

                    'collection_point': 'A'

                    , 'pass': 'B'

                    , 'jump_out': 'C'

                    , 'input': 'D'

                */

                console.log("data", data, "files", files);

                layer.open({

                    title: '文件转换结果',

                    area: ['60%', '90%'],

                    btn: ['导入', '关闭'],

                    content: laytpl($('#LAY-excel-export-ans').html()).render({ data: data, files: files }),

                    success: function (data) {

                    },

                    yes: function (index, layero) {

                        var sLayer = layer.load();

                        // 设置文件名

                        // var filenames = "";

                        // for(var i=0;i<files.length;i++){

                        //     if(i===0){

                        //         filenames += files[i].name;

                        //     }else{

                        //         filenames += "，"+files[i].name;

                        //     }

                        // }

                        // $("#filename").text(filenames);

                        var flag=true;

                        //批量导入

                        for (var key in data) {

                            var import_data=data[key];

                            $.ajax({

                                url: sessionStorage.getItem('httpUrlPrefix') + '/algorithm/process/execute',

                                data:import_data,

                                headers: { "Content-Type": "application/json;charset=utf-8" },

                                async: false,

                                type: 'post',

                                success: function (result) {

                                    console.log("success", result);

                                },

                                error: function (result) {

                                    console.log("error", result);

                                    flag = false;

                                }

                            });

                        }

                        layer.close(index);

                        layer.close(index-1);

                        layer.close(sLayer);

                        if(flag){

                            layer.msg('导入成功！', { icon: 1 });

                        }else{

                            layer.msg('导入失败！', { icon: 2 });

                        }

                        

                    },

                    cancel: function (index, layero) {



                    }

                });

            });

        } catch (e) {

            layer.alert(e.message);

        }

    }

})

效果图

 

 

 

数据梳理这块我还没有搞懂原理，正在研究中，有问题欢迎指正。