layui
Khun_HWJ
这个作者很懒,什么都没留下…
展开
-
子页面iframe 操作父页面的元素
如图:需求:当在子iframe中增删改的操作时,父页面的导航栏要实时变化。父页面的导航栏通过请求接口 来layui的模板引擎动态渲染的父页面的动态模板 ↓ ↓ ↓父页面装载的 ↓ ↓ ↓一般情况下的js 模板引擎用法但这里是子页面的操作来改变父页面的内容所以需要找到父页面的相关元素所以 由[data-role="nav"]变为 $("[data-role='nav']", window.parent.document)#navigation变为 $("#navigatio原创 2021-07-20 15:12:07 · 627 阅读 · 0 评论 -
根据后端返回的文件流下载文件
//云附件 文件流链接function clouddownloadResources(id,title) { common.showLoading() api_enclosuredetail.clouddownloadResource('',id).then(function(res) { if(res.code == 0){ common.hideLoading(); downloadResource(res.data.url, title) -----文件流链接 }e原创 2021-06-29 11:38:53 · 818 阅读 · 0 评论 -
layui 表格序号累加 翻页序号也累加
比如说一共有57条数据一页显示7条翻页就是从第8条开始参考文档:https://www.cnblogs.com/home-/p/11881005.html原创 2021-06-29 11:33:33 · 272 阅读 · 0 评论 -
2021-05-08
原创 2021-05-08 11:45:42 · 84 阅读 · 0 评论 -
layui radio 隐藏指定值
一是 切换tab的时候要更新状态element.on('tab(tab)', function(data){ form.render();});二是获取checkbox选中的值var roles = [];form.on('checkbox(roless)', function(data){ roles = []; $("[name=roles]:checkbox").each(function(i,v) { if ($(this).prop("checked") == tr..原创 2021-04-28 09:53:55 · 1041 阅读 · 0 评论 -
layui排序箭头
var sortObj = {field:'created_at', type:'desc'}function renderTable() { table.render({ elem: '#test', data: listdata, autoSort: false, initSort: sortObj, //重点 page: false, skin:'nob' });}//order_by 10-returned_at 20-used_at 30-created_原创 2021-03-04 15:58:44 · 813 阅读 · 1 评论 -
layui与cropper裁剪上传图片
//剪裁封装 function cropperbox(clickobj,layerimageid,showimgurl,input,flag,cropperbox){ var file = input.currentTarget.files[0]; if (window.FileReader) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function(e) {/原创 2020-11-24 16:11:07 · 1114 阅读 · 0 评论 -
layui 数据表格请求接口排序 全部数据排序非当前页排序
1、先取消数据表格自带的当前页排序 autoSort: false2、将需要排序的栏加上sort: true,3、数据表格接口数据调整1)这里我定义的字段名是orderby和ordertype,是全局变量,因为未做查询前接口返回的数据是倒序的,所以我这边给ordertype默认为20的字段。2)方法函数传入两个参数function userlist(orderby,ordertype){}4、开始layui自带的sort排序方法监听最初的模板如下:table.on('sort(filt原创 2020-11-17 10:08:40 · 1485 阅读 · 0 评论 -
layui 模板数据里面判断一个对象是否为空 js/jquery判断一个对象是否为空对象
{{# if( Object.keys(item.user_breakage).length == 0 ){ }} <td>无</td> {{# }else{ }} <td>存在<button type="button" class="layui-btn layui-btn-sm">查看</button></td> {{# } }}https://www.原创 2020-11-17 09:51:08 · 2087 阅读 · 0 评论 -
关于layui 数据表格实现鼠标移动到单元格上显示动态数据的方法 多重条件判断 自定义模板【亲测有效】
<script id="status" type="text/html"> {{# if(d.store_service_status == 0){ }} {{# if(d.vip_status == 0){ }} <div style="color:red"><span title="非会员用户" style="display:block;"><i class="tipss" style="background:red;"></i>原创 2020-11-17 09:37:33 · 1360 阅读 · 0 评论 -
【layui】扩展组件xm-select 下拉框带搜索功能 异步请求接口 ajax加载数据 ②
根据地址来回填数据,如果地址栏有参数,那么下拉查询需要回填对应的数据1、地址栏admin/pages/storemanage/scangetbook/scangetbook.html?userid=19&nickname=Undefine2、有地址参数为图一,无地址参数为图二,根据userid来回填值需求:根据地址栏参数来判断下拉数据的回填,当点击查询时,如果下拉框有值就直接走第二步,如果下拉框没有值则提示【请先选择用户】用到的是layui的第三方插件,xm-selectxm-se原创 2020-11-10 15:50:07 · 4099 阅读 · 0 评论 -
layui laydate 选择最大时间为当前日
laydate.render({ elem: '#test1', range: '~', format: 'yyyy-MM-dd', theme: '#1875F0', calendar: true, max: getNowFormatDate()});function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var原创 2020-11-09 10:15:28 · 660 阅读 · 0 评论 -
layui checkbox循环获取选中的值 放到数组里(清空数组)
1、layui checkbox循环获取选中的值 放到数组里$("[name=roles]:checkbox").each(function() { if ($(this).prop("checked") == true) { roles.push($(this).val()); para.roles = roles; }})2、layui checkbox 只要是选中的当中有【社区店管理】就显示【社区店】下拉框var roless =原创 2020-11-09 09:52:53 · 1469 阅读 · 0 评论 -
layui数据表格点击iframe子页面内打开父级页面的新的tab页签【打开新的父级页签:window.parent.layui.element.tabAdd】【亲测有效!】
跳转页面传参数查询 在地址栏中写参数原创 2020-10-12 09:41:30 · 1713 阅读 · 0 评论 -
Layui 数据表格 点击显示对应图片(亲测有效)
就在数据表格中写 done事件方法done:function(res,curr,count){ $('[data-role="previewimg"]').on('click',function(){ var img = "<img src='"+$(this).attr('src')+"'/>"; layer.tips(img, this,{ tips:[2, 'rgba(0,0,0,.2)'], area: ['auto', 'auto'], }); });原创 2020-09-08 11:10:12 · 836 阅读 · 0 评论 -
layui table表格批量删除
//批量删除$(document).on('click', '[data-role="batchdelbtn"]', function() { var checkbox = []; $("[name=selectbooks]:checkbox").each(function(i) { if ($(this).prop("checked") == true) { checkbox.push($(this).val()); //获取值 } }) if (checkbox == '') .原创 2020-09-04 10:32:18 · 485 阅读 · 0 评论 -
layui checkbox 全选与不全选
<form class="layui-form inline-form"> <input type="checkbox" name="all" title="全选" lay-skin="primary" lay-filter="checkboxall"> <button type="button" class="layui-btn layui-btn-sm fontColorbgF65" title="批量删除" data-role="batchdelbtn">&l.原创 2020-09-04 10:30:50 · 702 阅读 · 0 评论 -
layui laydate 时间选择判断 最大时间为当前时间 结束时间不能小于开始时间
var startDate = laydate.render({elem: ‘#test1’,format: ‘yyyy-MM-dd’,max: getNowFormatDate(),done: function(value, date) {if (value != “”) {date.month = date.month - 1;endDate.config.min = date;} else {endDate.config.min = startDate.config.min;}}原创 2020-09-04 10:08:52 · 1861 阅读 · 0 评论 -
layui 弹出框,关闭后刷新,并且停留在当前页面 (亲测有效)
end: function () { $(".layui-laypage-btn").click();//弹出框 关闭后刷新,停留在当前页}原创 2020-06-09 09:56:01 · 1776 阅读 · 0 评论 -
webuploader 上传 到oss图片无法预览(直接选取图片不剪裁版)
由于之前都用剪裁,所以需要将base64转为file文件格式,才能被oss读取到input file上传的正确图片文件格式:对的oss格式错的oss格式否则图片会打不开var imgdata = []//上传图片var indexs;//上传图片$(document).on('change','[data-role="hwUploadimg"]',function(input){ let uploadfile = input.currentTarget.files[0];原创 2020-06-05 17:48:04 · 527 阅读 · 0 评论 -
layui 模板引擎用法小结
{{# if(items.status == '06'){ }} {{# layui.each(items.answerdata, function(idx1, item1){ }} {{# if(item1.type == '01'){ }} <div class="upload-file"> <div class="files"><img s...原创 2020-05-26 12:24:11 · 1911 阅读 · 0 评论 -
关于layui iframe弹出层 父页面与子页面
1、layer弹框父页面调用子页面的方法var minSpeak = layer.open({ type: 2, min: function(){ $('.layui-layer').css({ 'top': 'auto', 'left': 'auto', 'bottom': '27px', 'right': '0' }) }, success: func...原创 2020-05-26 12:13:47 · 3731 阅读 · 2 评论 -
关于layui点击右上角关闭,但关闭失败,弹窗内容出现在下方的问题
在弹出层打开播放器后,在右上角关闭时却又显示在了html中,开始写的是cancel里面发现没效果,后来如下,解决了//微课观看-弹窗播放$(document).on('click','[data-role="video"]',function(){ $('[data-role="videobox"]').show(); swiper3 = new Swiper('.swiper-container3', {noSwiping: true,});//swiper1,不可滑动,并且swiper-sl.原创 2020-05-26 09:54:48 · 688 阅读 · 0 评论 -
layui消息提示不关闭 layer.msg 不关闭
var id=layer.msg('处理中', { icon: 16, shade: 0.4, time:false //取消自动关闭});layer.close(id);//手动关闭原创 2020-05-26 09:53:03 · 2216 阅读 · 0 评论 -
canvas画布中 onmousemove 在layui弹窗中点击获取当前坐标
canvas.onmousemove = function (e) { var x = e.pageX, y =e.pageY;// 得到鼠标的坐标 console.log(e.layerX); }有pageX,有clientX,offsetX,screenX,x,layerX原创 2020-05-26 09:40:29 · 823 阅读 · 0 评论 -
layer.photos相册层添加关闭按钮
开启关闭按钮 , closeBtn: 1layer.photos({ photos:'', closeBtn:1})原创 2020-04-22 15:15:33 · 1954 阅读 · 0 评论 -
layui collapse 折叠面板操作 ajax动态数据
```javascriptelement.on('collapse(analysis)', function(data){ $(this).parent().find('.homework-analysis').empty(); var resid = $(this).attr('data-resid'); var type = $(this).attr('data-type');...原创 2020-04-02 11:15:50 · 3104 阅读 · 2 评论 -
layui 分页自定义文本 将下一页改为下一题(关联切换)
laypage({ cont: 'demo3' ,pages: 100 ,first: 1 ,last: 100 ,prev: '上一题' ,next: '下一题'});原创 2020-03-31 12:57:42 · 1326 阅读 · 0 评论 -
layui弹窗 预览图片、音频、视频、资源文档在线预览
//上传图片-图片预览$(document).on('click','[data-role="prveimg"]',function(){ layer.photos({ photos: '.files', //父元素 shade: .5, anim: 5 });}); //上传视频-视频预览$(document).on('click','.video-preview'...原创 2020-03-31 12:21:20 · 3436 阅读 · 4 评论 -
嵌套layui iframe弹窗的子页面调用父页面里的函数方法(调用方法及关闭页面)
layui.use(… function(){var _tools = {func1: function(){console.log(‘func1’);}}window.tools = _tools;})// 外部调用,如子页面parent.tools.func1();原创 2020-03-31 11:04:45 · 4061 阅读 · 0 评论 -
web端创建直播(layui表单,layui时间选择,简介富文本嵌套iframe,获取iframe里的方法的值,layui列表模板、CheckBox取值checked,数组数字总和)
难点:1、layui开始时间选择(不能小于当前时间天时分秒)2、layui select的选择 (固定数据)3、获取班级列表(判断班级人数给提示、班级列表模板)4、富文本的简介,包含上传图片5、计算时长6、选择时长后,选中班级要变时长,选班级再选时长要变时长。弹出层内容<!-- 创建直播 --><div class="addlivebox" style="d...原创 2020-02-10 11:12:52 · 925 阅读 · 1 评论 -
删除直播列表 下载直播回放的视频
$('[data-role="dellive"]').click(function(){ var _this = $(this); var _id = _this.attr('data-bind'); layer.confirm('确定删除该直播吗?', { btn: ['是的','取消'] //按钮 }, function(){ $.post('/shared/cl...原创 2020-02-10 10:33:03 · 416 阅读 · 0 评论 -
layui按钮点击选择年级学科等信息、模板列表渲染数据、展开与收起、复杂公式转换、全选、初始化数据、批量初始化数据、删除视频、layui表单选择、ajax请求封装方法、加载中动画效果
试题审核用到的知识点:layui、复杂公式、template模板。功能:layui按钮点击选择年级学科等信息、模板列表渲染数据、展开与收起、复杂公式转换、全选、初始化数据、批量初始化数据、删除视频、layui表单选择、ajax请求封装方法、加载中动画效果<?php $version = '66'; ?><!DOCTYPE html><html lang=...原创 2020-01-09 10:54:58 · 440 阅读 · 0 评论 -
layui 删除、批量删除 ajax接口
//删除$(document).on('click','[data-role="deletetestt"]',function(){ tlid = $(this).attr('data-tlid'); let para = { tlid:tlid } removetest(para).then((res) => { if(res.code == 1){ layer.a...原创 2019-10-17 17:14:26 · 1166 阅读 · 0 评论 -
滚动加载ajax翻页分页
//查看详情$(document).on('click','[data-role="detailbtn"]',function(){ var objuuid = $(this).attr('data-objuuid'); $('[data-role="detailtablebox"]').attr('data-addobjuuid',objuuid);//赋值 start= 0; ol...原创 2019-10-17 16:49:11 · 289 阅读 · 0 评论 -
layui 数据表格内容 年级学科模板循环对应显示
模板对应的是所有的数据,但是要一一对应,就需要用userid来判断比较一下,放到一个新数组里//年级学科模板循环function lists(userid){ var getTpl = gradesubjecttemplet.innerHTML, view = document.getElementById('gradesubjecttemplet'); var listarr = [...原创 2019-10-17 11:17:22 · 466 阅读 · 0 评论 -
【layui】扩展组件xm-select 下拉框带搜索功能 异步请求接口 ajax加载数据 ①
效果图需求:点击搜索,输入完回车后请求接口获取下拉列表数据。目前插件是多选的,但要求只能选择一个。后面进行处理。接口部分html部分<div id="addteacher" class="xm-select-demo"></div>js部分只需引入xm-select.js,剩下的就只有渲染了xmSelect.render({ el: '#addteach...原创 2019-10-15 12:13:51 · 20792 阅读 · 3 评论 -
layui checkbox数据循环展示
//教师列表$('[data-role="checkbox"]').empty();function adminquestionteacherTeacherlists(page) { adminquestionteacherTeacherlist({ page: page, subject:subject, grade:grade }).then(res => { t...原创 2019-10-12 17:08:36 · 1341 阅读 · 0 评论 -
layui 下拉加载更多 流加载 加载checkbox
流加载必须要定义一个 新数组 lis ,然后开始循环接口里给的数据 , 然后将数据放到 lis新数组里,设置页数,设置翻页 。然后点击时调用flowTeacherlist();//加载更多//加载更多function flowTeacherlist(){ flow.load({ elem: '#LAY_demo1' //流加载容器 ,scrollElem: '#LAY_demo1'...原创 2019-10-12 17:07:24 · 1323 阅读 · 0 评论 -
layui 内容搜索查询更新列表
//答疑统计function getquestionstats() { myloading(true); getquestionstat({ starttime: $("#starttime").val(), endtime: $("#endtime").val(), grade: grade, subject: subject, teacherid: '' }).th...原创 2019-10-12 16:59:21 · 400 阅读 · 0 评论