LAYUI - 技术教程文章
Django+Layui学习二：Tabs【代码】【图】
前言上一篇我们制作了简单的后台布局，并且动态加载了侧边栏的节点以及子节点，本篇来做一下tabs。首先我们来看下tab创建的简单流程：按照流程图我们可以开始编写html以及js代码：1<div class="layui-body">2<!-- 内容主体区域 -->3<div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">4<ul class="layui-tab-title"></ul>5<div class="layui-tab-content"></div>6</div>7</div> 1 <script>2//JavaScr...
layUI+mvc动态菜单控制器
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.Text;using LayUIMvcTest.Models;namespace LayUIMvcTest.Controllers{ public class MainController : Controller { // // GET: /main/ public ActionResult Index() { return View(); } #region 加载菜单数据 /// <summary> //...
00021-layui 上传excel，java 解析excel 数据【代码】
按钮：<button class="layui-btn layui-btn-sm" id="upload_importCustomer">导入</button> upload 控件渲染：upload.render({elem: ‘#upload_importCustomer‘,url: ctx+‘/customer/customer/importData/‘,accept: ‘file‘ //普通文件,data:{importType:1},done: function(response){layer.msg(‘导入完成，若无数据，请到【导入记录】页面查看,或5秒后刷新‘);setTimeout(function () {active.reload();},3000);},error: fun...
layuiTable根据返回的JSON内容改变指定行的颜色【代码】
// 渲染表格var insTb = table.render({elem: ‘#tableArticles‘,//url: ‘../../json/loginRecord.json‘,url: ‘{:url(‘hospital/index‘)}‘,limit: 10,page: true,cellMinWidth: 100,title: ‘预约列表‘,cols: [[{field:‘name‘,title: ‘姓名‘,width:80,align: ‘center‘},{field:‘sex‘,title: ‘性别‘,width:60,align: ‘center‘},{field:‘old‘, title: ‘年龄‘,width:60,align: ‘center‘},{field:‘tel‘, t...
layui的table渲染cols的标题错乱问题,number转成string【图】
在表格的列中,运用了一下字典查出来的key值做列名,方便不定量统计用,结果发现后台传的值为 0,1,2,3...,到前台也是,但是在table.render了之后却发生了变化.猜测在添加序号的时候,默认第一列序号占据了 0(int) 列,然后将自己的变量的第一个0,给覆盖成了3 .试图删除序号列之后又发现第一个变成了 2 ,猜想因为是数字列,被layui给处理过了. 于是测试,使用反撇号,加入cols中, >>> ,问题解决,从 0 开始排序,但是因为部分浏览器不支持 ` ,...
layui——Cannot create property 'LAY_TABLE_INDEX' on number '1'【图】
前言用layui写的后台，PHP处理好数据传输过来的时候报错了，最后发现是数据处理成layui格式的时候出错了，直接传了json对象过来，layui需要的是一个json的数。 解决外面套成数组即可~ ' on number '1'' ref='nofollow'>layui——Cannot create property 'LAY_TABLE_INDEX' on number '1'原文：https://www.cnblogs.com/wangyang0210/p/10789912.html
layui文件上传进度条（模拟）【代码】【图】
1.修改上传组件js(没测)https://blog.csdn.net/weixin_42457316/article/details/81017471https://www.cnblogs.com/youmingkuang/p/9183528.htmlhttps://fly.layui.com/jie/19430/ 1、upload.js 扩展功能利用ajax的xhr属性实现该功能修改过modules中的upload.js文件功能具体实现：在js文件中添加监听函数 //创建监听函数var xhrOnProgress=function(fun) {xhrOnProgress.onprogress = fun; //绑定监听//使用闭包实现监听绑retur...
Django+Layui学习二：Table【代码】
前言前面学习了后台布局和tabs的使用，本次来学习下layui中的table和Django联动。 一、Django设置1、models，简单的两个类，一个是问题类型，一个是问题的详情。 1# Create your models here. 2 3#问题类型 4class ProblemType(models.Model):5 problem_type=models.CharField(max_length=50,verbose_name=‘问题类型‘)6 7class Meta:8 verbose_name=‘问题类型‘ 9 verbose_name_plural=verbose_name 1011de...
layui使用iconfont【代码】【图】
layui的图标取自于阿里巴巴的矢量图标库 Iconfont，同样的，这篇教程也是基于Iconfont进行扩展。第一步，通过浏览器打开 http://iconfont.cn/ ，访问阿里巴巴矢量图标库。第二步，通过右上角的用户图标，授权登陆一个账号，在此我选择使用Github作为登陆账号。第三步，登陆完成后，让我们稍微了解下基本的操作。Iconfont提供了非常多的图标库，有官方的图标资源，也有一些第三方的素材。选择方式多种多样，更能集成一些彩色图标到项...
关于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 重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主 群主会在第一时...