LAYUI - 技术教程文章
关于layui 子父 页面 url 传值 和 接收值的写法
今天 自己 重新写了一下 layui的页面url传值以及接收，这里记录一下 父页面：content: ‘md-view.html?id=‘+a+‘&name=‘+b var index = layer.open({ type: 2, title: ‘查看‘, id:‘detail‘, shadeClose: false, //shade: [0.3], shade:0.4, maxmin: true, //开启最大化最小化按钮 //area: [‘700px‘, ‘80%‘...
使用LayUI展示数据【代码】【图】
LayUI是一款免费，开源，轻量级的前端cms框架，适用于企业后端,能快速上手开发，集成了常用的组件，还有完善的文档和社区。点击查看 文档地址 下载框架 使用： 1.把这个5个文件项都拷贝到项目中 2.到layui官网 地址 将后台布局的代码考过来，做一个左侧导航，右侧显示主内容的格局 3.代码复制到我们自己项目新建的home.html页面后,根据代码上的提示，将远程地址替换成本地，直接删除css引用和js引用，从自己的项目中将这2个文件...
SpringBoot使用thymeleaf和layui时遇到的问题
在使用thymeleaf时报错An error happened during template parsing (template: "class path resource [templates/mainPage/main.html]" - line 134, col 168)我最后找了 很久发现报错的那一行有个HTML结束标签不对，改好之后页面就可以正常显示了。每个人报的错误都可能不同，仔细看一下报错的内容和具体行数。thymeleaf+layui加载页面渲染时TemplateProcessingException: Could not parse as expression: "org.attoparser.ParseEx...
layui动态生成下拉列表【代码】
<select name="deptmgr" lay-filter="FirstSelect" id="FirstSelect" lay-search=""><#--此处动态生成select--></select>-------------------------------------------------------------- //监听头部工具事件table.on("toolbar(deptTable)", function (obj) {switch (obj.event) {case‘add‘:var FirstSelect= $("#FirstSelect");commonFun.loadDeptSelect(FirstSelect);//加载后台数据，渲染selectopenAddFirstDept();//打开添加...
layui hello world【代码】
layui.define(function(exports){ // 需确保您的 layui.js 是引入的构建后的版本（即官网下载或 git 平台的发行版）//直接可得到各种内置模块var layer = layui.layer;//…layer.msg(‘Hello World‘);exports(‘index‘, { msg: ‘Hello Demo‘}); //注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致 }); <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, ini...
Layui我提交表单时，table.reload(),表格会请求2次，是为什么？
重载两次是因为搜索按钮用的是button改成<a class="layui-btn" data-type="reload">搜索</a>就可以了虽然我也不知道是什么原因原文：https://www.cnblogs.com/uzxin/p/11907012.html
Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面，实现单页面的效果【代码】【图】
原文:Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面，实现单页面的效果目录导航：前言：代码实现：请求的超链接如下所示：layui预先加载，获取超链接中传递过来的跳转页面地址和tabs title名称在iframe中打开:Js获取超链接里面传递的参数值:关于存在多了一级菜单栏，而链接中所带的地址又不是第一个一级菜单栏中的子菜单栏我们该如何解决初次加载显示子级菜单栏问题？ 文章正文：回到顶部前言： 使用Layui-ad...
Layui 总结（1） 弹出层【代码】
1.弹出小提示tips 默认吸附在自己地方控制弹出的位置 可以让其吸附在其他元素附近 ，在内容后面增加一个jq选择器 <input type="text"><span id="ss">asdasdasdasdweq</span><script>function tan() {layer.tips(‘我是另外一个tips，只‘,"#ss" ,{tips: [1, ‘#3c3c3c‘],time: 4000});}$("input:text").focusout(tan)</script> 原文：https://www.cnblogs.com/nice2018/p/10011306.html
datatable转layui表格【偏原理】
如题这个类负责把datatable转换为layui表格可以显示的内容。适合配合表格url字段的webapi服务端，为其返回响应字符串。代码如下：using System;using System.Web;using System.Text;using System.Data;using System.Net.Http;namespace MyClass{ public class Layui_helper { static string datatable2json(DataTable table) { StringBuilder jsonBuilder = new StringBuilder(); jsonB...
LayUi 触发事件
1、所有代码写在layui.use()里面。2、触发事件(util)。https://www.layui.com/doc/modules/util.html<button class="layui-btn layui-btn-radius layui-btn-primary layui-col-md-offset5" lay-active="eldownload" style="border-color:#1e9fff;width:200px;" id="download">下载</button>layui.use(["util","element"],function(){let util=layui.let;var element=layui.element; util.event(‘lay-active‘,{eldownload:functio...
使用jquery+layui 做一个输入搜索下拉 类似lay-search【图】
效 果: 因为需要做一个搜索出现下拉然后点击 自动填装input 内容的 东西。 一开始使用lay-search 的控件去弄。 但是无法控制里面的内容。所以用了一些笨方法去弄 废话不说了，html部分： <div > <input type="text" name="HandoverCompany" id="HandoverCompany" onchange="checkInputValueLow(this)" class="layui-input" placeholder="请输入检查单位" style="position:absolute;z-index:2;width: 78...
layui 之监听 select 的变化【代码】
不废话直接上代码layui.use([‘form‘], function () {var form = layui.form;form.on(‘select(quiz1)‘, function (data) {//监听quiz1console.log(data)var url=iotIpport+"/ccpiot/api/assets/modules/"+ data.value+"/assets"$.ajax({url:url,contentType:"application/json;charset=UTF-8",type:‘GET‘,async:false,success: function (res) {let data=res.results,str1=`<option value="">请选择资产</option>`;data.map((...
adminlte+layui框架搭建2 - 动态菜单【代码】
动态菜单参考文章：https://cloud.tencent.com/developer/article/1342558主要修改两个地方：1.系统初始化加载一级菜单，在adminlte.js文件$(window).on(‘load‘, function () {$.ajax({url: "/Home/GetTree?id=0",type: "Post",timeout: 5000,async: true,dataType: "json",success: function (data) {if (data != null && data != undefined) {var leftTreeBox = $("#ModuleNav").empty();leftTreeBox.append("<li class=\"head...
layuimini父子菜单-python实现【代码】
现在项目使用了laymini的后台框架，非常不错，美中不足，没有构建菜单的python示例，遂自己写了一个，供大家参考：数据库表结构CREATETABLE `system_menu` (`id` int(11) unsigned NOTNULL AUTO_INCREMENT COMMENT ‘ID‘,`pid` int(11) unsigned NOTNULLDEFAULT‘0‘ COMMENT ‘父ID‘,`title` varchar(100) NOTNULLDEFAULT‘‘ COMMENT ‘名称‘,`icon` varchar(100) NOTNULLDEFAULT‘‘ COMMENT ‘菜单图标‘,`href` varchar(10...
layui开关switch显示不全问题【代码】【图】
先看效果：开关显示不全，高度也不对称。解决：在所用到的html/jsp中自己加css.layui-form-switch {width: 52px;height: 23px; } 再看效果： 原文：https://www.cnblogs.com/xiaostudy/p/11109465.html
12 图书管理系统（SSM+LayUi）【代码】
图书类型管理-添加图书类型在typeIndex.jsp中找到添加的相关代码进行修改修改监听add添加的监听事件，修改跳转路由 /*** toolbar事件监听*/table.on(‘toolbar(currentTableFilter)‘, function (obj) {if (obj.event === ‘add‘) { // 监听添加操作var content = miniPage.getHrefContent(‘<%=basePath%>typeAdd‘);var openWH = miniPage.getOpenWidthHeight();var index = layer.open({title: ‘添加图书类型‘,type: 1,sh...
layui常用的验证
var LayVerifyExtend = { notnullNonnegativeInteger: function (value, item) { //value：表单的值、item：表单的DOM对象 if (!/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\d+)?$/.test(value)) return ‘只能输入非负整数！‘; }, maxlength: function (value, item) { //value：表单的值、item：表单的DOM对象 if (GetLength(value) > item.maxLength) return ‘只能输入‘ + item.maxLen...
layui模块化----自定义模块定义和使用基础知识【代码】
layui基础知识1.layui模块化编程引入方法 只需要引入两个文件layui.css和layui.js<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用layui</title><link rel="stylesheet" href="layui/css/layui.css"> </head> <body><!-- 你的HTML代码 --><script src="layui/layui.js"></script> <script> //一般直接写在一个js文件...
00028-layui 表单有子列表，如何动态新增和保存（表格table行编辑）？【代码】
html: <div ><div ><div >资料清单</div><div ><table lay-filter="serviceMaterialListTable"></table><script type="text/html" ><div ><button data-type="addMaterial">添加</button></div></script><script type="text/html" ><%--<a lay-event="editMaterial">编辑</a>--%><a lay-event="delMaterial">删除</a></script><script type="text/html" ><select name="type" lay-filter="service_material_type" autocompl...
00032-layui 树形下拉选择 xmSelect（二）：数据懒加载【代码】
<div ><label >证照名称<span >*</span></label><div ><div ></div><input type="hidden" name="licenceId"><input type="hidden" name="licenceName"></div> </div>layui.config({base: ‘${ctxLayui}/layuiadmin/‘ }).extend({index: ‘lib/index‘ }).use([‘index‘, ‘form‘,‘dict‘,‘laydate‘,‘util‘,‘xmSelect‘,‘upload‘], function(){var $ = layui.$ ,form = layui.form;var dict = layui.dict;var laydate =...
formSelects-v4.js 基于Layui的多选解决方案【图】
详情链接地址： https://hnzzmsf.github.io/example/example_v4.html#select_search_server1、闲谈杂趣v3传送门 v3文档其实思考了很久, 还是放弃了v3, 因为开发v3的时候很粗暴, 按照编程角度来看就是硬撸, 也怪自己实力有限, 所以反思了一下, 尝试着继续前行...2、交流学习QQ号: 707200833 QQ群: 769620939 重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主 群主会在第一时...
Js控制css实现同一个按钮实现展示与隐藏内容（LayUI）
<button class="layui-btn layui-btn-primary layui-col-md-offset8" lay-active="dropDownContent"> <i class="layui-icon layui-icon-app layui-bg-white"></i> </button><div class="layui-row" style="display:none;" id="downCent">展示隐藏内容 </div>layui.use(["util", "dropdown"], function () {let util=layui.util; util.event(‘lay-active‘, { ...
layui -关闭窗口方法【代码】
1.关闭当前窗口var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的nameparent.layer.close(index);2.关闭当前tabs页parent.layui.admin.events.closeThisTabs(); //关闭当前tabs页3.这个实在网上到的一些方法，但是不知道为啥有的是时候 没有起作用。所以才有 用 1.2.中的方法记录下 layer.closeAll();//疯狂模式，关闭所有层 layer.closeAll(‘dialog‘); //关闭信息框 layer.closeAll(‘page‘);//关...
layui流加载及传参
<ul class="shop-list ml10 mr10 store_list" id=‘demo‘ style="margin-top:80px;"></ul><script type="text/javascript"> layui.use(‘flow‘, function(){ var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。 var flow = layui.flow; flow.load({ elem: ‘#demo‘ //指定列表容器 ,end:‘没有数据啦o(╥﹏╥)o‘ ,done: function(page,next){ //到达临界点（默...
layui模板templet遍历【代码】
{{# layui.each(d.roles, function(index, item){ }}<span class="layui-badge layui-bg-blue">{{ item.roleName}}</span>{{# }); }} 原文：https://www.cnblogs.com/ushowtime/p/13445132.html
layui 时间选择器 不要秒的选项【代码】
通过修改 CSS 样式可以隐藏秒的选项 ++ .laydate-time-list{padding-bottom:0;overflow:hidden}.laydate-time-list>li{width:50%!important;}.laydate-time-list>li:last-child { display: none;}另外， 如果懒得管秒选项存在的美观性，可以做时间格式限制：JS 部分:layui.use(‘laydate‘, function(){ var laydate = layui.laydate; //时间范围 laydate.render({ elem: ‘#test_0‘ ,type: ‘time‘ ...
00016-layui 动态加载菜单 laytpl【代码】
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="/common/taglibs.jsp"%> <%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%> <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>管理系统</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initi...
[SSM+layui]汽车出租系统04_登录（SSM三层搭建、清理缓存、MD5解密、）【图】
登录 文章目录 登录总结 登录的思路首先要有User模型 所以要生成User模型 再来就是要有UserMapper，这是mybatis的知识， （Mapper）UserMapper就是 三层里面的 Dao层，只是在SSM里面 就没有dao了 而是用（Mapper）UserMapper 还要注意一下 这个Vo（UserVo）是个啥 直接直接用工具类生成模型 自动就生成了，连生成位置就指定好了，直接就可以用 模型生成好，就生成mapper（就是Dao） 对应的xml里面也要去写一个 login的方法...
在layui中使用form表单监听ajax异步验证注册的实例
今天给大家介绍的是当下很流行的框架layui中的一个小案例、就是form表单监控提交并且使用ajax异步提交验证数据。在layui中我们想使用哪个模块就要layui.use(form,function{});这种形式要引用form内置模板，下面是HTML全部代码 <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>注册</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="keywords" content="雷小...
layui的checbox在Ajax局部刷新下的设置方法
此情况只适用于手动拼接表格。。 页面加载时，checkbox会被渲染，so初始页面的checkbox是正常的 当我们自动添加checkbox，并且局部刷新的时候，新的复选框不会被渲染，所以显示是空白 解决办法： 1.需要添加一行代码（渲染后的checkbox代码） <input type="checkbox" lay-skin="primary"> <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>2.渲染一下： form = layui.form(...