layui

2020.1.16 最近终于又用到了导出表格，我在实际项目里使用了上次发现的导出全部数据方法，然后遇到了一些问题，并进行了解决，终于可以正式写在博客中了。 整体代码： < div style ="display: none" > < table id ="table" > </ table > </ div > // 导出表格配置 table.render({ elem: '#table' , id: 'exportTable' , title: '导出的文件名' , cols: [[ // 表头 { field: 'uid' , title: 'ID' , }, { field: 'uname' , title: '姓名' , } ]] }); // 导出事件 $('#export').on('click', function () { // 使用ajax请求获取所有数据 $.ajax({ url: "url" , type: 'post' , data: { type: 1 }, async: false , dataType: 'json' , success: function (res) { // 使用table.exportFile()导出数据 table.exportFile('exportTable', res.data, 'xls' ); } }); });

1.数据库使用的数据类型是datetime 2.使用这种方式显示数据发现会出现这么个问题，以这样的格式输出"/Date(xxxxxxxxxxxxx)/"。 3.解决方法，写一个方法用来解析JSON格式的时间 Date.prototype.format = function (format) // author: meizz { var o = { "M+": this .getMonth() + 1, // month "d+": this .getDate(), // day "h+": this .getHours(), // hour "m+": this .getMinutes(), // minute "s+": this .getSeconds(), // second "q+": Math.floor(( this .getMonth() + 3) / 3), // quarter "S": this .getMilliseconds() // millisecond } if (/(y+)/.test(format)) format = format.replace(RegExp.$1 , ( this .getFullYear() + "").substr(4 - RegExp.$1 .length)); for ( var k in o) if ( new

定义格式化方法 laytpl.formatNum = function (num) { if (!num ||'null'== num) { return "" ; } return num } value="{{layui.laytpl.formatNum(item1.Sczdj)}}" 来源： oschina 链接： https://my.oschina.net/tshblogs/blog/4414977

　　layui 的表格组件目前只支持单列排序，在实际应用中并不能很好的支撑我们的业务需求。今天一时手痒，决定改造一番以支持多重排序。 　　实现思路也比较简单，只需要用一个数组来存放所有排序的列，再把这个数组传到后端（后端排序）进行排序即可。沿用一般的使用习惯，按住 shift 键点击表头可增加排序列，按住 ctrl 键点击表头可减少排序列。话不多说，先上最终效果图： 　　 1. 定义排序列数组 　　 我当前用的是 2.5.6 版本，源码之前为适应业务需求也做过相应修改，所以下文说到的行数只是个大概数。 　　为兼容之前单列排序的使用习惯，我们增加一个 multiSort 的配置属性，默认为 false，为 true 时才开启多列排序。修改源码大概第 235 行，增加两个属性 multiSort、sortCols。 //构造器 , Class = function (options) { var that = this; that.index = ++table.index; that.mutlSort = false; that.sortCols = []; // 组合排序列集合 that.config = $.extend({}, that.config, table.config, options); that.render(); }; 　　2. 修改表头点击事件 　

在使用“编辑”按钮时，要使用弹出层，并且要将当前所选项的值传递给弹出子页面。 父层： function editUser(edit){ var index = layui.layer.open({ title : "编辑用户", type : 2, content : "uIAction_page_user_userEdit",//弹出层页面 area: ['500px', '560px'], success : function(layero, index){ var body = layui.layer.getChildFrame('body', index); if(edit){ // 取到弹出层里的元素，并把编辑的内容放进去 body.find(".id").val(edit.id); //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据 body.find(".password").val(edit.password); //密码 body.find(".userEndTime").val(edit.userEndTime); //登录时间 body.find(".userName").val(edit.userName); //登录名 body.find(".userEmail").val(edit.userEmail); //邮箱 body.find("

LayUI 主要内容                             如果需要更多资料点击下方图片加好友领取⬇（注明来意                     LayUI 的安装及使用 LayUI 的介绍 ​ layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 ​ 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。 ​ 官网： https://www.layui.com ​ 官方文档：< https://www.layui.com/doc/> ; LayUI 的特点 （1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。 （2）layui是提供给后端开发人员的ui框架，基于DOM驱动。 下载与使用 在 官网首页 下载到 layui 的最新版。目录结构如下： ├─css // css目录 │ │─modules // 模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├

把要异步加载的页面中，需要执行的js，写在load（）方法的回调函数中执行： $( selector ).load( url,data,function(response,status,xhr )) $('.layui-tab-content').load("../index.html", function () { 　　　　　　　　　　　　　　//这里是异步加载的index.html页面 需要执行的js }); 来源： oschina 链接： https://my.oschina.net/u/4381645/blog/4278128

gitee开源地址：https://gitee.com/chaituan/fanqie_shop github开源地址：https://github.com/chaituan/fanqie_shop 番茄社区多门店是一款帮助多商家线上盈利的工具，可做社区门店，也可以做社区团购，还可以做自营连锁店，内含小程序和公众号两个端，同一个后台管理。 主要功能模块：商家入住，合伙人推广，区域定位，分销裂变，积分商城，自定义海报 软件架构 本系统使用的是前后端分离的开发方式，后端采用国外优雅的CodeIgniter框架，小巧灵活安全性高非常容易上手，后台UI使用极简的LAYUI。 前端采用vue开发的uniapp框架，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 一、首页排版调整 通过后台菜单 配置---首页设计，来调整图片，和位置。首页设计比较简单，后期会逐渐增加更多的DIY。 二、关于定位 首先需要在后台菜单 商家---区域管理 中添加区域。 后台可以设置定位的距离和默认位置。当用户进入系统后，系统会根据后台设置的距离来筛选离他最近的区域（地区），如果未匹配到数据，则会自动读取后台设置的默认区域。（后台有详细说明，请查看） 三、商家入住说明 商家可在手机端，申请入住。申请通过后系统会自动发PC端的帐号密码到消息中

分页                             如果需要更多资料点击下方图片加好友领取⬇（注明来意）                     ​ <font color="red">模块加载名称： laypage </font> 快速使用 ​ laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div id="test1"></div> </body> <script src="layui/layui.js"></script> <script type="text/javascript"> layui.use('laypage', function(){ var laypage = layui.laypage; //执行一个laypage实例 laypage.render({ elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号 ,count: 50 //数据总数，从服务端得到 }); }); </script>

要实现上图所示的效果，即鼠标移到问号元素上，弹出提示信息，鼠标移开后提示层消失的效果，方法有三种： 方法一： 用原始的js实现，即在鼠标要悬停的元素上添加onMouseOver和onMouseOut捕获鼠标事件。（过时的方法）。 方法二：（推荐使用） JQuery的 mouseover()和mouseout()方法。例如使用此方法结合layui前端框架的tip提示层实现上述效果代码如下： HTML代码片段： <th>短信签名 <i id="dxqm" class="layui-icon layui-icon-help" style="font-size: 12px; color: #ff0000;"></i></th> js代码片段： var tip_index; $("#dxqm").mouseover(function(){ tips_index =layer.tips('是指短信内容里【】里的内容，一般用于写店铺简称，比如短信内容是：“用户1888888888于2020-03-24 15:33:20在本店购物获赠积分20分【永惠百货】”。其中“永惠百货”即为短信签名',this,{time:0}); }); $("#dxqm").mouseout(function(){ layer.close(tips_index); //关闭弹出层索引 }); 方法三： jQuery