layui,layui开发框架,layui系列文章

Layui的layedit富文本编辑器使用方法教程

2024-10-20

layui框架自带的富文本编辑器，简介方便，不需要安装任何插件，以下是使用教程。1、HTML代码;<div class="layui-form-item"> ;;;;<label class="layui-form-label">内容</label> ;;;;;<div class="layui-input-block"> ;;;;;;<textarea name="content" class="layui-textarea" id="content" placeholder="请输入内容" style="display: none;"></textarea> ;;;;</div> ;;</div> 2、js代码：实例化和接受编辑器提交的内容<script> ;;layui.use(['form','layedit'], function () { ;;

Layui实现多图上传预览和删除功能

2024-10-20

926 0

在开发项目时，我们有时需要用到多图上传，比如商品缩列图等，我们可以使用layui自带的多图上传，不需要安装任何插件。效果展示：1、前端HTML部分代码<div class="layui-form-item layui-form-text"> ;;;;<label class="layui-form-label">商品图</label> ;;;;<div class="layui-input-block"> ;;;;;;<button type="button" class="layui-btn" id="test2">多图片上传</button> ;;;;;;<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%"> ;;;;;;;;<d

Layui修改刷新当前页面记录搜索值

2022-12-02

2131 0

在开发项目中，我们需要保存成功之后，刷新父页面，也就是重新加载并保存之前搜索数据，可以使用那面的代码实现1、监听搜索操作，保存到sessionStorage// 监听搜索操作 ;;;;form.on('submit(data-search-btn)', function (data) { ;;;;;;var result = JSON.stringify(data.field); ;;;;;;// layer.alert(result, { ;;;;;;//;;;title: '最终的搜索信息' ;;;;;;// }); ;;;;;;// 将电话，卡号，姓名保存到sessionStorage ;;;;;;;sessionStorage.setItem('telValue', JSON.stringify(data.field.tel)); ;;;;;;;sessionStorage.setItem('cardVa

解决layui框架excel导出长数据科学计数法问题

2022-04-06

2448 0

Layui框架自带的导出excel数据默认导出的数据会以数字格式存放，比较长的数据存放后会经过科学计数法加工，从而导致数据错误解决方法：1、在/lib/layui-v2.5.5/lay/modules/table.js中搜索：d.exportFile2、将d.exportFile这个函数，用下面内容替换掉：;;;;d.exportFile = function (e, t, i) { ;;;;;;;;t = t || d.clearCacheKey(d.cache[e]), i = i || "csv"; ;;;;;;;;var a = c.config[e] || {},;// 分页按钮 ;;;;;;;;;;l = {csv: "text/csv", xls: "application/vnd.ms-excel"}[i], // meta格式 ;;;;;;;;;;n = document.createElement

Layui表格如何实现点击图片预览图片功能

2021-09-12

5616 0

在使用layui框架的时候，我们有时需要放大表格中的图片，可以使用下面的方法来实现。表格部分代码table.render({ ;;;;elem: '#currentTableId', ;;;;url: '{:url("union.customer.getCustomer")}', ;;;;toolbar: '#toolbarDemo', ;;;;defaultToolbar: ['filter', 'exports', 'print', { ;;;;;;title: '提示', ;;;;;;layEvent: 'LAYTABLE_TIPS', ;;;;;;icon: 'layui-icon-tips' ;;;;}], ;;;;cols: [[ ;;;;;;{type: "checkbox", width: 50}, ;;;;;;{field: 'id', width: 80, title: 'ID', sort: true}, ;;;;;;{field: 'cate', width: 100, t

Layui颜色选择器的使用，如何使用layui的颜色选择器

2021-06-11

4079 0

效果展示：在使用layui框架的时候，我们有时候需要设置文本颜色，比如标题等，我们会设置一个字段来存储标题颜色，这回就可以使用到Layui自带的颜色选择器了，使用方法如下：html代码部分：<div;class="layui-form-item"> ;;;;<label;class="layui-form-label;required">颜色</label> ;;;;<div;class="layui-input-inline";style="width:;120px;"> ;;;;;;;;<input;type="text";name="color";value="#626061";placeholder="请选择颜色";class="layui-input";id="test-form-input"> ;;;;</div> ;;;;<

Layui 如何使用tab选项卡

2021-05-14

3510 0

layui;选项卡通过 element模块的监听tab事件来进行切换操作，元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素，如你的页面存在一个 Tab元素块，那么element模块会自动赋予她该有的功能。例子：<div;class="layui-tab";lay-filter="demo"> ;;<ul;class="layui-tab-title"> ;;;;<li;class="layui-this">网站设置</li> ;;;;<li>商品管理</li> ;;;;<li>订单管理</li> ;;</ul> ;;<div;class="layui-

Layui富文本编辑器拓展，增加工具栏

2021-05-04

4185 0

在原有layedit基础上新增1.html源码模式2.全屏3.批量上传图片、插入视频4.字体颜色、背景色设置、段落格式设置5.插入表格6.右键修改图片视频、段落居中格式、删除等功能7.插入水平线hr8.锚点9.插入代码和插入超链接拓展10.插入自定义链接11.简单实现撤销重做下载：https://gitee.com/YuJian11/layedit.git使用方法：步骤一：将下载好的ace.js和layedit.js文件复制到\layui-v2.5.5\lay\modules目录下，并替换layedit.js，如下图所示步骤二、引入相关文件：<script;src="/lib/layui-v2.5.5/lay/modules/ace.js";charset="utf-8"></

Layui结合croppers实现上传图片和裁剪图+踩坑记录

2021-04-30

4501 0

本插件基于layui，根据cropper修改的图片截取（剪裁）上传插件，适用于头像等图片上传。后端接口代码编写采用的PHP框架laravel8写的。也可以改成其他的。插件下载地址：请看图片一、官方文章存在坑，首先先在这里先把坑填了。第一个：必须修改croppers.js中的css和base路径，改成你的项目具体路径第二个：后端接口返回必须和插件一致，否则无法正确保存更改二、最后，完成上面配置后，我们就可以来使用这个上传裁剪了第一种：上传并截图前端html部分代码;<div> <label>管理员头像</label> <div> <div>

layui如何自定义layedit富文本编辑器工具栏

2020-12-23

3312 0

layui自带了layedit富文本编辑器，我们在使用过程中有时候不需要全部工具，或者想自定义工具栏，该如何弄呢？以下方法教大家自定义自己的layedit编辑器。步骤1：定义存放编辑器的盒子<div;class="layui-form-item;layui-form-text"> ;;;;;;;;;<label>小程序内容</label> ;;;;;;;;;<div> ;;;;;;;;;;;;;;;;;;;<textarea;name="min_content";class="layui-textarea;content";id="content";;style="display:none";placeholder="请输入META描述";&

解决session或cookie过期时Layui不跳出iframe框架问题

2020-09-22

5695 0

用过layui都会遇到登录页面问题，如果是session或者cookie过期时，用户还停留在操作页面，这时后端会加判断跳到登录，而layui还是在iframe框架下打开登录页面，而我们需要的是关闭所有页面，并跳到iframe页面，这时可以通过以下代码来实现，在login.html页面加入如下js代码。<script;>; $(document).ready(function;();{;; ;;;;if;(window;!=;top);{;; ;;;;;;;;top.location.href;=;location.href;;; ;;;;};; });; </script>

Layui表格如何显示图片或者图标

2020-09-03

4788 0

Layui如何显示图片或者图标？这个很简单,可以使用 templet 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期格式，图片地址转成图片，图标显示等。显示图片：{{ d.vod_pic }}为图片地址{field:;'article_pic',title:;'封面',width:;100,templet:'<div><img;;src="{{;d.vod_pic;}}";width="100%"></div>';},显示图标：{{ d.icon }}为图标地址;{field:;'icon',title:;'

Layui如何使用折叠表格，以及默认自动折叠

2020-09-03

6551 0

我们有时在开发项目是需要用到树形接口，这时我们可以 Layui 的树形表格treetable插件。参数说明：参数类型是否必填描述treeColIndexint是树形图标显示在第几列treeSpidobject是最上级的父级idtreeIdNamestring否id字段的名称treePidNamestring否pid字段的名称treeDefaultCloseboolean否是否默认折叠treeLinkageboolean否父级展开时是否自动展开所有子级;HTML代码：<div> ;;;;<div> ;;;;;;;;<div> ;;;;;;;;;;;;<script;type="text/html";id="toolbarDemo"> ;;;;;;;;;;;;;;;;<div>

Layui表格table关闭拖拽列宽、禁用拖拽列宽

2020-08-25

7574 0

table 模块是Layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。我们在使用过程中，如果需要关闭Layui表格table拖拽列宽、禁用拖拽列宽，可以用到unresize参数：是否禁用拖拽列宽（默认：false）。默认情况

Layui table表格数据接口返回更改

2020-08-25

5983 0

Layui数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为默认规定的数据格式layui.code{ ;;"code":;0, ;;"msg":;"", ;;"count":;1000, ;;"data":;[{},;{}] }很多时候，接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：{ ;;"status":;0, ;;"message":;"", ;;"total":;180, ;;"data":;{ ;;;;"item":;[{},;{}] ;;} }则可以借助

layui下拉选择获取值，渲染赋值

2020-02-11

4154 0

layui下拉选择获取值，渲染赋值html:<select;name="vod_cid";id="chang_seleced";lay-filter="chang_seleced"> ;;;;<option;value="">选择分类</option> ;;;;<option;value="1">衣服</option> ;;;;<option;value="2">鞋子</option> </select>添加：;lay-filter="chang_seleced"下拉获取值：;form.on('select(chang_seleced)',;function(data){ ;//获取select的值 ;console.log(;data.value)