LAYUI - 技术教程文章
layui--入门（helloWorld）【图】
具体可参考官方文档：https://www.layui.com/doc/由于引入layui 需要用到node.js安装过程可参考：https://www.cnblogs.com/liuchenxing/p/8036384.htmllayui--入门（helloWorld） 1.首先官网首页下载 layui https://www.layui.com/解压到指定目录(记住目录)win+r 输入cmd 进入dos窗口 切换到解压目录输入 npm install layui-src如图：回车。执行成功。 解压目录下生成node_modules文件和package-lock.json文件。获得layui之后，...
使用LayUI实现文件上传的一个误区【图】
1.HTML 2.JS 3.后端处理（注意：参数 file） 这里传入的参数名只能是 file LayUI文件上传官方文档： https://www.layui.com/doc/modules/upload.html多文件上传的实现：https://www.cnblogs.com/moreforests/p/13175644.html原文：https://www.cnblogs.com/moreforests/p/13175507.html
layui 中国省市复选框【代码】【图】
效果截图：JS代码：<script>var form; $(function () {layui.extend({regionCheckBox: ‘regionCheckBox/regionCheckBox‘//定义组件模块名 })layui.use([‘form‘], function () {form = layui.form;form.on(‘select‘, function (data) {$(‘#btnSelect‘).trigger(‘click‘)})form.render();}) })function assignCity(MerchantID, GoodId) {var sdatacity = {MerchantID: MerchantID,GoodId: GoodId,flag: "GetAssignCity...
layui富文本编辑器layedit【图】
上图是官方提供的文档，我看了几次，都没发现有赋值的方法 layedit赋值方法如下/*** 设置编辑器内容* @param {[type]} index 编辑器索引* @param {[type]} content 要设置的内容* @param {[type]} flag 是否追加模式*/layedit.setContent(index, content, flag);flag是true，是追加模式，flag是false，赋值模式原文：https://www.cnblogs.com/CuiRicky/p/12014190.html
layui导航栏知识【代码】
本节知识:使用ul和li标签加上layui的导航类组成导航栏基础类:注意：导航 依赖 element 模块，否则无法进行功能性操作 layui-nav：放在ul里面定义一个导航栏 layui-nav-item:放在li里面定义一个导航栏的菜单项 layui-nav-img:放在li里面定义一个带图片的菜单项一些特殊用法: 1.可以在li里面加个a标签，用来表示可以跳转的菜单项 2.可以在li里面加个a标签，再在a里面加一个img，用来点击图片跳转 3.二级菜单的类 ...
flask+layui（二）layui的使用【代码】
一、安装layui插件1、访问：https://www.layui.com/ 2、点击立即下载，将下载后的文件解压，将解压后文件夹layui-v2.6.8中的layui文件夹复制到flask项目中static文件夹中： 二、在html文件中引入layui插件<link href="../static/layui/css/layui.css" rel="stylesheet"> <script src="../static/layui/layui.js"></script>修改htnl文件： 三、访问html文件：http://127.0.0.1:5000/test layui文件引用成功 原文：https://www.cn...
00015-layui 的页签tabs切换，刷新页签的内容【代码】
<div ><div lay-filter="myTaskTabs"><ul ><li >待处理</li><li>我创建</li><li>已完成</li><li>全部</li></ul><div ><div ><iframe src="myTaskTodoList.jsp" frameborder="0" name="iframe0" ></iframe></div><div ><iframe src="myCreateTaskList.jsp" frameborder="0" name="iframe1" ></iframe></div><div ><iframe src="myTaskDoneList.jsp" frameborder="0" name="iframe2" ></iframe></div><div ><iframe src="m...
Layui 改变数据表格样式覆盖【代码】
改变表格行高.layui-table-cell{height:40px;line-height: 36px; }改变复选框高宽和定位等等.layui-table-view .layui-form-checkbox[lay-skin="primary"] i { width: 18px; height: 18px; margin-top:10px;} 原文：https://www.cnblogs.com/xiaozhang666/p/11237317.html
layui弹框自适应高度【代码】
layer.open自适应高度 方式一:如下,可有效防止高度超出可视范围 layer.open({skin : ‘layui-layer-molv‘,type : 1,title : ‘预览‘,area : [‘640px‘, ‘95%‘], // 高度设置为95%,防止超出可视范围shade : 0.8, // 遮罩层透明度id : ‘LAY_layuipro‘, //设定一个id，防止重复弹出resize : false, //是否允许拉伸btn : [‘关闭‘],btnAlign: ‘r‘,moveType : 1, //拖拽模式，0或者1content : ‘html内容‘,yes: funct...
layui 之 弹框重新打开 upload无效
坑啊！ layui 太坑了！！！先吐槽。事情经过：今天在使用layui中自带的文件上传组件layui.upload的时候，遇到了一个问题，就是当我在关闭弹出层之后，父页面中的layui.upload事件就无法监听，原因：当layui.upload被重复渲染之后，就会无效 解决方法：把upload事件单独拎出来，使其只在页面加载时渲染一次.原文：https://www.cnblogs.com/xuwupiaomiao/p/15073522.html
layui 下拉框 动态获取数据
$(function(){var grade=$("#grade");grade.append("一年级"); //添加下拉列表grade.append("二年级");grade.append("三年级");$("四年级").appendTo(grade); //添加下拉列表$("").val("4").text("五年级").appendTo(grade); //添加下拉列表$("").val("5").text("六年级").prependTo(grade); //追加下拉列表到开头$("option[value=‘1‘]").remove(); //移除value值为1的下拉选项grade.val("2"); //设置默认的选中状态var maxGrade...
layui栅格布局问题【代码】【图】
在使用layer.open弹出到窗口中，使用布局一直不起作用。开始到写法如下, 目的是一行分成左右两块，比例为8:4等分。<div class="layui-fluid"><div class="layui-row layui-col-space10"><div class="layui-col-md8"><div class="layui-card"><div class="layui-card-header">最近更新<a lay-href="http://www.layui.com/doc/base/changelog.html" class="layui-a-tips">全部更新</a></div><div class="layui-card-body">body</div>...
.Net之Layui多图片上传【代码】【图】
前言： 多图上传在一些特殊的需求中我们经常会遇到，其实多图上传的原理大家都有各自的见解。对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样，只不过是Layui中的upload.render方法已经帮我们封装好了，我们只管调用即可，也就是说你选中了几张图片，那么将会向后台请求与图片张数相同的次数，即为遍历提交的方式。Layui文件/图片样式地址（官方文档）：https://www.layui.com/demo/upload.htm...
Layui 使用问题汇总【代码】【图】
1. Layui数据表格中checkbox位置不居中使用方法渲染的方式生成数据表格，添加了checkbox，但发现checkbox位置不居中，如下图所示解决办法通过layui官方社区，找到如下代码，只需要添加如下样式 即可解决.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: 50%;transform: translateY(-50%); } { top: 50%; transform: translateY(-50%); } 参考文章xcmercy，解决Layui数据表格中checkbox位置不居中。 原文：https:/...
layui 三级菜单【代码】
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>layout 后台大布局 - Layui</title><link rel="stylesheet" href="layui/css/layui.css"><style>ol li a{background-color: rgba(0,0,0,1)!important;}.three_this{background-color: #ebba92!important;}</style></head><body class="layui-layout-body"><div class="layui-layo...
layui数据表格分页加载动画,自己定义加载动画,"加载中..."【代码】【图】
记录思路,仅供参考在表格渲染完成后,在done回调函数中给分页动态加点击事件,关闭"加载中..."动画也是在 done回调函数中关闭这是我实现的思路,记录给大家参考., done: function (res, curr, count) {// 添加分页加载动画的函数 $(‘.layui-laypage > a‘).each(function(){$(this).attr(‘onclick‘,"pageLoading(this)");})top.layer.close(loadingIndex); // 渲染完成后关闭动画}/*** 分页请求的loading动画* @param {当前点击...
layui单元格换行【代码】
layui单元格换行 使其能显示,如果左右列固定,在done回调中使用下方方法 .layui-table-cell {height: auto;} //固定行随单元格自动调整 function autoFixedHeight(tableElem) {// 获取表格divvar $tableView = $(tableElem).next(".layui-table-view");// 获取两侧浮动栏var $fixed = $tableView.find(".layui-table-fixed");var dataIndex;var trHeight;// 遍历tr 修正浮动栏行高$tableView.find(".layui-table-main").find("tr")....
11 图书管理系统（SSM+LayUi）【代码】
1、DAO层接口和实现在classInfoDao.java里写增删改接口package com.gychen.dao;import com.gychen.po.ClassInfo; import org.apache.ibatis.annotations.Param; import org.apache.ibatis.annotations.Select; import org.springframework.stereotype.Component;import java.util.List;@Component("classDao") public interface ClassInfoDao {/*** 查询所有图书类型信息*/ // @Select("select * from class_info") // List<...
layUI订单实现思路【代码】
控制器用到的方法： 首页视图，首页获取数据， 例如：public ActionResult Index() { return View(); } 添加视图，保存添加数据， 编辑视图，保存编辑数据， 删除数据，订单详情页面，视图实现：获取数据：参考layUI数据表格，按照规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格编辑/删除：先绑定列工具条，toolbar: ‘#barDemo‘，监听行工具栏，示例代码：<script ...
layui table表格 表头与内容列错位问题（只有纵向滚动条的情况）【图】
版本2.4.5问题展示：存在问题：正好错位一个纵向滚动条的宽度 思路：仔细观察th元素及th包裹的子元素div 如下图发现th宽度莫名的就多了5px 我就纳闷了 解决方案：到table.js源码中→搜索 →纵向滚动条宽度，找到了，并按下图修改 解决了解决后效果如下 原文：https://www.cnblogs.com/zhinian-/p/11081282.html
00037-layui 表单有子列表，如何动态新增和保存（弹窗版）？【代码】
表单中有一个接收明细的子列表，html:<div class="layui-col-md12"><div class="layui-card"><div class="layui-card-header" style="background-color: #e6e6e6">接收明细</div><div class="layui-card-body" style="height: 200px;"><table class="layui-hide" id="companyPaperRecordDetailListTable" lay-filter="companyPaperRecordDetailListTable"></table><script type="text/html" id="companyPaperRecordDetailListTable...
layui form表单提交
layui.use([‘form‘], function () { var form = layui.form; //监听提交 form.on(‘submit(formDemo)‘, function (data) { data.field.shstate = 1; //return false; $.ajax({ url: ‘../hwjg_App/hwjgA...
layui 使用【代码】【图】
1.下载后解压如图 2.示例 home.thml代码<!DOCTYPE html><html><!-- head --><head><meta charset="utf-8"><title>layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="../layui/css/layui.css" media="all"><style>body{margin: 10px;}.de...
layui的表单功能【图】
作为一个phper还是非常喜欢这个插件的~虽然在vue的群里面说这个插件好被人怼过。。废话不多说，这次使用到的是layui的表单功能。上次的日历忘记做笔记了非常可惜，大部分其实跟着文档撸就可以，这次表单提交还出了一点点问题。首先是引入layui的文件然后html。这次的问题出现在了红圈位置。因为我跟着文档翻了下他的自定义验证然后写了这段，一直提示未定位。后面发现漏掉了这一段。也就是说，form时间~要写到这个函数里面也就是要...
LayUI分页基于ASP.NET MVC【代码】【图】
---恢复内容开始---今天写了挺久的分页，百度了很多都没有很好的.Net实例，今天我来更新一期关于layuiTable分页首先你得理解layui的官方文档的Table分页部分，我在这里附上地址 https://www.layui.com/doc/modules/table.html 方便你们随时边看我的实例和lay文档其实我写的很简单首先介绍我用到的东西，使用前段模板：layui的table和layui的表单（此处不细提），开发工具：Vs2017，数据库：Sqlserver2008，ORM：EF，框架：ASP.NET ...
layui实现批量导入excal表【代码】
layui实现多文件上传,并直接选中需要上传文件的类型//拖拽上传 upload.render({elem : ‘#import‘,size: 1024, //限制文件大小，单位 KBaccept: ‘file‘, //普通文件field : ‘file‘,acceptMime: ‘application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet‘, // 规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。exts: ‘xls|xlsx‘, //允许上传的...
layui更新表格单元格数据口,更新单元格的内容【代码】
//监听工具条table.on(‘tool(edit)‘, function(obj){var data = obj.data;if(obj.event === ‘getinvitation‘){//有个ajax更新,成功后回调函数写下面的更新//同步更新表格和缓存对应的值 obj.update({is_signin_today: ‘1‘,}); }}); 原文：https://www.cnblogs.com/fps2tao/p/9467092.html
LayUI laydate日期选择器自定义 快捷选中今天、昨天 、本周、本月等等【代码】【图】
1. 引入laydata插件 下载 https://blog-static.cnblogs.com/files/zhangning187/laydate.js laydate.js 替换laydate.js，就可以直接使用自定义快捷选中了 2.自定义控件选取值 1laydate.render({2 elem: ‘#freeTimeInput‘, //指定元素 3 range: true,4 trigger: ‘click‘, //采用click弹出 5 value: ‘‘,6 extrabtns: [7 {8 id: ‘today‘,9 ...
layui数据表格跨行自动合并【代码】
1 <!DOCTYPE html>2 <html>3 <head> 4 <meta charset="utf-8">5 <title>合并行</title>6 <link href="layui/css/layui.css" rel="stylesheet" />7 </head>8 <body>9 <div class="box">10 <table class="layui-table" id="test" lay-data="{page:true,limit:50}" lay-filter="test">11 <thead>12 <tr>13 <th lay-data="{field:‘province‘,width:200}"...
Layui数据表格用法【代码】【图】
在这里介绍一下layui数据表格的简单使用，并介绍所踩的坑首先封装一个类，将数据表格所需要的属性封装在这里 1publicclass MsgJson<T> where T:class,new()2 {3//错误提示代号 4publicint code { get; set; }5//错误提示消息 6publicstring msg { get; set; }7//表格中的记录总数 8publicint count { get; set; }9//表格中的所有记录10public IEnumerable<T> data { get; set; } 11 }在Controller中创建一个ActionResult类方...