layui+tp Excel表格信息入库，员工信息批量入库 （小笔记）

原理：利用layui封装的excel.js将excel表数据逐行读取出来，然后逐条写入数据库。

首先，先下载layui-excel我们需要的是\layui_exts文件里面的excel.js

下载完解压后将该目录放置于你网站layui相关js位置，然后引用。

我看到我这引用的公共文件

 所以我决定把layui_exts文件夹放这。

 然后引入相关js就变成了这样，一切准备就绪啦。

 开始前端编码（lists页面添加按钮和点击事件）：

 <button class="layui-btn layui-btn-sm layuiadmin-btn-user_photo {$view_theme_color}" data-type="excel">员工信息批量导入</button>




//相关点击事件
excel: function() {
                var index = layer.open({
                    type: 2,
                    title: '批量导入员工信息',
                    content: '{:url("user_photo/excel")}',
                    area: ['50%', '50%'],
                    maxmin: true,

                });
            },

lists同级目录下编写excel页面代码：

{layout name="layout3"/}//这里就是刚刚引入excel.js的公共文件
<div style="margin-top:100px" align="center">
    <button class="layui-btn layui-btn-sm" style="background-color: #10A9FF;" id="excel">
    <i class="layui-icon"></i>导入xlsx文件
    </button>
</div>
<!-- <div class="layui-progress layui-progress-big" lay-filter="progress" lay-showPercent="yes">
    <div　id="demo" class="layui-progress-bar layui-bg-green" lay-percent="10%"></div>
</div> -->
<script>
    layui.use(['table', 'jquery', 'layer', 'upload', 'excel'], function() {
        var table = layui.table,
            $ = layui.jquery,
            layer = layui.layer,
            upload = layui.upload,
            excel = layui.excel;

        var upload = upload.render({
                elem: '#excel' //绑定元素
                    ,
                url: '{:url("user_photo/excel")}' 
                    ,
                auto: true //选择文件后是否自动上传
                    ,
                accept: 'file',
                choose: function(obj) { // 选择文件回调
                    var files = obj.pushFile()
                    var fileArr = Object.values(files) // 注意这里的数据需要是数组，所以需要转换一下
                    for (var index in files) {
                        if (files.hasOwnProperty(index)) {
                            delete files[index]
                        }
                    }
                    uploadExcel(fileArr) // 如果只需要最新选择的文件，可以这样写： uploadExcel([files.pop()])
                }
            })
            /**
             * 上传excel的处理函数，传入文件对象数组
             * @param  {[type]} files [description]
             * @return {[type]}       [description]
             */

        function uploadExcel(files) {
            try {
                excel.importExcel(files, {
                    // 读取相关数据
                    fields: {
                        'name': 'A',
                        'age': 'B',
                        'user_phone': 'C',
                        'position': 'D',
                        'user_img': 'E'
                    }
                }, function(data) {
                    console.log(data);
                    $.each(data, function(index, obj) {
                        $.each(obj.Sheet1, function(index, object) {
                            var name = object.name;
                            var age = object.age;
                            var user_phone = object.user_phone;
                            var position = object.position;
                            var user_img = object.user_img;
                            if (name == "员工姓名") {//这个是第一行表头所以不处理

                            } else {
                                $.ajax({
                                    url: '{:url("user_photo/excel")}',
                                    data: object,
                                    type: 'post',
                                    success: function(data) {
                                        layer.msg(data.msg);
                                    },
                                    error: function(msg) {
                                        layer.msg('写入数据出现错误！');
                                    }
                                });
                            }
                        })
                    });


                })
            } catch (e) {
                layer.alert(e.message)
            }

        }

    });
</script>

效果预览：

  

 后端相关代码（将接收到数据进行查询看是否存在不存在就写入）：

public function excel(){
        if($this->request->isAjax()){
            $data = $this->request->post();
            $count = DB('user_info')->where(['name'=>$data['name']])->count();
            if($count>0){
                return ["msg"=>$data['name']."员工信息已经存在！"];
            }else{        
                $res = Db('user_info')->insert($data);
                if($res){ 
                    return ["msg"=>$data['name']."员工信息写入成功。"];
                }
            }
            
        }

        return $this->fetch();
    }

后端数据库字段：

测表格相关内容：

测试效果预览：

 

 批量导入成功

本期分享到此结束，嗯，又是充实的一天。