精华内容
下载资源
问答
  • 2019-11-25 17:11:06

    在上传文件中:

    在before回调或者是choose回调中加入:layer.load(1)
    在done的回调中加入:layer.closeAll(‘loading’)

    在ajax的请求中:
    在xhr.open()之前就开始加入: layer.load(1) //load后的参数可以是空,也可以是0-2,代表的是不同的加载样式
    在xhr.onload()中加入: layer.closeAll(‘loading’) //关闭所有的loading层

    更多相关内容
  • layui渲染数据的两种方式

    千次阅读 2020-05-19 21:45:10
    -- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> </body> </html> js window.onload = function () { parent.$(".layui-form-item").show(); //获取设备名称 var device = parent.$("#...

    一.自动渲染
    自动渲染直接拼接url

    <%--
      Created by IntelliJ IDEA.
      User: Fetter
      Time: 21:53
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>塔机参数</title>
        <link href="/static/layui/css/layui.css" rel="stylesheet" />
        <script src="/static/layui/layui.js"></script>
        <script src="/static/js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
    <table class="layui-table" lay-data="{url:'/tower/selectTowerParam.json',page:true,limit:10,limits:[10,15,20,25,30]}">
        <thead>
        <tr>
            <th lay-data="{field:'id',width:40}"></th>
            <th lay-data="{field:'tjType',sort:true,width:100}">塔机型号</th>
            <th lay-data="{field:'tjMultiplying',sort:true,width:100}">倍率</th>
            <th lay-data="{field:'tjNumber',sort:true,width:100}">塔吊编号</th>
            <th lay-data="{field:'tjChannel',sort:true,width:120}">防碰撞频道</th>
            <th lay-data="{field:'tjBigarm',sort:true,width:100}">大臂长m</th>
            <th lay-data="{field:'tjForearm',sort:true,width:100}">小臂长m</th>
            <th lay-data="{field:'tjHoisting',sort:true,width:100}">最大吊重t</th>
            <th lay-data="{field:'tjHeight',sort:true,width:100}">塔高m</th>
            <th lay-data="{field:'tjXcoordinate',sort:true,width:100}">X坐标m</th>
            <th lay-data="{field:'tjYcoordinate',sort:true,width:100}">Y坐标m</th>
            <th lay-data="{field:'tjWeight',sort:true,width:150}">最大幅度起重量</th>
        </tr>
        </thead>
    </table>
    </body>
    <script src="/static/layui/layui.js" type="text/javascript"></script>
    <script>
        parent.$(".layui-form-item").hide();
        layui.use('table',function(){
            var table = layui.table;
        })
    </script>
    
    </html>
    
    

    在这里插入图片描述
    二.方法渲染
    jsp

    <%--
      Created by IntelliJ IDEA.
      User: Fetter
      Time: 14:24
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <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, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
        <script src="/static/js/jquery-3.4.1.min.js"></script>
        <style type="text/css">
            .layui-table-page{text-align: center;}
        </style>
    </head>
    
    <body>
    <table class="layui-hide layui-table" id="hisTable" lay-filter="hisTable"></table>
    <script src="/static/js/historyData.js"></script>
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    </body>
    </html>
    
    

    js

    window.onload = function () {
    
        parent.$(".layui-form-item").show();
    
        //获取设备名称
        var device = parent.$("#device").val();
        /*获取开始时间*/
        var firstTime = parent.$("#firstTime").val();
        /*获取结束时间*/
        var lastTime = parent.$("#lastTime").val();
        var infourl="";
    
        /*url判断:如果时间为空,就查询所有时间段数据,有时间就按时间段查询,*/
        if (firstTime.length > 6 && lastTime.length > 6) {
            infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
        } else if (firstTime.length == 0 && lastTime.length == 0) {
            firstTime = "1970-01-01 00:00:00";
            lastTime = "9999-12-01 00:00:00";
            infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
        } else {
            infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
        }
        /*点击历史数据标签时处理,无时间条件*/
        historData(infourl);
        /*点击查询按钮传入数据*/
        quertyDate(device,firstTime,lastTime,infourl);
    }
    /*点击查询按钮后处理*/
    function quertyDate(device,firstTime,lastTime,infourl) {
    
        $(parent.$("#queryBut")).click(function () {
            //获取设备名称
            device = parent.$("#device").val();
            /*获取开始时间*/
            firstTime = parent.$("#firstTime").val();
            /*获取结束时间*/
            lastTime = parent.$("#lastTime").val();
            /*url判断:如果时间为空,就查询所有时间段数据,有时间就按时间段查询,*/
            if (firstTime.length > 6 && lastTime.length > 6) {
                infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
            } else if (firstTime.length == 0 && lastTime.length == 0) {
                firstTime = "1970-01-01 00:00:00";
                lastTime = "9999-12-01 00:00:00";
                infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
            } else {
                infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
            }
            historData(infourl);
        });
    }
    
    function historData(infourl) {
        layui.use('table', function () {
            var table = layui.table;
            //执行一个 table 实例
            table.render({
                elem: '#hisTable'
                , url: infourl
                , page: true //开启分页
                , limit: 10
                , limits: [10, 15, 20, 25, 30]
                , cols: [[ //表头
                    {width: 40}
                    , {
                        field: 'date_time.time',
                        title: '时间',
                        sort: true,
                        width: 200,
                        templet: "<div>{{layui.util.toDateString(d.date_time.time, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                    }
                    , {field: 'tower_height', title: '高度(m)', sort: true, width: 100}
                    , {field: 'tower_range', title: '幅度(°)', sort: true, width: 100}
                    , {field: 'tower_rotation', title: '回转(t)', sort: true, width: 100}
                    , {field: 'tower_hoisting', title: '吊重(t)', sort: true, width: 100}
                    , {field: 'tower_moment', title: '力矩(%)', sort: true, width: 100}
                    , {field: 'tower_air_speed', title: '风速(m/s)', sort: true, width: 100}
                    , {field: 'tower_dip', title: '倾角(°)', sort: true, width: 100}
                    , {field: 'tower_picture', width: 60, title: '图片'}
                ]]
            });
        });
    }
    

    在这里插入图片描述

    展开全文
  • Layui开关使用

    千次阅读 2019-09-15 17:34:02
    在列表页面使用layui开关使用 功能介绍: 使用layui开关控制一条数据的状态。0:表示启用 1:表示禁用。 后台框架: SpringMVC+Mybatis 后台页面: Jsp页面 功能展示: 代码实现: ...

    在Jsp列表页面使用layui开关

    1. 功能介绍:
      使用layui开关控制一条数据的状态。0:表示启用 1:表示禁用。

    2. 后台框架
      SpringMVC+Mybatis

    3. 后台页面
      Jsp页面

    4. 功能展示
      在这里插入图片描述

    5. 代码实现
      前台:

    <tbody>
    		<c:forEach items="${resultMap.result.records }" var="r">
    				<tr>
    					<td>
    						<input type="checkbox" name="ids" lay-skin="primary">
    					</td>
    					<td>${r.code }</td>
    					<td>${r.payments }</td>
    					<td>${r.raised }</td>
    					<td>${r.createTime }</td>
    					<td>
    						<input type="checkbox" value="0" name="state" lay-skin="switch" lay-text="启用|禁用" ${r.state eq '0' ? 'checked': '' }>
    						<input type="hidden" id="kaigID" value="${r.id }" />
    					</td>
    				</tr>
    			</c:forEach>
    		</tbody>
    

    前台JS:

    <script>
    		layui.use('form', function() {
    			var form = layui.form; //表单
    			form.on('switch', function(data) {
    				console.log(data.elem.checked); //开关是否开启,true或者false
    				console.log(data.value); //开关value值,也可以通过data.elem.value得到
    				var id = $(data.othis).next("input").val();
    				if(data.elem.checked == true) {
    					$.ajax({
    						type: "post",
    						async: false,
    						data: "id=" + id + "&state=" + 0,
    						url: "changeState",
    						success: function(data) {
    							flag = data
    						},
    					});
    					if(flag == "Ny") {
    						layer.msg("启用状态数不超过三个!");
    					} else {
    						layer.msg("已启用!");
    					}
    				} else {
    					$.ajax({
    						type: "post",
    						async: false,
    						data: "id=" + id + "&state=" + 1,
    						url: "changeState",
    						success: function(data) {
    							flag = data
    						},
    					});
    					if(flag == "yes") {
    						layer.msg("已禁用!");
    					}  
    				}
    
    			});
    		})
    	</script>
    
    

    (layui官方文档)开关被点击时触发,回调函数返回一个object参数,携带两个成员:

    form.on('switch(filter)', function(data){
      console.log(data.elem); //得到checkbox原始DOM对象
      console.log(data.elem.checked); //开关是否开启,true或者false
      console.log(data.value); //开关value值,也可以通过data.elem.value得到
      console.log(data.othis); //得到美化后的DOM对象
    });  
    

    需要引入的js

    <script src="layui/layui.js></script>
    

    功能逻辑:
    当点击开关时,js获取当前数据的ID,layui开关监听事件,会返回true/false,我的功能实现是当返回true时,状态设置为0,携带ID和状态码使用Ajax传给后台处理,反之为false时,状态设置为1

    展开全文
  • layui 一打开页面就执行弹出框

    千次阅读 2019-05-09 14:45:43
    layui.use('layer',function(){ var layer = layui.layer; layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的String }); }); </script> 方法二、(推荐使...

     方法一、

    <script>
    layui.use('layer',function(){
    var layer = layui.layer;
    
        layer.open({
        type: 1, 
        content: '传入任意的文本或html' //这里content是一个普通的String
        });
    
    });
    </script>

    方法二、(推荐使用)

    <script>
    layui.use('layer',function(){
    var layer = layui.layer;
    
        layer.ready(function(){
          layer.msg('很高兴一开场就见到你');
        });  
    
    });
    </script>

     

    展开全文
  • 首先,小编要告诉大家一个残酷的现实,那就是小编没有找到layui对点击事件的支持… ...button class="layui-icon layui-icon-export" id="withExport"></button> 第一种,js的监听: .
  • img的onload的另类用法

    2020-10-30 13:55:17
    img的onload的另类用法
  • layui加载css, html,js 带上版本号这样升级页面的时候用户不用清除浏览器缓存* common.jsfunction Script(callback) {var js = document.createElement("script");this.js = js;js.type = "text/javascript";...
  • 一、关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下 function photoCompress(file, w, objDiv) { var ready = new FileReader(); /*开始读取指定的Blob对象或...ready.onload = function() { var
  • 工作中,需要快速开发,搭建网站。需要各种前端框架,比如说layUI、eChars、element等。之前使用较少,现做一个学习记录。一、LayUI前端框架layer 弹出层组件效果--layui的弹层模块可以单独使用...window.onload ...
  • Layui自定义插件分享

    2021-09-27 15:30:46
    * 自定义Layui自定义插件 * version: 1.2 * 基于layui-v2.5.7编写,整理常用方法,减少layui开发页面代码编写工作量 * 实现:1、自定义弹窗 * 2、自定义对话框弹出,按钮响应函数定义 * 3、自定义分页表格 ...
  • Layui常见问题

    2019-08-12 13:44:40
    在使用过程中常常遇到一些问题,有时候解决真的得靠运气,怕有时候记不住就记录在里面了;如果对使用懒UI的攻城狮们有些帮助请大家点个赞,博客会不断更新,欢迎大家在评论下面评论...layer.onload();    
  • 前端Layui

    2020-07-21 19:15:26
    <script type="text/javascript"> window.onload=function () { //抓元素 var btn = document.getElementById("btn"); btn.onclick=function () { // 一个漂亮的layer弹窗 layer.confirm('我要在问一遍?', { btn: ...
  • layui图片上传 单选以及多选压缩
  • 注意:也可以自定义css...4.引入layui的js文件之后,便可以使用layui形式的js写法啦(table列表渲染,layui文件上传,jQuery) layui.js文件源码 ;!function(e){"use strict";var t=document,n={modules:{},status:{
  • layui使用常见问题汇总

    千次阅读 2019-02-28 19:05:43
    原因是layui内置的Form模块为全自动渲染,她将原本普通的诸如select、checkbox、radio等元素重置为你所看到的模样,只要你的页面对应js有像以下定义即可渲染出来 layui.use('form', function(){ var form = ...
  • layui实现登录页面

    万次阅读 多人点赞 2019-09-29 17:37:50
    window.onload = createCode('#loginCode'); // 验证码切换 $('#loginCode').click(function () { createCode('#loginCode'); }); // 登陆事件 $('#loginBtn').click(function () { login(); }); // 注册...
  • layui上传视频

    千次阅读 2020-07-02 16:04:50
    找到layui上传视频的,整理一下 上传完之后是这样的 html代码 <div class="layui-form-item" style="width:200%;"> <label class="layui-form-label">商品视频</label> <div> <...
  • 目录ftl文件js文件 ftl文件 // A code block <div class="layui-tab-content"> <div class="layui-tab-item ...iframe width=100% id="myiframe" onload="setHeight()" height="1" frameborder="0" src="
  • layui分页 加下拉选择

    2020-10-29 17:14:24
    layui.use(['laydate', 'form', 'layer', 'laypage', 'table'], function () { var laydate = layui.laydate form = layui.form layer = layui.layer laypage = layui.laypage var pageSize = 5; //每页显示5条...
  • LayUI 图片预览功能

    2021-02-16 12:19:34
    img.onload = function (ev) { // 获取图片高度 var height = this.height; // 获取图片宽度 var width = this.width; // 图片URL地址 var imgHtml = ""; // 图片显示面积,前参数为宽,后参数为高 var area = []; if...
  • layui.upload.js 拖拽文件/文件夹上传下载
  • layui.layer弹层组件

    2020-10-23 17:47:28
    layui.layerlayui前端UI框架layer弹层组件layer使用方法layer方法使用layer.msg(content, options, end) - 提示框layer.load(icon, options) - 加载层layer.tips(content, follow, options) - tips层layer.alert...
  • 因工作需要,需要有拍照上传图片的功能。 查过N多文档,现做个整理,以便日后查看回顾。 1、前端 ...div class="upModalBox layui-upload"> <div class="upSon1"> <div class="borderBot
  • Layui.prototype.img = function(url, callback, error){ var img = new Image(); // 创建 img img.src = url ; // 赋值 url // complete 更多内容查看 ...
  • LayUI的卡片布局以及超链接带参跳转

    千次阅读 2020-12-15 15:18:12
    1. 怎么使用layui的卡片布局 2. 点击卡片布局中的卡片怎么跳转到对应tab页 3. 跳转怎么携带卡片中的内容作为参数 下面进入正文: 项目背景:tab页显示的数据为待审核关键字表中的数据,tab的header部分有几个单选...
  • LayUi集成下载Excel、word、PDF、CSV扩展

    千次阅读 2021-05-07 10:19:14
    LayUi集成下载Excel、word、PDF、CSV扩展Excel、CSVWordPDF过程中发现的问题 根据项目需求,主要用的layui这个前段框架,现在需要支持将页面下载为四种格式的文件。 Excel、CSV Word PDF 过程中发现的问题 ...
  • 踩的坑: 1、resetFile这个方法是layui 2.3.0 新增的,所以首先要确保layui的版本是最新的。 2、我把auto设置为false,点击btnHide时触发上传,我也试过自动上传,自动上传的话,这些操作的代码就要写在before方法...
  •  在使用 layui 框架写 jsp 的时候,使用 ajax 传递数据来刷新表单,发现使用 ajax 引用外部的jquery 和 layui 自带的jquery中,可能是 $导致select 下拉框中的option 没法在layui中正常使用(即数据传过去了,但是...
  • layui简易遮罩

    2021-05-21 11:31:27
    onload = function () { //开启遮罩 常用类型。。。 var loading1 = layer.msg('正在加载', { icon: 16, shade: 0.3, time: 0 }); var loading2 = layer.open({ type: 3, shade: [0.25, '#000'], icon: 2, speed: 0}...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,053
精华内容 421
关键字:

layui的onload