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

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

2021-06-11

效果展示：在使用layui框架的时候，我们有时候需要设置文本颜色，比如标题等，我们会设置一个字段来存储标题颜色，这回就可以使用到Layui自带的颜色选择器了，使用方法如下：html代码部分：颜色 js代码部分： layui.use(['form','layer','colorpicker'],function(){ varform=layui.form, layer=layui.layer, colorpicker=layui.colorpicker, $=layui.$; //颜色 colorpicker.render({ elem:'#test-form' ,color:'#626061' ,done:function(color){ $('#test-form-input').val(color); } }); });

Layui 如何使用tab选项卡

2021-05-14

282 0

layui选项卡通过 element模块的监听tab事件来进行切换操作，元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素，如你的页面存在一个 Tab元素块，那么element模块会自动赋予她该有的功能。例子：网站设置商品管理订单管理内容1 内容2 内容3 js代码：引入elementlayui.use('element',function(){ varelement=layui.element; //一些事件触发 element.on('tab(demo)',function(data){ console.log(data); }); });

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

2021-05-04

207 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，如下图所示步骤二、引入相关文件：步骤三、使用编辑器 layui.use(['layedit','layer','jquery'],function(){ varlayedit=layui.layedit; layedit.set({ //暴露layupload参数设置接口--详细查看layupload参数说明 uploadImage:{ url:'{{route("ladmin.article.upload")}}', accept:'image', acceptMime:'image/*', exts:'jpg|png|gif|bmp|jpeg', size:'10240' } ,uploadVideo:{ url:'{{route("ladmin.article.upload")}}', accept:'video', acceptMime:'video/*', exts:'mp4|flv|avi|rm|rmvb', size:'20480' } //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作， //传递参数： //图片：imgpath--图片路径 //视频：filepath--视频路径imgpath--封面路径 ,calldel:{ url:'/Attachment/DeleteFile' } //开发者模式--默认为false ,devmode:true //插入代码设置 ,codeConfig:{ hide:true,//是否显示编码语言选择框 default:'javascript'//hide为true时的默认语言格式 } ,tool:[ 'html','code','strong','italic','underline','del','addhr','|','fontFomatt','colorpicker','face' ,'|','left','center','right','|','link','unlink','image_alt','video','anchors' ,'|','fullScreen' ] ,height:'400px' }); varieditor=layedit.build('layeditDemo'); }); 注意这里图片上传接口和视频删除接口，以及图片删除接口layui富文本编辑器layedit同步编辑器内容到textarea1、给textarea绑定lay-verify="art_content"，然后在form的表单自定义验证中加入如下代码即可2、同步内容varieditor=layedit.build('layeditDemo'); //处理同步问题 form.verify({ art_content:function(value){ returnlayedit.sync(ieditor); } });这里用到官方的layedit.sync(index)，用于同步编辑器内容到textarea（一般用于异步提交）参数 index：即var ieditor = layedit.build('layeditDemo');该方法返回的索引

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

2021-04-30

203 0

本插件基于layui，根据cropper修改的图片截取（剪裁）上传插件，适用于头像等图片上传。后端接口代码编写采用的PHP框架laravel8写的。也可以改成其他的。官方文档下载地址：https://fly.layui.com/extend/croppers/#doc本站下载地址：https://qiniu.tpxhm.top/code/cropper.zip 一、官方文章存在坑，首先先在这里先把坑填了。第一个：必须修改croppers.js中的css和base路径，改成你的项目具体路径第二个：后端接口返回必须和插件一致，否则无法正确保存更改二、最后，完成上面配置后，我们就可以来使用这个上传裁剪了第一种：上传并截图前端html部分代码管理员头像上传图片前端js部分代码layui.config({ base:'{{asset(__ADMIN__)}}/lib/jq-module/cropper/'//layui自定义layui组件目录 }).use(['form','croppers'],function(){ var$=layui.jquery ,form=layui.form ,croppers=layui.croppers ,layer=layui.layer; //创建一个头像上传组件 croppers.render({ elem:'#test1' ,saveW:150//保存宽度 ,saveH:150 ,mark:1/1//选取比例 ,area:'900px'//弹窗宽度 ,url:"{{route("ladmin.defend.config_upload")}}"//图片上传接口返回和（layui的upload模块）返回的JOSN一样 ,done:function(url){//上传完毕回调 console.log(url) $('#demo1').attr('src',url); $('#demo1').css('display','block'); $('#img111').val(url); $('#test1').attr('data-src',url);//成功返回路径存到数据库 } }); });第二种：修改图片并裁剪前端部分html代码头像修改图片头像的尺寸限定150x150px,大小在50kb以内前端部分js代码layui.config({ base:'{{asset(__ADMIN__)}}/lib/jq-module/cropper/'//layui自定义layui组件目录 }).use(['form','croppers'],function(){ var$=layui.jquery ,form=layui.form ,croppers=layui.croppers ,layer=layui.layer; //创建一个头像上传组件 croppers.render({ elem:'#test1' ,saveW:150//保存宽度 ,saveH:150 ,mark:1/1//选取比例 ,area:'900px'//弹窗宽度 ,url:"{{route("ladmin.defend.config_upload")}}"//图片上传接口返回和（layui的upload模块）返回的JOSN一样 ,done:function(url){//上传完毕回调 console.log(url) $("#inputimgurl").val(url); $("#srcimgurl").attr('src',url); } }); });最终效果左边为原始图片，右边为裁剪后的图片

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

2020-12-23

417 0

layui自带了layedit富文本编辑器，我们在使用过程中有时候不需要全部工具，或者想自定义工具栏，该如何弄呢？以下方法教大家自定义自己的layedit编辑器。步骤1：定义存放编辑器的盒子小程序内容 {php}if(isset($sys_config->min_content)!='')echo$sys_config->min_content;{/php} 步骤2：实例化layedit layui.use(['layedit','form'],function(){ varform=layui.form ,layer=layui.layer ,$=layui.$; varlayedit=layui.layedit; layedit.set({ //暴露layupload参数设置接口--详细查看layupload参数说明 uploadImage:{ url:'/Attachment/LayUploadFile', accept:'image', acceptMime:'image/*', exts:'jpg|png|gif|bmp|jpeg', size:'10240' } ,uploadVideo:{ url:'/Attachment/LayUploadFile', accept:'video', acceptMime:'video/*', exts:'mp4|flv|avi|rm|rmvb', size:'20480' } //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作， //传递参数： //图片：imgpath--图片路径 //视频：filepath--视频路径imgpath--封面路径 ,calldel:{ url:'/Attachment/DeleteFile' } //开发者模式--默认为false ,devmode:true //插入代码设置 ,codeConfig:{ hide:true,//是否显示编码语言选择框 default:'javascript'//hide为true时的默认语言格式 } ,tool:[ 'html','code','strong','italic','underline','del','addhr','|','fontFomatt','colorpicker','face' ,'|','left','center','right','|','link','unlink','images','image_alt','video','anchors' ,'|','table','fullScreen'] ,height:'90%' }); varlayedit=layedit.build('content'); });

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

2020-09-22

681 0

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

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

2020-09-03

1107 0

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

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

2020-09-03

912 0

我们有时在开发项目是需要用到树形接口，这时我们可以 Layui 的树形表格treetable插件。参数说明：参数类型是否必填描述treeColIndexint是树形图标显示在第几列treeSpidobject是最上级的父级idtreeIdNamestring否id字段的名称treePidNamestring否pid字段的名称treeDefaultCloseboolean否是否默认折叠treeLinkageboolean否父级展开时是否自动展开所有子级HTML代码：添加删除修改删除 Js代码： layui.use(['table','treetable'],function(){ var$=layui.jquery; vartable=layui.table; vartreetable=layui.treetable; //渲染表格 layer.load(2); treetable.render({ toolbar:'#toolbarDemo', treeColIndex:1, treeSpid:-1, treeIdName:'id', treePidName:'pid', elem:'#munu-table', url:'{:url("union/Permission/getPermission")}', //url:'__STATIC__/union/api/menus.json', page:false, treeDefaultClose:true, cols:[[ {type:'numbers'}, {field:'name',minWidth:200,title:'权限名称'}, {field:'ac',title:'方法'}, {field:'co',title:'控制器'}, {field:'url',title:'菜单url'}, {field:'ico',title:'图标'}, {field:'sort',width:80,align:'center',title:'排序号'}, { field:'isMenu',width:80,align:'center',templet:function(d){ if(d.is_menu==1){ return'按钮'; }elseif(d.is_menu==2){ return'其他'; }else{ return'菜单'; } },title:'类型' }, {templet:'#auth-state',width:120,align:'center',title:'操作'} ]], done:function(){ layer.closeAll('loading'); } }); $('#btn-expand').click(function(){ treetable.expandAll('#munu-table'); }); $('#btn-fold').click(function(){ treetable.foldAll('#munu-table'); }); //监听工具条 table.on('tool(munu-table)',function(obj){ vardata=obj.data; varlayEvent=obj.event; if(layEvent==='del'){ layer.msg('删除'+data.id); }elseif(layEvent==='edit'){ layer.msg('修改'+data.id); } }); }); Json结构数据格式：{ "code":0, "msg":"", "count":19, "data":[ { "authorityId":1, "authorityName":"系统管理", "orderNumber":1, "menuUrl":null, "menuIcon":"layui-icon-set", "createTime":"2018/06/2911:05:41", "authority":null, "checked":0, "updateTime":"2018/07/1309:13:42", "isMenu":0, "parentId":-1 }, { "authorityId":2, "authorityName":"用户管理", "orderNumber":2, "menuUrl":"system/user", "menuIcon":null, "createTime":"2018/06/2911:05:41", "authority":null, "checked":0, "updateTime":"2018/07/1309:13:42", "isMenu":0, "parentId":1 }, ] }

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

2020-08-25

2131 0

table 模块是Layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。我们在使用过程中，如果需要关闭Layui表格table拖拽列宽、禁用拖拽列宽，可以用到unresize参数：是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。实例：这里设置为unresize: false,即可.layui.use(['form','table'],function(){ var$=layui.jquery, form=layui.form, table=layui.table; table.render({ elem:'#currentTableId', url:'', 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:'username',minwidth:80,title:'账号'}, {field:'admin_realname',minwidth:80,title:'姓名'}, {field:'created_at',width:150,title:'管理员级别'}, {field:'created_at',title:'添加时间',width:160,sort:true}, {field:'updated_at',width:160,title:'最近修改',sort:true}, {field:'stop',width:80,title:'状态',sort:true}, {title:'操作',minWidth:150,toolbar:'#currentTableBar',align:"center"} ]], limits:[10,15,20,25,50,100], limit:15, page:true, unresize:false, //skin:'line', response:{ statusName:'code'//规定数据状态的字段名称，默认：code ,statusCode:200//规定成功的状态码，默认：0 ,msgName:'msg'//规定状态信息的字段名称，默认：msg ,countName:'count'//规定数据总数的字段名称，默认：count ,dataName:'data'//规定数据列表的字段名称，默认：data } }); });

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

2020-08-25

1396 0

Layui数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为默认规定的数据格式layui.code{ "code":0, "msg":"", "count":1000, "data":[{},{}] }很多时候，接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：{ "status":0, "message":"", "total":180, "data":{ "item":[{},{}] } }则可以借助 parseData 回调函数将其解析成 table 组件所规定的数据格式table.render({ elem:'#demp' ,url:'' ,parseData:function(res){//res即为原始返回的数据 return{ "code":res.status,//解析接口状态 "msg":res.message,//解析提示文本 "count":res.total,//解析数据长度 "data":res.data.item//解析数据列表 }; } //,……//其他参数 });还可以借助 response 参数来重新设定返回的数据格式，如：table.render({ elem:'#demp' ,url:'' ,response:{ statusName:'status'//规定数据状态的字段名称，默认：code ,statusCode:200//规定成功的状态码，默认：0 ,msgName:'hint'//规定状态信息的字段名称，默认：msg ,countName:'total'//规定数据总数的字段名称，默认：count ,dataName:'rows'//规定数据列表的字段名称，默认：data } //,……//其他参数 });

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

2020-02-11

1141 0

layui下拉选择获取值，渲染赋值html: 选择分类衣服鞋子添加：lay-filter="chang_seleced"下拉获取值：form.on('select(chang_seleced)',function(data){ //获取select的值 console.log(data.value) });2、渲染，赋值：html代码： js代码：form.render('select');$('#type').html('222222'); form.render('select');