vartableObj=table.render({id:'list_table',elem:'#list_table',url:'',align:"center",cols:[[//表头{type:'checkbox'},{type:'numbers',title:'序号',width:80},{field:'lock',title:'链接',align:'center',templet:function(d){return'<ahref="javascript:;"data-clipboard-text=""class="font-primary"lay-event="share">分享</a>';},unresize:true,align:'center'}]]});table.on('tool(mainList)',function(obj){vardata=obj.data;varlayEvent=obj.event;if(layEvent==='share'){$(".font-primary").attr("data-clipboard-text"...

样板图：html部分<divclass="layui-form-item"><labelclass="layui-form-label">路线</label><divclass="layui-input-block"id="last"><divclass="layui-input-inline">{emptyname="$ways"}<divclass="layui-form-item"><divclass="layui-input-inline"><inputtype="text"name="ways[]"placeholder="请输入"autocomplete="off"class="form-control"style="width:200%;"></div><divclass="layui-input-block"style="margin-left:480px"><buttonid="add"type="button"class="layui-btn...

先看一下最终效果图：1、css要设置行高为自动<styletype="text/css">.layui-table-cell{height:auto;}</style>2、html代码，使用templet模板：<tableclass="layui-table"lay-data="{url:'{:url("@zone/data")}',page:true,id:'data',limit:30"lay-filter="data"><thead><tr><thlay-data="{field:'id',width:50,align:'center'}">ID</th><thlay-data="{field:'name',width:120,align:'center'}">分区名称</th><thlay-data="{field:'scale',width:100,align:'center'}">分区比例</th><thlay-data="{field:...

首先，select一定要放在<formclass="layui-form"></form>里面然后，加监听<selectid="id"lay-filter="testId"></select>，这里的testId就是监听的id最后，页面加载完执行监听1layui.use(['form'],function(){2varform=layui.form;34form.on('select(testId)',function(data){5layui.layer.msg(data.value);//得到被选中的值6layui.layer.msg(data.elem);//得到select原始DOM对象7})8})转载：https://www.cnblogs.com/xiaostudy/p/11493727.html...

两个按钮放在<script>中<scripttype="text/html"id="toolbarDemo"><divclass="layui-btn-containerdemoTable"><buttonclass="layui-btnlayui-btn-sm"lay-event="add"><iclass="layui-iconlayui-icon-add-circle-fine"style="font-size:20px;font-weight:bold"></i>新增班级</button><buttonclass="layui-btnlayui-btn-smlayui-btn-danger"lay-event="batchdel"data-type="getCheckData"><iclass="layui-iconlayui-icon-delete"style="font-size:20px;"></i>批量删除</button></div...

html代码:<divclass="layui-form-item"><labelclass="layui-form-label">上传照片</label><divclass="layui-input-inlineuploadHeadImage"><divclass="layui-upload-drag"id="headImg"><iclass="layui-icon"></i><p>点击上传图片，或将图片拖拽到此处</p></div></div>预览图：<divclass="layui-upload-list"id="demo2"></div><inputtype="text"id="imgUrls"name="imgUrls"style="display:none;"class="layui-input"></div>Js代码：layui.use(["jquery","upload","form","l...

本文章向大家介绍layui获取树形菜单所有选中的值，主要包括layui获取树形菜单所有选中的值使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。layui.use(['form','layedit','laydate','tree','util'],function(){varform=layui.form,layer=layui.layer,tree=layui.tree,util=layui.util;//开启复选框tree.render({elem:'#test7',data:getData(),showCheckbox:true,id:'id'//,oncheck:function(obj){//console.log(obj.data);//得到当前点击的节点数据//console.log(obj.checked);//得到当前节点的展开状态：open、close、normal//console.log(obj.elem);//得到当前节点元素//}});//监听提交form.on('submit(form_commit)',fun...

需求：点击按钮->弹出iframe窗体->在iframe中的列表中选区需要的用户条目->确认并关闭窗体->在父级窗体中显示刚才选取的用户（刷新）。layer.open({type:2//此处以iframe举例,title:'名师列表',area:['800px','600px'],shade:0,maxmin:true,offset:'auto'//显示坐标-auto居中,content:"{:url('admin/trainerlist')}",btn:['关闭'],yes:function(){layer.closeAll();//$(that).click();},zIndex:layer.zIndex//重点1,success:function(layero){layer.setTop(layero);//重点2},end:function(){window.location.reload();}});关键点在与end：function.....,用window.location.reload();来刷新页面。转载：https://blog.csdn.n...

<liclass="layui-nav-item  layui-nav-itemed">在li元素里去掉这个layui-nav-itemed的属性就可以做到刷新的时候不展开，想默认展开哪一个，加上这个属性就可以了作者：老先森_链接：https://www.jianshu.com/p/8acea5241acc来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。...

最近写项目中需要用到LayUI富文本编辑器，其他地方都挺好，唯独上传图片时，要不就是上传完成后回显404，要不就是访问时404（访问时我是新打开的一个页面），返回路径一直有问题，之后把返回的路径改成绝对路径就可以。效果图如下：    先添加上传图片接口，layui会自动传递参数，后台直接写对应的上传方法就行了。  varlayedit=layui.layedit;layedit.set({//设置图片接口uploadImage:{url:'layUITextarea/upload',//接口urltype:'post'}});后台上传完成后需要返回四个参数，layui自定义接收显示（不返回图片无法显示）layui前台接收返回的数据格式为： （后台一定要按照格式数据返回，否则会报错）{   "code":0,   //0表示成功，其他表示失败   "msg":"",    //提示信息，//...

最近写项目中需要用到LayUI富文本编辑器，提交时发现富文本编辑器中内容是空的，查了很多资料才发现，LayUI在渲染富文本域时，是在下面插入的样式代码。我们页面上定义的是一个textarea标签，之后用JS渲染的。我们获取的内容是textarea中内容，富文本域中的内容和textarea中的内容不是自动同步的，所以我们需要在提交前把内容同步一下。   form表单提交：首先定义文本域和提交按钮  提交时把富文本域中的内容与textarea标签同步一下。  ajax提交ajax提交form表单是一样的提交部分代码，先绑定按钮，同步文本内容，在发送post请求提交：注意：submit(formSubmit)中的formSubmit为提交按钮的lay-filter值。data.field可以获取到form表单中的数据。返回false是阻止form提交后，在进行form表单提交刷新页面。form.on("submit(formSubmit)",function(data){console.log(data.field);$....

<divclass="layui-layoutlayui-layout-admin"style="padding-left:20px;"><divclass="layui-row"style="margin-top:20px;">//搜索开始<formclass="layui-form"action=""onsubmit="returnfalse;"><divclass="demoTable"><divclass="layui-form-item"><divclass="layui-input-inline"><inputtype="number"id="merchant_id"name="merchant_id"placeholder="商铺ID"autocomplete="off"class="layui-input"></div><divclass="layui-input-inline"><selectname="status"id="status"lay-veri...

ayui使用官方的表单模块form.on('submit(sub)',function(){})提交，使用ajax请求向后台请求一个执行结果，根据结果进行处理，出现回调无法执行，并且页面出现了刷新之前也遇到过这个问题，直接使用将form标签修改成了div，通过jquery为提交按钮添加点击事件，而不用submit提交表单。今天在为毕设添加修改密码的功能的时候，再次遇到了这个问题，刚好有点空闲，决定找出真正的原因。首先，debug服务端逻辑，发现能正常取值，返回值也是正常之后，检查ajax请求的dataType是没问题的，我在服务端返回了一个字符串，我也指定了text属性。百度（面向百度编程）之后发现原因是当button的type为submit的使用，页面会自动刷新，而我们并不希望他刷新。参考链接：https://blog.csdn.net/laukitto/article/details/69230348既然知道了原因，那么问题就好解决了，只要在submit方法的最后添加个returnfalse就解决了下面是请求的JS代码，最后一行添加returnfalse问题解决form.on('s...

    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>多图上传</title><linkrel="stylesheet"href="__PUBLIC_ADMIN/layui/src/css/layui.css"><scriptsrc="__PUBLIC_ADMIN/layui/src/layui.js"></script><scriptsrc="__PUBLIC_ADMIN/js/jquery-3.3.1.js"></script><style>.layui-upload-img{width:90px;height:90px;margin:0;}.pic-more{width:100%;left;margin:10px0px0px0px;}.pic-moreli{width:90px;float:left;margin-rig...

公共css代码<style>.layui-upload-img{width:90px;height:90px;margin:0;}.pic-more{width:100%;left;margin:10px0px0px0px;}.pic-moreli{width:90px;float:left;margin-right:5px;}.pic-moreli.layui-input{display:initial;}.pic-morelia{position:absolute;top:0;display:block;}.pic-moreliai{font-size:24px;background-color:#008800;}#slide-pc-priview.item_imgimg{width:90px;height:90px;}#slide-pc-priviewli{position:relative;}#slide-pc-priviewli.operate{color:#000;display:none;}#slide-pc-priviewli.toleft{position...