Layer
关注
分享
扫一扫
文章平均质量分 70
Layui版本 2.4.5；查看Layui版本：console.log (layui.v);
贤心大佬的layui git 地址：https://gitee.com/sentsin/layui
夏已微凉、
这个作者很懒，什么都没留下…
展开
-
Layui回车登录
Layui回车登录原创 2022-10-21 22:23:12 · 525 阅读 · 0 评论 -
Layui：弹窗确定后获取子页面的值(如获取UEditor富文本的内容，或input标签内容)
【代码】Layui：弹窗确定后获取子页面的值(如获取UEditor富文本的内容，或input标签内容)转载 2022-08-31 21:13:13 · 163 阅读 · 0 评论 -
Layui时间插件laydate只选择时分
需要一个只选择时分的控件，首先想到的是laydate，然后看一下控件的类型。//min'string',//设置最小值。/*设置只展示时分，隐藏秒那一列*//*设置只展示时分，隐藏秒那一列*///给默认值，模拟后台返回的数据。/*layer弹出一个示例*///元素操作等等...//vue挂载的元素。...原创 2022-07-23 14:11:31 · 3602 阅读 · 0 评论 -
VUE+Layui 输入框、下拉选择框、复选框、开关、文本域 数据回显
vue+layui表单数据回显原创 2022-07-18 21:22:39 · 1926 阅读 · 1 评论 -
VUE+Layui 复选框：回显、禁用效果
VUE+Layui 复选框：回显、禁用效果原创 2022-07-18 21:20:52 · 910 阅读 · 0 评论 -
Layui：数据表格table中预览图片、视频
Layui：数据表格table中预览图片、视频原创 2022-07-18 21:17:42 · 2832 阅读 · 0 评论 -
Layui table实现数据表格列表搜索功能
Layui table实现数据表格列表搜索功能原创 2022-07-03 14:46:45 · 3047 阅读 · 3 评论 -
Layui 数据表格 table 行数据修改 edit:text/edit:true
Layui 数据表格 table 行数据修改 edit:text/edit:true原创 2022-07-03 14:44:43 · 5272 阅读 · 0 评论 -
Layui数据表格table自定义input text，input checkbox 修改列的值
Layui数据表格table自定义input text，input checkbox 修改列的值原创 2022-07-03 14:42:13 · 2215 阅读 · 0 评论 -
Layui数据表格table排序（后端PHP）
Layui数据表格table排序（后端PHP）原创 2022-07-03 14:38:39 · 2615 阅读 · 0 评论 -
Layer数据表格中每一行文件上传
一、前言二、html 部分代码三、js 部分代码一、前言需要在数据表格每一行加一个上传按钮问题：点击上传，弹出选择文件框了，选择 打开(O) 之后并没有执行上传操作二、html 部分代码<script type="text/html" id="uploadPicTpl"> <a class="layui-btn layui-btn-normal layui-btn-xs upload-pic"> 上传 </a></s.原创 2022-05-04 16:19:20 · 1012 阅读 · 0 评论 -
layui 监听表单提交form.on(‘submit(sub)‘,function (){}) ajax请求失败问题
一、说明二、修改一、说明ajax 回调执行异常，写的是 post 请求，但执行时却变成了 get 请求在 submit 最后加上 return false 就解决了二、修改form.on('submit(sub)', function(data) { $.ajax({ url: "/.../.../index", type: 'post', data: data.field, success: function (res.原创 2022-02-01 18:29:29 · 1980 阅读 · 0 评论 -
Layui 左部菜单栏无限级分类
一、代码二、效果三、格式化左边菜单一、代码<!-- 左边的菜单栏 --><div class="layui-side layui-side-menu"> <div class="layui-side-scroll"> <div class="layui-logo" lay-href="index/index.html"> <span>什么后台系统</span> &l.原创 2021-10-21 16:01:58 · 1666 阅读 · 2 评论 -
Layui组件 sliderVerify 实现滑块验证
一、使用截图二、快速上手1、文件引入2、入门案例3、自定义风格样式4、滑块重置三、实际应用（比如登录）四、参考地址一、使用截图 二、快速上手1、文件引入获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述一个文件：./sliderVerify/sliderVerify.js2、入门案例<!DOCTYPE html><html> <head> <meta charset="utf-.原创 2021-10-18 11:50:46 · 1585 阅读 · 5 评论 -
Layui 数据表格复杂表头
一、使用方式二、使用代码三、效果截图一、使用方式1、在表头参数 cols 里加上：colspan，rowspan，请参考文档 >>>cols - 表头参数一览表2、cols 是个 二维数组，里面的每个 一维数组 相当于一个 <tr></tr>二、使用代码Demo在线调整 在线示例-Layui<script>layui.config({ version: '1629677917965' //为了更新 js 缓存，可忽略});.原创 2021-09-09 15:34:28 · 4783 阅读 · 4 评论 -
Layui 数据表格开启合计行
一、使用方式二、使用代码三、效果截图一、使用方式1、在表格 [ 基础参数 ] 上增加：totalRow: true,，请参考文档 >>>数据表格基础参数一览表2、在表格 [ 表头参数 cols ] 上增加：totalRow: true 或者 totalRow: '{{ d.TOTAL_NUMS }} 单位(分/秒/罐)' 或者 totalRow: '{{ parseInt(d.TOTAL_NUMS) }}' 请参考文档 >>>数据表格表头参数一览表二、使用代.原创 2021-09-06 09:41:48 · 2596 阅读 · 5 评论 -
Layui layer.open 弹窗 关闭按钮不见了？
一、问题场景二、问题分析三、问题定位四、解决办法五、问题重现1、没问题的2、有问题的3、总结一、问题场景消息存 message表，点击 详情，弹出 layer.open 框查看消息详情，大部分是正常的，但是有的 × 不见了。二、问题分析1、首先排除 layui.open写错的问题，因为大部分是对的，如果写错了，应该全都没有 × 才对2、那就只有弹出内容可能有问题了三、问题定位去数据表看，果然由于数据太长，我的换行标签 <br/> 只存到了 <br四、解决办法.原创 2021-07-31 11:06:39 · 3494 阅读 · 0 评论 -
Layui 数据表格：用户个性化定制列（拖拽，隐藏）
一、前言二、大致思路三、数据表设计四、后端实现1、用户进入页面时，获取用户的个性化设置2、用户点击工具栏时，请求接口，保存数据到数据表五、前端实现1、打开表格的列显示2、拖拽列3、进入页面，表格列加载处理4、点击 筛选列，数据保存到数据表六、具体操作一、前言大致效果是：当数据表格列太多时，用户只需要展示自己需要看到的比较重要的列，并且列支持拖拽。用户下次登录时，看到的是上次保存的数据。二、大致思路1、要实现用户个性化列，数据表是需要的，用于记录用户自定义的列2、需要自定义显示、隐藏列，数据.原创 2021-07-24 17:02:56 · 1769 阅读 · 6 评论 -
Layer 提示框tips使用（批量提示）
一、效果二、部分代码一、效果基本使用，请前往 >>>Layer 提示框tips使用二、部分代码><div class="time-tips" id="two">星期二</div><div class="time-tips" id="three">星期三</div><div class="time-tips" id="four">星期四</div><div class="time-ti.原创 2021-06-09 17:47:18 · 1103 阅读 · 0 评论 -
layui 时间选择器 laydate 设置了默认值时 无法清空
一、场景二、部分代码一、场景我们给时间选择器默认时间时，清除 操作不能清空数据，在done中加上下面几行即可：,done: function (data) { this.value = data; this.elem.val(data);}二、部分代码<div class="layui-inline"> <input class="layui-input" type="text" id="create_date" name="create_tim.原创 2021-06-09 16:00:52 · 2767 阅读 · 0 评论 -
Layui 表格table自定义每一列的样式
一、效果二、代码三、说明一、效果二、代码let tableIns = table.render({ elem: '#id-name' ,url: '/././.' ,cols: [[ ... ,{field: 'income', title: '收入金额', width:100,style: 'color:#1E90FF;'} ,{field: 'outcome', title: '支出金额', width:100, styl.原创 2021-05-28 11:10:31 · 1535 阅读 · 0 评论 -
Layui layui-soul-able 组件 表格列进行拖拽
一、功能介绍二、插件获取三、简单使用一、功能介绍表头筛选、自定义条件（支持前端筛选、后台筛选）拖动列调整顺序、隐藏显示列excel导出（根据筛选条件和列顺序导出）子表（表中表、无限层级、子表同样支持前3个功能）拖动行右击快捷菜单合计栏支持固定列双击自适应列宽右侧固定列 列宽拖动改到单元格左侧固定列支持滚动二、插件获取layui-soul-table说明文档githubgitee三、简单使用这里只使用列拖拽的效果，只需用到 https://github.com/y.原创 2021-05-22 17:41:32 · 2849 阅读 · 1 评论 -
Layui中的table中toolbar自定义过程
一、3个都显示1、图片2、代码二、自定义显示[筛选列-filter]1、图片2、代码三、工具栏监听1、监听筛选列、导出列、打印列2、监听自定义按钮四、参考地址一、3个都显示1、图片2、代码table.render({ ... ,toolbar: true //开启工具栏 ...});//或table.render({ ... ,toolbar:'default' //开启工具栏 ...});二、自定义显示[筛选列-filter]1.原创 2021-05-22 17:26:41 · 4449 阅读 · 0 评论 -
Layui Ajax请求时加上 load 加载效果
一、使用到的方法二、代码一、使用到的方法beforeSend：当一个Ajax请求开始时触发layer.load()：打开layui加载效果layer.closeAll()：关闭所有弹层layer.close(index)：仅关闭当前弹层二、代码let tableIns = table.render({...});layer.confirm('确定取消吗？', function(index) { $.ajax({ url: '/././', ty.原创 2021-05-21 09:38:31 · 3346 阅读 · 0 评论 -
Layui 数据表格table 重载reload 保留上次where条件的问题
一、文档地址二、内容1、修改前部分代码2、解决方法（90%是这种情况）3、其他可能解决的办法一、文档地址导航：Layui官网 -> 文档 -> 数据表格 -> 表格重载，请移步文档地址 >>>二、内容1、修改前部分代码代码<script> let tableId = 'tableDemo'; let tableIns = table.render({ //其它参数省略 ,elem: '#' + tableI.原创 2021-05-17 17:44:34 · 2313 阅读 · 0 评论 -
Layui在表格中无法显示进度条（layui-progress）的值
一、如图二、解决方法三、Layui进度条官方文档一、如图二、解决方法1、引入 element2、在table.render的done中加入element.render('progress');即可<script> layui.use(['table', 'element'], function () { let $ = layui.$, table = layui.table, element = layui.原创 2021-04-15 14:21:32 · 2213 阅读 · 5 评论 -
Layui判断Tab栏是否打开，查找Tab栏中的元素
一、场景二、Tab栏是否打开1、截图2、判断1、判断 [ 商品管理 ] 标签是否打开了2、判断当前标签页是否是 [ 订单管理 ]三、查找Tab栏中的元素1、查找订单数据表格2、查找ID为99的订单行数据3、修改订单ID为99这一行的其他列的数据4、注意一、场景很多时候，我们需要知道某一个标签页是否打开，如果打开了，则需要对该标签里的内容进行操作二、Tab栏是否打开1、截图2、判断1、判断 [ 商品管理 ] 标签是否打开了let haveGoodsTab = $('#LAY_app_ta.原创 2021-04-15 13:36:08 · 1160 阅读 · 0 评论 -
Layer数据表格监听排序切换
一、场景二、使用1、指定Elem元素重载数据表格2、使用表对象重载数据表格3、两者的区别三、注意事项一、场景根据表格上的某个字段排序，相信这个场景经常用到，Layui也是支持的。说白了就是【表格重载：1-自动化渲染的重载；2-方法级渲染的重载】(https://www.layui.com/doc/modules/table.html#reload)，我们需要传 排序字段、排序方式 给后台Layui官方文档 - 数据表格监听排序切换二、使用1、指定Elem元素重载数据表格使用默认的方式.原创 2020-12-21 17:18:27 · 1248 阅读 · 2 评论 -
Layui第三方扩展LAY_EXCEL自定义导出数据类型
一、前言二、内容1、文档2、思路三、代码一、前言LAY_EXCEL默认导出的数据都是文本数据。Layui第三方扩展LAY_EXCEL导出数据表格的数据我们需要自定义导出的数据类型二、内容1、文档函数列表/导出相关函数[ 回调方式 ]口诀：左新右旧可以用于排序、重命名字段、字段过滤、自定义列、批量渲染样式，比如我希望 range 由 start end 聚合并以 ~ 分割；修改 score 为原有值的 10倍，并且 username 字段重命名为 name，保留 sex 和 c.原创 2020-10-27 15:46:54 · 2114 阅读 · 1 评论 -
Layui第三方扩展LAY_EXCEL导出数据表格的数据
一、前言二、使用 LAY_EXCEL1、搜索2、使用3、快速开始的内容4、使用5、Layui下载 与 LAY_EXCEL下载 的区别一、前言由于layui自带的数据表格导出excel存在兼容性问题：导出的表格不能修改内容，提示如下：选择是之后，关闭文件，再次打开，还是修改前的内容。Layui 数据表格导出数据二、使用 LAY_EXCEL1、搜索百度搜索关键字layui第三方组件，选择网址为 https://fly.layui.com/extend/，进入到 layui 组件页面输入e.原创 2020-10-21 16:02:58 · 2873 阅读 · 0 评论 -
Layer/jquery获取父窗口的元素
一、描述二、分析三、参考一、描述如图，我们要在 消息中心 选项卡中 改变 消息提示框（铃铛）旁边的未读消息数量。二、分析未读数量 html 代码，参考地址 Layui官方文档 - 页面元素 - 徽章<!-- 未读消息数 --><span class="layui-badge" style="display: none" id="not-read-msg-count"></span>由于 消息提示框（铃铛图标）属于header ，消息中心选项卡 .原创 2020-10-13 17:57:42 · 1899 阅读 · 0 评论 -
解决Layui表格需表头固定悬浮的问题
一、描述二、解决一、描述当表格内容过多：表头离开页面可视范围时，把表头固定悬浮在上面，如下图所示：[ 修改前 ][ 修改后 ]二、解决思路：问题的关键是如何知道表头是否超出可视范围，首先我们需要知道表头到文档顶部的距离，这个距离是不会变的（除非操控DOM）,然后监听滚动条滚动的距离。如果前者减去后者小于0，则表示离开了可视范围。先在Layui表格渲染完成的回调函数里写：done:function(res, curr, count){ let headerTop = $('.lay.转载 2020-09-24 16:24:05 · 6626 阅读 · 10 评论 -
Layui表格刷新（重载）
一、表格刷新1、表格容器定义2、添加、编辑、删除 刷新1）、刷新时不保留搜索框的搜索信息2）、刷新时保留搜索框的搜索信息二、搜索按钮刷新1、搜索按钮2、刷新方式三、官方文档一、表格刷新1、表格容器定义<table id="LAY-user-table" lay-filter="LAY-user-table"></table>2、添加、编辑、删除 刷新1）、刷新时不保留搜索框的搜索信息表格初始化table.render({ elem: '#LAY-user.原创 2020-08-24 11:29:45 · 28572 阅读 · 2 评论 -
Layui选项卡Tab和Layui模板laytpl冲突问题
一、介绍二、templet - 自定义列模板的 3 种方式1、方式一：绑定模版选择器。2、函数转义。自 layui 2.2.5 开始，templet 开始支持函数形式，函数返回一个参数 d，包含接口返回的所有字段和数据。如下所示：3、方式三：直接赋值模版字符。事实上，templet 也可以直接是一段 html 内容，如：三、第四种方法（解决Layui选项卡Tab和Layui模板laytpl冲突问题）一、介绍在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果你想对某列的单.原创 2020-08-24 10:30:55 · 934 阅读 · 0 评论 -
Layer表格汇总（所有）数据根据配置动态显示
目录一、描述二、环境三、讲解1、汇总数据计算2、页面处理四、代码1、PHP根据动态配置返回汇总数据2、页面处理1、把$config处理成前端需要的格式2、把值`$result`传到页面3、html中动态显示标签4、赋值一、描述看标题大家可能云里雾里，这里解释下：就是一个页面有一个表格（分页的），表格上面有一行，是对表格金额字段的汇总（所有数据汇总，不是汇总当前页），但是这个金额的类型是不固定的（从配置读取），未来还会增加金额类型。二、环境操作系统 Win10Layui版本 2.4.5查看L原创 2020-07-03 17:50:31 · 920 阅读 · 0 评论 -
Layer表格列根据配置动态显示
目录一、环境二、讲解1、需要修改的地方三、代码1、配置的值（可变的）2、PHP动态处理每一列数据3、动态追加layui表格的列1、先处理下配置$config的格式2、已经处理好了值，把值传到页面，页面处理$result1）、把值传到页面2）、页面拼接cols字段一、环境操作系统 Win10Layui版本 2.4.5查看Layui版本：alert(layui.v);PHP版本 7.1.33二、讲解1、需要修改的地方1、需要PHP动态处理每一列的数据2、需要动态拼接表格的列，即 tabl原创 2020-07-03 16:19:35 · 1069 阅读 · 0 评论 -
tableMerge 表格列自动合并
目录一、转载地址二、转载内容1、效果2、相关代码1）、引入自定义模块 tableMerge.js2）、表格渲染3）、tableMerge.js4）、待渲染的 json数据一、转载地址tableMerge 表格列自动合并 去看看在线demo： http://yelog.org/layui-table-merge/github地址： https://github.com/yelog/layui-table-merge二、转载内容1、效果合并后表格原始表格2、相关代码1）、引入自定转载 2020-06-05 15:18:21 · 1574 阅读 · 0 评论 -
Layer 提示框tips使用
Layer 提示框tips使用一、相关参数：1、tips - tips方向和颜色 tips - tips方向和颜色 类型：Number/Array，默认：2 tips层的私有参数。支持上右下左四个方向，通...原创 2020-04-16 13:02:55 · 5410 阅读 · 0 评论 -
Layer动态设置每一行的背景色
Layer动态设置每一行的背景色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tit...原创 2020-03-14 17:42:19 · 646 阅读 · 0 评论 -
Layui 中 formSelects 的使用
Layui 中 formSelects 的使用1、下载： 下载地址：https://github.com/hnzzmsf/layui-formSelects2、引入： //引入formSelects.css <lin...转载 2020-02-21 18:00:34 · 10762 阅读 · 0 评论