-
LayUI导入excel功能
2020-11-27 15:04:27第一种导入 <div class="layui-form-block"> <input type="file" class="layui-btn layui-btn-primary" id="LAY-excel-import-excel" multiple="multiple"> </div> $(function () { // 监听...第一种导入
<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/ -
layui导入excel表格文件
2019-04-02 15:15:36沟通交流群: QQ群号: 555056599 github地址: ...功能演示地址: http://excel.wj2015.com /** * 需要引用的外部文件 */ <link rel="stylesheet" type="text/css" href="layui/css/layui.css">...沟通交流群: 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表格-template模板的三种用法
2021-02-01 07:57:14问题情境:layui中将数据库数据通过layui table渲染到前端表格,非常简单,但是如果数据库存储的信息不能被直接展示,项目中该页面有好几个这样的字段,会员类型,...layui table的自定义模板功能能非常方便地解决...问题情境:
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: ‘
‘注意:这里一定要被一层write by:tuantuan
-
layui导入模板数据_基于SpringBoot+Shiro+Mybatis+Druid+layui后台管理系统
2021-01-08 18:44:27简介contentManagerSystem,后台管理系统,采用SpringBoot构建整个项目框架,apacheShiro权限验证,mybatis+druid数据持久化动作,前端采用layui展示。PS:由于此项目完全是在业余时间写的,部分功能和代码可能会有缺陷...简介
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
-
layui导入 加载动画_用动画展现Pycharm十大实用技巧
2020-11-23 21:10:19转自:程序员GitHubPyCharm 应该是大多数 python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能。它是帮助用户在使用 Python 语言开发时提高其效率的工具,但是好多人只是把它当做一... -
layui导入模板数据_使用模板导入Excel数据,模板设定下拉框以及级联下拉框
2021-01-07 14:13:55而且,需要指定的字段要有下拉框和级联下拉框功能。感觉处理起来挺麻烦的,使用原有的代码处理导出,导出1.9M数据,超过2分钟,速度不理想源代码功能如下 /// /// 导出EDI价格 /// /// public FileResult ExportEDI... -
layui导入 加载动画_我用动画展现Pycharm十大实用技巧
2020-11-26 22:01:28PyCharm 应该是大多数 python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能。它是帮助用户在使用 Python 语言开发时提高其效率的工具,但是好多人只是把它当做一个文本编辑器使用,... -
SSM+Layui实现批量导入数据功能
2019-05-04 16:26:28最近要实现批量导入功能,查看了相关资料,以及百度了相关内容,发现有点不是很全,特别是引入的依赖不全 话不多说,直接上代码开始: 1、pom.xml文件引入相关依赖 <!--文件上传依赖--> <!-- ... -
layui导入模板数据_大气漂亮美观的三个网站后台数据管理模板 大大提升你的开发效率...
2021-01-05 20:28:20这样能为你开发后台功能节约大量的时间。一.ok-admin 一个很赞的,扁平化风格的,响应式布局的通用后台模版解决方案,旨为后端程序员减压!目前一共有两个版本:ok-admin v1.0和ok-admin v2.0可进行自由选择!... -
layui实现EXCEL文件导入的功能
2019-11-18 10:18:29layui实现EXCEL文件导入的功能 前台设置导出按钮。 <a href="javascript:;" class="layui-btn" lay-event="uploadFile" style="font-size:15px;"><span><i class="layui-icon" ><... -
layui 读取本地excel内容_layui怎么导入Excel文件?
2020-12-24 20:04:39在我们使用layui进行开发时经常会遇到要将数据导入导出的问题,下面就为大家介绍一个插件,可以将Excel数据导入,也可以将数据导出成excel。环境提示:预览环境需要部署在服务器下,不然无法异步获取需要导出的数据... -
layUI下导入excel文件使用new FormData
2020-11-16 17:13:231、需求是列表里增加“批量导入”功能按钮,要将固定模板的excel表格传给后台接口 2、使用layUI新增弹窗, 3、使用form表单形式上传文件(这里注意,如使用input的type="file",form表单的enctype需用multipart... -
layui框架部分功能介绍
2019-06-05 09:45:51代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介绍, 注意:传入的是页数不是... -
Spring+mybatis+layui实现增删改查,分页,导入导出功能源代码
2020-04-10 15:04:37本套源代码实现了Spring 和 mybatis 和 layui 集成情况下的基础操作,包括: 增删改查、分页、导入导出等功能。数据库为mysql,脚本在源代码根目录下,mybatis_crud.sql -
layUI
2020-12-04 17:09:17将layUI全部路径导入项目(注意项目文件路径) 模块化方式 使用哪个模块功能就加载哪个模块 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewpo -
Layui
2020-10-06 17:53:15有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能... -
layui数据表格导入Excel,后端打印乱码
2020-04-22 13:48:42在做这个功能的时候,我在后端打印的数据是没有经过解码的数据,像这样的:%5B%7B%22cId%22%3A%221%22%2C%22tId%22%3A1%2C%22inport%22%3A2%2C%22state%22%3A%22%22%2C%22householdNumber%22%3A66%2C%。所以在后端要... -
基于layui的poi,将excel数据导入数据库
2020-05-04 19:03:05因为也是刚接触poi也是个小白,通过百度搜索一些文章,这里总结下自己整理的poi导入功能。。 前台使用的是layui <!--上传文件弹出层开始 --> <div style="display: none;padding: 5px" id=... -
怎么接收layui上传的文件_使用LayUI进行文件上传(带预览功能)
2020-12-19 06:17:57使用LayUI进行文件上传(带预览功能)1、添加LayUI上传组件需要的js文件jquery.min.js、layui.all.js、layer.js2、导入上传组件jar包commons-fileupload、commons-io3、在spring配置文件中限制上传文件的大小,否则会... -
导入layui没报错但格式不显示_Pr导入ASS字幕教程
2020-11-30 08:18:23鉴于Pr鸡肋的字幕功能,我们往往会使用 Aegisub等软件制作 .ass字幕 (目前还可以使用“讯飞听见”等上传视频、音频,快速生成字幕) 或者在网上下载到的电影特效字幕通常是 .ass字幕 然而Pr却并不支持 .ass字幕,通常... -
layui的数据表格+springmvc实现数据显示,分页功能
2018-05-19 18:31:15在做分享圈项目后台时,用的是layui提供的后端页面框架,页面挺好看的。 下载layui包:组装我们想要的页面,...要导入layui的layui.css和layui.js <link rel="stylesheet" href="&l... -
Spring使用POI导入excel 配合layui upload组件
2020-08-27 13:29:12前端使用了layui 的upload组件 后端使用ssm POI导出excel可见Spring使用POI导出excel(使用网络请求) 步骤 1.pom引入依赖 <dependency> <groupId>org.apache.poi</groupId> <...
-
零基础一小时极简以太坊智能合约开发环境搭建并开发部署
-
斐波那契数列-1
-
Java讲座-源码
-
网络营销知识仓库.txt
-
Mycat 实现 MySQL的分库分表、读写分离、主从切换
-
基于遗传算法的平面阵列阵列稀疏(matlab程序).zip
-
有大佬知道 淘宝 top sign怎么算吗?
-
【考研初试】安徽建筑大学703艺术设计理论考研真题库资料
-
360手机卫士模块结构图(wainshine制作)[1].jpeg
-
机器视觉学习基础绪论及应用
-
_(:з」∠)_萌新弱弱的混个积分
-
联想EXCEL培训资料.ppt
-
Leetcode刷题笔记
-
OC.Gen-X.2.9.2.dmg
-
力扣7. 整数反转
-
PowerBI重要外部工具详解
-
【正点原子】I.MX6U网络环境TFTP&NFS搭建手册V1.2.pdf
-
摄影测量之空间后方交会程序.zip
-
自动化测试Python3+Selenium3+Unittest
-
U盘量产软件.zip