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

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

2021-09-12

在使用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

421 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="请

Layui 如何使用tab选项卡

2021-05-14

518 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>订单管理</

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

2021-05-04

405 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="

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

2021-04-30

423 0

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

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

2020-12-23

733 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

931 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

1440 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

1309 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

2748 0

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

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

2020-08-25

1931 0

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

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

2020-02-11

1390 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)