沟通交流群:
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导入excel表格文件
猜你喜欢
转载自blog.csdn.net/JiaZhaoMeng/article/details/88972811
今日推荐
周排行