LAYUI - 技术教程文章
layui下拉框【代码】
花了我快8个小时结合了所有例子才得到的可用代码<div class="layui-form-item" ><label class="layui-form-label">所属脑电中心</label><div class="layui-input-block"><select name="centerid" id="centerid" lay-filter="centerid" ><option value="">请选择</option></select></div></div>layui.use( ['element', 'form','layer','layedit'], function (){//只有执行了这一步，部分表单元素才会自动修饰成功var form = layui.f...
layui获取到list之后，隐藏列内容【代码】
适合场景：当获取到list之后，需要编辑超出显示列表之外的数据时，可以对列标题、列内容进行隐藏，如下, cols: [[ //列表数据{field: 'packageCode', title: '包代码', align: 'center',width:'120'}, {field: 'packageType', title: '包类型', align: 'center',width:'150'}, {field: 'packageName', title: '包名称', align: 'center',width:'150'}, {field: 'opertion', title: '申请人', align: 'center',width:'90'}, {fiel...
Layui中联动多选框导出Excel数据【代码】
Layui中联动多选框导出Excel数据： 导出数据是很多系统中都具备的功能，但看了一下其他人的写法，觉得可以更便捷一点问题描述： 场景要求需要点击多选框进行选择数据，并进行导出到excel，但表格的数据并不能完全的导出到excel给用户，并且表头顺序不能乱。其中使用的插件链接如下，可以下载 https://fly.layui.com/extend/excel/#doc 引入步骤不做描述，其他教程已经很详细了 这时候点击导出，是将全部的数据都进行了导出，下面我...
layui管理端快速开始【代码】
layui管理端快速开始 代码结构lib放入layui即可 code xxx换成user即可 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>xxx</title><link rel="stylesheet" href="/lib/layui/css/layui.css"> </head> <body><script type="text/html" id="table-bar"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add-xxx">添加</button></div> </script><table class="layui-hide...
layui 表格toolTip【代码】
## 表格鼠标移入弹出显示##### 使用方法1、在layui 的table中的cols使用templet并在templet中使用tooltip包裹实际的内容``` {field: startTime, align:left,title: 发起时间,width:12%,templet:function(d){return <tooltip> + createTime(d.startTime) + </tooltip> }} ```2、在table.render的down中添加renderTooltip()方法``` // 渲染表格var tableResult = table.render({elem: # + orderProperty.tableId,url: ,method:POST,c...
关于layui的layer.open弹出层高度自适应的解决【代码】
在使用layui的layer插件打开弹出层的时候，会出现弹出层的Iframe高度设置为默认的150px，这样会导致出现滚动条或者内容显示不全的现象，在网上面也搜索了对应的解决方案。 方案一：在弹窗的时候，设置area只规定宽度，不设置高度，让插件自适应，如下： layui.layer.open({type:2,//此处只规定宽度，不规定高度，让插件自适应高度area:['300px'],content:'www.baidu.com',shade:0.5,title:'百度页面' })但是这个方法亲测是无效的，...
2021-3-30 工作记录--LayUI-Ajax请求地址及参数【图】
操作里面的内容： layui: （用来查找） 源码： // 操作里的内容-按钮【去layui官网上查找的步骤：layui-内置模块(左)-数据表格(左)-行工具事件(右)】 table.on(‘tool(test)’, function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter=“对应的值” var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = o...
【前端系列-2】layui+springboot实现表格增删改查【代码】
前言 本文将演示如何使用Springboot（后端框架）和layui（前端框架）将数据库中的数据渲染到前端页面，以及对前端页面的数据实现增删改。完整项目已上传至GitHub，项目地址：https://github.com/ThinkMugz/mudemo 1 项目搭建图中圈中的就是juqery和layui两个框架的源码文件，引入项目后，在我们自己写的js中引入相应的依赖，就可以使用大佬们提供的源码了。例如： <!--引用 layui.css，注意路径要写自己项目的--> <link rel="style...
layui所有数据排序【代码】
去掉自带排序 [autoSort: false] table.render({elem: '#test', url: '/DataShow/WarnEventList' //数据接口, where: { bm: document.getElementById("deptFj").value,bdz: $('#subsFj').val()} //如果无需传递额外参数，可不加该参数, width: '100%', height: h, autoSort: false //去掉自排序, id: 'testReload', cols: [[{ type: 'checkbox', fixed: 'left' }//{ field: 'zizeng', width: 49, title: '序号', fixed: 'left', t...
layui定时刷新数据表格【代码】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>配件提示刷新功能</title><script src="../assets/js/jquery/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="layui/lib/layui-v2.5.4/css/layui.css" media="all"> </head> <body> <!-- 数据表格 --> <table id="dataTable" lay-filter="dataTable"></table><script src="layui/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></scri...
SpringBoot+LayUI+poi 实现Excel文件上传下载【代码】【图】
SpringBoot+LayUI+poi 实现Excel文件上传下载1.前端 更多样式及参数可参考官网：https://www.layui.com/doc/modules/upload.html <div class="content_mid100per"><div id="layout"><form class="layui-form" enctype="multipart/form-data"><div class="layui-form-item"><label class="layui-form-label"></label> <img src="${basePath}/images/moban.png" width="300px" height="100px"/></div><div class="layui-form-item"...
layui分页效果【代码】
layui分页效果的显示 导入layui的css和js文件在html中写入分页的div <!-- 创建一个空的div存放分页组件 --> <div><div id="page_container"></div></div>在<script>中 // 表单初始化var form, element, laypagelayui.use(['form', 'element', 'laypage'], function () {element = layui.element,form = layui.form,laypage = layui.laypage;//分页laypage.render({elem: "page_container",count: {{result.length}}, //总页数limit...
基于springboot+layui高校教室管理系统【图】
基于springboot+layui框架的项目，前端页面整洁清晰，具体功能有、登录（第三方授权登录qq授权登录、易班授权登录）、系统管理、角色管理、课表管理、活动管理、教室管理，座位管理，活动申请、在线报修、个人中心等功能(该项目非常适合毕业设计)。 需要完整代码加qq（qq:575578321） 或者微信(tjl575578321) 下面是项目部分功能结构图
layui flow 流加载 笔记【代码】
layui flow 流加载 layui的流加载，用于向下滑动再次获取数据 <div class="list2" style="margin-bottom: 40px;" id="demo"><script> layui.use('flow', function(){var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。var flow = layui.flow;flow.load({elem: '#demo' //指定列表容器,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页var lis = [];//以jQuery的Ajax请...
vue中动态渲染元素使用layui文件上传按钮失效问题【代码】
vue中按钮动态循环渲染的时候 第一次layui文件上传可以使用 之后按钮失效 解决办法：移除对象 重新加入 使layui重新去绑定它 //shareholderfront 代表按钮本身 $(`#shareholderfront${gudongNum}`).remove()//uploadBox1 代表按钮的父元素 $(`#uploadBox1${gudongNum}`).html(`<button class="layui-btn" id="shareholderfront${gudongNum}" ><i class="layui-icon"></i>上传身份证人像面\n</button>`)完整代码： uploadF...
layui
存在价值 编辑 事实上，layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效。它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模...
如何把Echarts 5整合到Layui或Layuimini中【代码】【图】
文章目录 1. 准备工作2. 步骤2.1 echarts.js中写一个回调函数2.2 源码放入回调函数中2.3 lay-config.js中配置2.4 前端页面引入echats 3. 效果4. 资源1. 准备工作 在项目的js > layui-module下新建一个文件夹echarts-silk（命名随意），在该文件夹下创建一个echarts.js 2. 步骤 如果想自己动手从头到尾做一遍的话可以按照步骤的顺序来做； 如果不想的话可以直接下载本文第四部分提供的echarts.js（已经处理好的文件），放入到项目新...