精华内容
下载资源
问答
  • 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 table渲染到前端表格,非常简单,但是如果数据库存储的信息不能被直接展示,项目中该页面有好几个这样的字段,会员类型,...layui table的自定义模板功能能非常方便地解决...

    问题情境:

    layui中将数据库数据通过layui table渲染到前端表格,非常简单,但是如果数据库存储的信息不能被直接展示,项目中该页面有好几个这样的字段,会员类型,支付类型,会员时长还有平台类型;例如数据库有一个类型字段:1和2,1表示钻石会员,2表示至尊会员,前端显然不能直接显示1和2,而是应该根据后端返回的数字进行判断,展示相应的内容。layui table的自定义模板功能能非常方便地解决这个问题;

    20200521193252685642.png

    方法一:函数转义

    所谓函数转义,就是在表格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

    展开全文
  • 简介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配置请参考

    项目截图演示

    158f1bd9a186c7ae62be4210b6e3e544.png
    3c8a9f1013d30770255e687515aecffa.png
    089e3b5b01899c770bd909a1a45e7ae3.png
    ca5c507ceb7b7181fcfd1033a1f4d171.png
    2abeaa4263005a521f2e711e75a43551.png

    项目地址:

    https://gitee.com/yangxiaobing_175/contentManagerSystem

    软件设计开发交流q-q群:592246824
    展开全文
  • 转自:程序员GitHubPyCharm 应该是大多数 python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能。它是帮助用户在使用 Python 语言开发时提高其效率的工具,但是好多人只是把它当做一...
  • 而且,需要指定的字段要有下拉框和级联下拉框功能。感觉处理起来挺麻烦的,使用原有的代码处理导出,导出1.9M数据,超过2分钟,速度不理想源代码功能如下 /// /// 导出EDI价格 /// /// public FileResult ExportEDI...
  • PyCharm 应该是大多数 python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能。它是帮助用户在使用 Python 语言开发时提高其效率的工具,但是好多人只是把它当做一个文本编辑器使用,...
  • SSM+Layui实现批量导入数据功能

    千次阅读 热门讨论 2019-05-04 16:26:28
    最近要实现批量导入功能,查看了相关资料,以及百度了相关内容,发现有点不是很全,特别是引入的依赖不全 话不多说,直接上代码开始: 1、pom.xml文件引入相关依赖 <!--文件上传依赖--> <!-- ...
  • 这样能为你开发后台功能节约大量的时间。一.ok-admin 一个很赞的,扁平化风格的,响应式布局的通用后台模版解决方案,旨为后端程序员减压!目前一共有两个版本:ok-admin v1.0和ok-admin v2.0可进行自由选择!...
  • layui实现EXCEL文件导入功能

    千次阅读 2019-11-18 10:18:29
    layui实现EXCEL文件导入功能 前台设置导出按钮。 <a href="javascript:;" class="layui-btn" lay-event="uploadFile" style="font-size:15px;"><span><i class="layui-icon" >&#xe67c;<...
  • 在我们使用layui进行开发时经常会遇到要将数据导入导出的问题,下面就为大家介绍一个插件,可以将Excel数据导入,也可以将数据导出成excel。环境提示:预览环境需要部署在服务器下,不然无法异步获取需要导出的数据...
  • 1、需求是列表里增加“批量导入功能按钮,要将固定模板的excel表格传给后台接口 2、使用layUI新增弹窗, 3、使用form表单形式上传文件(这里注意,如使用input的type="file",form表单的enctype需用multipart...
  • 代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介绍, 注意:传入的是页数不是...
  • 本套源代码实现了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数学公式新的甘特图功能...
  • 在做这个功能的时候,我在后端打印的数据是没有经过解码的数据,像这样的:%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%。所以在后端要...
  • 因为也是刚接触poi也是个小白,通过百度搜索一些文章,这里总结下自己整理的poi导入功能。。 前台使用的是layui <!--上传文件弹出层开始 --> <div style="display: none;padding: 5px" id=...
  • 使用LayUI进行文件上传(带预览功能)1、添加LayUI上传组件需要的js文件jquery.min.js、layui.all.js、layer.js2、导入上传组件jar包commons-fileupload、commons-io3、在spring配置文件中限制上传文件的大小,否则会...
  • 鉴于Pr鸡肋的字幕功能,我们往往会使用 Aegisub等软件制作 .ass字幕 (目前还可以使用“讯飞听见”等上传视频、音频,快速生成字幕) 或者在网上下载到的电影特效字幕通常是 .ass字幕 然而Pr却并不支持 .ass字幕,通常...
  • layui的数据表格+springmvc实现数据显示,分页功能

    万次阅读 多人点赞 2018-05-19 18:31:15
    在做分享圈项目后台时,用的是layui提供的后端页面框架,页面挺好看的。 下载layui包:组装我们想要的页面,...要导入layuilayui.css和layui.js &lt;link rel="stylesheet" href="&l...
  • 前端使用了layui 的upload组件 后端使用ssm POI导出excel可见Spring使用POI导出excel(使用网络请求) 步骤 1.pom引入依赖 <dependency> <groupId>org.apache.poi</groupId> <...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 144
精华内容 57
关键字:

layui导入功能