第一种导入
<div class="layui-form-block">
	<input type="file" class="layui-btn layui-btn-primary" id="LAY-excel-import-excel" multiple="multiple">
</div>

$(function () {
    // 监听上传文件的事件
    $('#LAY-excel-import-excel').change(function (e) {
      // 注意：这里直接引用 e.target.files 会导致 FileList 对象在读取之前变化，导致无法弹出文件
      var files = Object.values(e.target.files)
      uploadExcel(files)
      // 变更完清空，否则选择同一个文件不触发此事件
      e.target.value = ''
    })
  })
})

第二种导入
<button type="button" class="layui-btn" id="LAY-excel-upload">
<i class="layui-icon"></i>导入
</button><input class="layui-upload-file" type="file" accept="undefined" name="file">

//upload上传实例
  var uploadInst = upload.render({
    elem: '#LAY-excel-upload' //绑定元素
    , url: '/upload/' //上传接口（PS:这里不用传递整个 excel）
    , auto: false //选择文件后不自动上传
    , 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]
        }
      }
      $('#LAY-excel-upload').next().val('');

      uploadExcel(fileArr) // 如果只需要最新选择的文件，可以这样写： uploadExcel([files.pop()])
    }
  });

/**
 * 上传excel的处理函数，传入文件对象数组
 */
function uploadExcel(files) {
  layui.use(['excel', 'layer'], function () {
    var excel = layui.excel
    var layer = layui.layer
    try {
      excel.importExcel(files, {
        // 读取数据的同时梳理数据
        fields: {
          'id': 'A'
          , 'username': 'B'
          , 'experience': 'C'
          , 'sex': 'D'
          , 'score': 'E'
          , 'city': 'F'
          , 'classify': 'G'
          , 'wealth': 'H'
          , 'sign': 'I'
        }
      }, function (data) {
        // 还可以再进行数据梳理
        
      })
    } catch (e) {
      layer.alert(e.message)
    }
  })
}

参考案例http://excel.wj2015.com/

参考文档http://excel.wj2015.com/_book/

沟通交流群：
QQ群号： 555056599

github地址:
https://github.com/wangerzi/layui-excel

功能演示地址:
http://excel.wj2015.com

/**
 * 需要引用的外部文件
 */
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
	layui.config({
		base: 'layui_exts/'
	}).extend({
		excel: 'excel'
	});
</script>
<!-- IE需要把JS放在上边，否则onclick失效 -->

/**
 * HTML5代码
 * 绑定input按钮
 */
<div class="layui-form-item">
	<div class="layui-form-label">导入操作</div>
	<div class="layui-form-block">
		<input type="file" class="layui-btn layui-btn-primary" id="LAY-excel-import-excel" multiple="multiple">
	</div>
</div>

/**
 * JavaScript代码
 */
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(){
	    // 监听上传文件的事件
	    $('#LAY-excel-import-excel').change(function(e) {
	      var files = e.target.files;
	      uploadExcel(files);
	    });
	    // 文件拖拽
	    $('body')[0].ondragover = function(e) {
	      e.preventDefault();
	    }
	    $('body')[0].ondrop = function(e) {
	      e.preventDefault();
	      var files = e.dataTransfer.files;
	      uploadExcel(files);
	    }
	  });
	});

	 /**
	  * 上传excel的处理函数，传入文件对象数组
	  * @param  {[type]} files [description]
	  * @return {[type]}       [description]
	  */
	 function uploadExcel(files) {
	   try {
	     excel.importExcel(files, {
	       // 读取数据的同时梳理数据
	       fields: {
	         'id': 'A'
	         ,'username': 'B'
	         ,'experience': 'C'
	         ,'sex': 'D'
	         ,'score': 'E'
	         ,'city': 'F'
	         ,'classify': 'G'
	         ,'wealth': 'H'
	         ,'sign': 'I'
	       }
	     }, function(data) {
	       // 还可以再进行数据梳理
		/*
		   data = excel.filterImportData(data, {
	         'id': 'A'
	         ,'username': 'B'
	         ,'experience': 'C'
	         ,'sex': 'D'
	         ,'score': 'E'
	         ,'city': 'F'
	         ,'classify': 'G'
	         ,'wealth': 'H'
	         ,'sign': 'I'
	       });
		*/
	      // 如果不需要展示直接上传，可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可
	      $.ajax({
              url: '/article/inputExcel'
              , data:{data:data}
              , dataType: 'json'
              , success: function (res) {
                  if(res.code == 200){
                      layer.msg('导入成功',{icon:1,time:1000});
                  }
              }
          })
          //展示表格文件转换成的json数据格式
	      layer.open({
	         title: '文件转换结果'
	         ,area: ['799px', '399px']
	         ,tipsMore: true
	         ,content: laytpl($('#LAY-excel-export-ans').html()).render({data: data, files: files})
	         ,success: function() {
	           element.render('tab');
	           layui.code({
	           });
	         }
	       });
	     });
	   } catch (e) {
	     layer.alert(e.message);
	   }
	 };
 });

问题情境：
layui中将数据库数据通过layui table渲染到前端表格，非常简单，但是如果数据库存储的信息不能被直接展示，项目中该页面有好几个这样的字段，会员类型，支付类型，会员时长还有平台类型；例如数据库有一个类型字段：1和2,1表示钻石会员，2表示至尊会员，前端显然不能直接显示1和2，而是应该根据后端返回的数字进行判断，展示相应的内容。layui table的自定义模板功能能非常方便地解决这个问题；
方法一：函数转义
所谓函数转义，就是在表格cols的对应列中直接写一段函数：
{ field: ‘vip_type‘, title: ‘会员类型‘ , templet: function(d) {if(d.vip_type == 1){
res= "钻石会员"}else{
res= "至尊会员"}returnres;
}
},
这样的写法，简单直接，缺点是复用性差，有可能导致代码冗余。
方法二：绑定模板选择器
下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 laytpl 语法，可读取到返回的所有数据。
{{#  } else{ }}
至尊会员
{{#  } }}
table.render中的对应列templet内容中直接引用上面的模板即可
{
field:‘vip_type‘,
title:‘会员类型‘,
templet:‘#typeTpl‘}
这样的话，如果有多处表格使用同一个模板，代码复用性将得到加强。
方法三：直接赋值模版字符
templet: ‘
{{d.title}}
‘注意：这里一定要被一层
write by:tuantuan

简介
contentManagerSystem,后台管理系统,采用SpringBoot构建整个项目框架,apacheShiro权限验证，mybatis+druid数据持久化动作,前端采用layui展示。
PS:由于此项目完全是在业余时间写的,部分功能和代码可能会有缺陷或者不足，但核心代码都已写完，大家可以下载下来在此基础上继续扩展，我也会一直维护，有问题我们可以一起交流.
功能说明
用户管理:简单实现用户新增，编辑，添加角色等功能.
角色管理:简单实现角色新增，编辑，角色赋权等功能
菜单管理:简单实现菜单新增，编辑等功能
PS：后续会继续增加功能.
使用说明
导入项目根目录下:contentmanagersystem_db.sql文件到mysql数据库
导入项目到Eclipse或Idea.
修改数据库配置文件jdbc.properties中的账号密码.
配置maven命令:spring-boot:run启动项目,访问链接: 
redis配置请参考 
项目截图演示
项目地址:
https://gitee.com/yangxiaobing_175/contentManagerSystem
软件设计开发交流q-q群：592246824