layui
关注
分享
扫一扫
layui
前端路上迷茫的小鲨鱼
这个作者很懒，什么都没留下…
展开
-
layui步骤条
1.新建文件夹导入代码（里面自己修改了，引用了矢量图，可结合查看）layui.define(['jquery'], function (exports) { 'use strict'; var $ = layui.jquery; var obj = { make: function (data, ele, current) { var html = '' , data_length = data.length , percen原创 2020-09-30 11:49:23 · 3447 阅读 · 4 评论 -
layui使用矢量库图标
1.阿里巴巴图标的图标代码下载到本地解压。2. 在layui项目中创建一个文件夹，放入上面的几个文件，然后再引入iconfont.css文件即可使用：<link rel="stylesheet" href="./plugins/layui/myicon/iconfont.css" type="text/css">可以对iconfont.css进行类名修改使用<i class="iconfont icon-right" style="color: #..原创 2020-09-30 11:38:23 · 570 阅读 · 0 评论 -
js根据不同证件进行校验
layui下拉<div class="layui-form-item"> <label class="layui-form-label">证件类型</label> <div class="layui-input-block"> <select name="documentType" lay-verify="required" lay-filter="idsType"> <option value="">原创 2020-09-09 17:06:08 · 1076 阅读 · 2 评论 -
layui分页时复选框被选中问题
<table class="layui-hide" id="test" lay-filter="demo"></table>layui.use(['form','table'], function(){ var table = layui.table; var form = layui.form;table.render({ elem: '#test' ,url:'/zjzk/expert/listPage' ,request:{ pa..原创 2020-09-02 12:05:10 · 968 阅读 · 0 评论 -
layui图片点击放大
function showMedia(id, type, src) { var idBar = "#" + id; var width = $(idBar).width(); var height = $(idBar).height(); var scaleWH = width / height; var bigH = 500; var bigW = scaleWH * bigH; if (bigW > 900) { bigW .原创 2020-07-14 09:44:29 · 851 阅读 · 0 评论 -
layer弹框content是一个DOM遮罩全屏
因为layui官网说如果弹层的内容content是某个DOM元素的话，要放在body的根节点下。不能放在div里面了。所以如果不在body根目录下的话会导致遮罩遮挡全屏，因为最后生成的遮罩DOM元素的位置是body的子级，所以知道弹层的DOM要和遮罩的DOM 要在同一层。如图： 所以这里再弹层的success的事件里面进行了处理，将遮罩的DOM位置挪动了一下，和弹层DOM元素同一级，代码如下：var ...原创 2020-05-27 12:12:11 · 1834 阅读 · 0 评论 -
layui必填项
加上 required lay-verify="required" autocomplete="off"原创 2020-05-25 20:57:16 · 3567 阅读 · 0 评论 -
layui表格筛选查询
<form class="layui-form" id="searchForm" οnsubmit="return false"> <div class="layui-inline"> <div class="layui-form-item" style="margin:0"> <label class="layui-form-label">机构</label> <div class="lay...原创 2020-05-25 18:02:29 · 3851 阅读 · 0 评论 -
layui查询表格中数据
<form class="layui-form" id="searchForm" onsubmit="return false"> <input type="text" name="searchText" id="searchText" autocomplete="off" class="layui-input"> <button class="layui-btn search-btn inline-block" id="btnSearch">筛选<...原创 2020-05-20 17:23:27 · 1178 阅读 · 0 评论 -
layui数据表格
,{field: 'passUser', title: '职位性质', align:'center', templet: function (res) { if (res.positionType == '1') { return '兼职'; } else{ return '全职'; } ...原创 2020-01-08 16:24:41 · 130 阅读 · 0 评论 -
layui自定义分页
//页码layui.use(['laypage', 'layer'], function() { var laypage = layui.laypage , layer = layui.layer; laypage.render({ elem: 'page' ,count: 100 ,layout: ['limit','count', 'first', ...原创 2019-12-18 20:40:48 · 1837 阅读 · 0 评论 -
layui全选功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>终端管理</title> <link rel="stylesheet" href="layui/css/layui.css"> <li...原创 2019-10-10 17:09:25 · 649 阅读 · 0 评论 -
layer关闭弹层并刷新父页面表格
parent.layer.closeAll('iframe'); //关闭父及弹框parent.layui.table.reload('testReload'); //刷新父页面表格法一：layer.open({ title:"地图", type: 2, area: ['100%', '100%'], content: '/fence...原创 2019-09-17 16:55:29 · 1423 阅读 · 0 评论 -
layer弹框关闭
（1）关闭特定iframe//当在iframe页面关闭自身时，在iframe页执行以下js脚本varindex = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引parent.layer.close(index);//再执行关闭或parent.layer.closeAll('iframe');...原创 2019-09-17 15:29:27 · 218 阅读 · 0 评论 -
layer属性
layer.open({ type: 1, title: '变化详情', //设置标题，false为无标题 closeBtn: 0, //关闭图标隐藏 btn: ['确认提交', '取消'], //自定义按钮 shadeClose: true,//点击空白处关闭 shade: 0.8, skin: 'layer_bg', ...原创 2019-09-16 10:16:54 · 395 阅读 · 0 评论 -
layui数据表格宽度自适应
<table class="layui-hide" id="test"></table> <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ...原创 2019-08-28 09:33:28 · 20844 阅读 · 0 评论 -
layui数据表格自定义按钮样式
<table class="layui-hide" id="loadList" lay-filter="menu-filter" style=" margin: 0 10px;"></table><script type="text/html" id="toolbtn"> <a class="" lay-event="down"><...原创 2019-08-27 11:36:54 · 5070 阅读 · 0 评论 -
layui弹窗不点击时能不能不加载
赋值变量tableTest再调用tableTest（）var tableTest = function() { layui.use('table', function () { var table = layui.table; table.render({ elem: '#meg' , url:...原创 2019-08-12 18:39:47 · 305 阅读 · 0 评论 -
layer关闭当前窗口页面以及确认取消按钮
function demo() { layer.confirm('您是如何看待前端开发？', { btn: ['重要','奇葩'] //按钮 }, function(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);//...原创 2019-01-10 11:44:51 · 10836 阅读 · 0 评论 -
layui表刷新方法
<div class="reload"><a href="###" onclick="reloadTable()"></a></div> <table id="dataProject" class="layui-table" lay-filter="test"></table>layui.use(['table','...原创 2019-04-08 16:35:34 · 2501 阅读 · 0 评论 -
layui数据表格偶数行背景颜色
,limits:[10,20,30,40,50,60,70,80,90],done: function (res, curr, count) {// 表格渲染完成之后的回调 var that = this.elem.next(); res.data.forEach(function (item, index) { //console.log(item.empNa...原创 2019-04-09 09:18:11 · 2897 阅读 · 0 评论 -
layui数据表格的toolbar有些行有，有些行没有
1.比如性别sex这个字段，后台可能返回的是1.或者 2；那我们总不能显示1.和 2，我们需要显示男和女，这里就用到了自定义模板了<script type="text/html" id="barDemo"> {{#if (d.sex == 1) { }} <span>男</span> {{# }else...原创 2019-04-09 14:26:18 · 2726 阅读 · 0 评论 -
layui垂直导航右边文字变化
1.当前点击跳转（js控制）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href="layui/css/layui.css"&g...原创 2019-05-06 15:32:12 · 1606 阅读 · 0 评论 -
layui弹窗页面关闭
layui.use('layer', function() { var layer = layui.layer; var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭})...原创 2019-05-09 09:57:17 · 1517 阅读 · 0 评论 -
layui本页弹框页面
<button class="send_btn" onclick="btn()">新增地址</button><div class="table" id="table" style="display: none"> <div class="gy_table1"> <form action=""> ...原创 2019-05-14 18:59:14 · 232 阅读 · 0 评论 -
layui数据表格点击搜索
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>更正地址</title> <style> </style> <link rel="stylesheet" href...原创 2019-05-15 14:37:47 · 2078 阅读 · 1 评论 -
layui自己添加图片按钮并点击跳转页面
1.按钮样式<table class="layui-hide" id="test" lay-filter="menu-filter" style="margin: 0 10px;"></table><script type="text/html" id="toolbtn"> <a class="" lay-event="down">...原创 2019-05-16 14:56:42 · 3635 阅读 · 0 评论 -
layui编辑删除功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>终端格口属性管理</title> <style> .layui-table-header .layui-table thead tr ...原创 2019-05-16 16:55:18 · 2280 阅读 · 0 评论 -
layui中表格选中高亮显示
layui.use(['table','form'], function(){ var table = layui.table, form = layui.form,//监听复选框事件，被选中的行高亮显示table.on('checkbox(menu-filter)', function (obj) { // console.log(obj) ...原创 2019-06-19 18:20:20 · 3348 阅读 · 0 评论 -
ajax里写询问框
layer.msg('删除中...', {icon: 16,shade: 0.3,time:5000}); layer.confirm("确定删除"+roleName+"？",function(){ $.ajax({ type:"POST", ...原创 2019-06-20 16:40:39 · 166 阅读 · 0 评论 -
layui表格数据templet
,field:'Sex',title:'性别',align:'center', templet:function(res){ if(res.Sex=='1'){ return '男'; }els...原创 2019-08-13 16:32:51 · 1852 阅读 · 0 评论 -
table.on('tool(test) test值是什么
tool里面的不是table的ID,而是table中设置的属性：lay-filter的值，如果没有此属性需要增加原创 2019-08-13 17:45:26 · 7438 阅读 · 1 评论 -
layui弹框确认及取消按钮
1.取消按钮function btn1() { layer.closeAll();}2.确认按钮function btn() { layui.use('layer', function(){ var layer = layui.layer; layer.open({ title:"筛选条件", ...原创 2019-08-23 16:50:42 · 9595 阅读 · 0 评论 -
layui关闭所有弹窗页面(页面) / 关闭弹窗后刷新动态表单
第一个页面：layer.open({ type: 2, title: '编辑事项: ', shadeClose: true, shade: 0.8, offset: "60px", move: false, scrollbar: false, area: ['680px', '425px'], content: ["1....原创 2019-01-11 14:21:28 · 2349 阅读 · 0 评论