精华内容
下载资源
问答
  • $.ajaxSetup({ beforeSend: function () { layui.use('layer', function () { layui.layer.load(); //console.log(Lodingin...

     $.ajaxSetup({
                    beforeSend: function () {
                        layui.use('layer', function () {
                            layui.layer.load();
                            //console.log(Lodingindex) opacity
                            $(".layui-layer-shade").css('background', '#000000')
                            $(".layui-layer-shade").css('opacity', '0.2')
                            $(".layui-layer-shade").click(function (event) {
                                event.stopPropagation(); 
                            })
                        });
                    },
                    complete: function () {
                        //layui.use('layer', function () {
                        //    layui.layer.closeAll();
                        //    setTimeout(function () {
                        //        layui.layer.closeAll();
                        //    }, 2000);
                        //});
                    },
                    error: function () {
                        //layui.use('layer', function () {
                        //    layui.layer.closeAll();
                        //});
                    }
                });
                $(document).ajaxStop(function () {
                    layui.use('layer', function () {
                        layui.layer.closeAll();
                    });
                });

    展开全文
  • 关于layui

    2018-11-05 19:07:00
    1 layui是什么 前端UI框架,为后端程序员量身定做。 2 兼容性 兼容所有的浏览器。 3 layui手动加载模块 ...4 layui加载所有加载所有的模块 使用layui.all.js就可以了,但是这样耗内存。 5 lay...

    1 layui是什么

    前端UI框架,为后端程序员量身定做。

    2 兼容性

    兼容所有的浏览器。

    3 layui手动加载模块

    layui是模块化的,如果html中使用的是layui.js的话,那么layui的模块并不是默认就加载的,因此需要使用layui.use来手动加载相应的模块。

    4 layui加载所有加载所有的模块

    使用layui.all.js就可以了,但是这样耗内存。

    5 layui手动加载模块的经典用法/**

        //我们强烈推荐你在代码最外层把需要用到的模块先加载

        layui.use(['layer', 'form', 'element'], function(){

            var layer = layui.layer

            ,form = layui.form

            ,element = layui.element

            //……

            //你的代码都应该写在这里面

            });

    6 layui内置模块

    6.1 弹出层layer

    6.2 日期与时间选择laydate

    6.3 即时通讯layim

    6.4 分页laypage

    6.5 数据表格table

    6.6 表单form

    6.7 文件上传upload

    6.8 评分rate

    6.9 流加载flow

    6.10 工具集util

    6.11 滑块slider

    6.12 常用元素操作 element

    6.13 模版引起laytpl

    6.14 颜色选择器colorpicker

    6.15 轮播 carousel

    6.16 代码修饰器 code

     

        

     

    转载于:https://www.cnblogs.com/hustdc/p/9028560.html

    展开全文
  • layui上传文件loading加载动画

    千次阅读 2020-06-10 12:22:31
    jquery layui 开始请求打开layui加载动画 所有请求结束后关闭layui加载动画 ajaxSetup() 方法为将来的 AJAX 请求设置默认值。 $.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。 <span ...

    jquery layui 开始请求打开layui加载动画 所有请求结束后关闭layui加载动画

    ajaxSetup() 方法为将来的 AJAX 请求设置默认值。

    $.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。

    <span class="layui-layer-shad"></span>
    

    JQuer代码部分

    //加载样式
    $.ajaxSetup({
        beforeSend: function () {
            layui.use('layer', function () {
                layui.layer.load();
                $(".layui-layer-shade").css('background', '#000000')
                $(".layui-layer-shade").css('opacity', '0.2')
            });
        },
    });
    
    $.post("{:url('prescription/batch_import')}",$('#comment').serialize(),function(data){
    //关闭加载样式
     var  index = layui.layer.load();
    })            
    

    显示结果页面
    在这里插入图片描述参考文档:
    https://blog.csdn.net/yuyezhilv/article/details/91416375
    https://blog.csdn.net/qq_20042935/article/details/89447716

    有时间可以拓展了解

                    beforeSend: function () {
                        layui.use('layer', function () {
                            layui.layer.load();
                            //console.log(Lodingindex) opacity
                            $(".layui-layer-shade").css('background', '#000000')
                            $(".layui-layer-shade").css('opacity', '0.2')
                            $(".layui-layer-shade").click(function (event) {
                                event.stopPropagation(); 
                            })
                        });
                    },
                    complete: function () {
                        //layui.use('layer', function () {
                        //    layui.layer.closeAll();
                        //    setTimeout(function () {
                        //        layui.layer.closeAll();
                        //    }, 2000);
                        //});
                    },
                    error: function () {
                        //layui.use('layer', function () {
                        //    layui.layer.closeAll();
                        //});
                    }
                });
                $(document).ajaxStop(function () {
                    layui.use('layer', function () {
                        layui.layer.closeAll();
                    });
                });
    
    
    展开全文
  • Layui实现动态加载Tree

    千次阅读 2020-07-01 15:02:06
    目录前言基本使用尾言 前言 有空研究了一下Layui,感觉相对于EasyUI来说,美观了不少,接下来给大家介绍一下它的基本使用 基本使用 Layui官网 去官网下载好Layui,里面有示例和css、...非模块化方式所有模块一次性加载

    前言

    有空研究了一下Layui,感觉相对于EasyUI来说,美观了不少,结合后台加载动态Tree带大家初步了解一下这个框架

    实现步骤

    初步准备

    Layui官网
    去官网下载好Layui,里面有示例和css、js等文件
    在这里插入图片描述
    具体使用步骤:
    要使用Layui,必须引入css文件和js文件:

    <link rel="stylesheet" href="css/layui.css" />
    

    在这里插入图片描述
    Layui官方文档是说有两种加载方式的,也就是:非模块化方式和模块化方式
    两者区别就是:
    非模块化方式所有模块一次性加载,而模块化方式加载指定的模块:例如引用tree的模块…

    <script>
    layui.use('tree', function(){});
    </script>
    

    有一点注意:官方说的是使用非模块化方式加载引入的是layui.all.js文件,但是使用模块化加载时,引入layui.all.js才有样式效果,具体原因不太清楚(layui官方对tree组件可能做了更新,但是具体的更新日至稳定没见着)

    构建data数据源

    一起来看官方文档中对Tree组件的结构要求和参数介绍:
    在这里插入图片描述在这里插入图片描述为了追求简单实现效果,就不弄花里胡哨的了,直接拿最主要的属性:

            <script>
    			//由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
    			;
    			! function() {
    				var layer = layui.layer,
    					form = layui.form,
    					tree = layui.tree;
    					//渲染
    					tree.render({
    						elem: '#test1' //绑定元素
    							,
    						data: [//后台传入指定格式json对象数组]
    					});
    			}();
    		</script>
    

    后台构建对应节点:
    在这里插入图片描述TreeVo节点实体类:

    package com.xiaoyang.vo;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    
    public class TreeVo<T> {
    	/**
    	 * 节点ID索引
    	 */
    	private String id;
    	/**
    	 * 显示节点标题
    	 */
    	private String title;
    	/**
    	 * 节点的子节点
    	 */
    	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
    
    	/**
    	 * 父ID
    	 */
    	private String parentId;
    
    	public String getId() {
    		return id;
    	}
    
    	public void setId(String id) {
    		this.id = id;
    	}
    
    	public List<TreeVo<T>> getChildren() {
    		return children;
    	}
    
    	public void setChildren(List<TreeVo<T>> children) {
    		this.children = children;
    	}
    
    	public String getParentId() {
    		return parentId;
    	}
    
    	public void setParentId(String parentId) {
    		this.parentId = parentId;
    	}
    
    	public String getTitle() {
    		return title;
    	}
    
    	public void setTitle(String title) {
    		this.title = title;
    	}
    
    	public TreeVo(String id, String title, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
    			List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
    		super();
    		this.id = id;
    		this.title = title;
    		this.children = children;
    		this.parentId = parentID;
    	}
    
    	public TreeVo() {
    		super();
    	}
    
    }
    

    这里比较奇怪一点就是,明明官方文档写的指定数据源格式没有parentId等选项,我构建和EasyUI一样的数据源都能ok,感觉layui的文档完整性不太好…

    BuildTree构建节点结构方法类:

    package com.xiaoyang.util;
    import com.xiaoyang.vo.TreeVo;
    import java.util.ArrayList;
    import java.util.Collection;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    public class BuildTree {
    	/**
    	 * 指定idparam为顶级节点
    	 * @param nodes
    	 * @param idParam
    	 * @param <T>
    	 * @return
    	 */
    	public static <T> List<TreeVo<T>> buildList(List<TreeVo<T>> nodes, String idParam) {
    		if (nodes == null) {
    			return null;
    		}
    		List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();
    		for (TreeVo<T> children : nodes) {
    			String pid = children.getParentId();
    			if (pid == null || idParam.equals(pid)) {
    				topNodes.add(children);
    				continue;
    			}
    			for (TreeVo<T> parent : nodes) {
    				String id = parent.getId();
    				if (id != null && id.equals(pid)) {
    					parent.getChildren().add(children);
    					continue;
    				}
    			}
    		}
    		return topNodes;
    	}
    }
    

    后台方法构建好后,只需将数据源进行Json解析后,进行后台获取输出到页面即可:

           /**
    		 * 封装节点方法
    		 * @param menu
    		 * @param pageBean
    		 * @return
    		 * @throws SQLException 
    		 * @throws IllegalAccessException 
    		 * @throws InstantiationException 
    		 */
    		public List<TreeVo<Permission>> topNode(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
    			List<Permission> list = this.list(permission, pageBean);
    			List<TreeVo<Permission>> nodes = new ArrayList<TreeVo<Permission>>();
    			TreeVo treevo = null;
    			for (Permission m : list) {
    				treevo = new TreeVo<>();
    				treevo.setId(m.getId()+"");//设置节点id
    				treevo.setTitle(m.getName()+"");//设置节点文本
    				treevo.setParentId(m.getPid()+"");//设置父节点
    				nodes.add(treevo);
    			}
    			return BuildTree.buildList(nodes,"0");//返回构建好的节点树结构
    		}
    
       /**
    	 * 对传入节点进行Json解析,并输出到页面
    	 * @param response
    	 * @param o
    	 * @throws Exception
    	 */
    	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
    		response.setContentType("text/html;charset=utf-8");
    		ObjectMapper om=new ObjectMapper();
    		String jsonStr = om.writeValueAsString(o);
    		PrintWriter out=response.getWriter();
    		System.out.println(jsonStr.toString());
    		out.println(jsonStr.toString());
    		out.flush();
    		out.close();
    	}
    

    到这里,后台已经搞定,重要的部分来了:由于官方文档并没有看到Tree结构后台动态加载,也没有提供类似于url的跳转路径参数,所以博主结合ajax跳转后台获取数据源:

    //由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
    ;
    !function() {
    	var id = "";
    	var atitle = "";
    	var layer = layui.layer, form = layui.form, tree = layui.tree, element = layui.element;
    	// 渲染
    	tree.render({
    		elem : '#test1' // 绑定元素
    		,
    		data :eval('(' + getData() + ')'),
    	});
    }();
    function getData(){
    	var ctx=$("#ctx").val();
    	var data ;
    	$.ajax({
    		url:ctx+"/permission.action?opt=PermissionTree",
    		type:"post",
    		async:false,
    		success:function(result){
    			data=result;
    		}
    	});
    	return data;
    }
    
    

    这里一定要注意一点:一定要将获取到的数据源进行eval()函数的转换,否则所有节点都是未定义,
    取到的getData()是一个字符串而不是一个对象,所以下面取不到对象的属性,类似于:

             <script>
    				var jsonData = [{
    					"id": "1",
    					"title": "书籍管理",
    					"state": null,
    					"checked": false,
    					"attributes": null,
    					"children": [],
    					"parentId": "0",
    					"hasParent": false,
    					"hasChildren": false
    				}];
    			   console.log(jsonData.id);
    		</script>
    
    undefined
    

    数据库表结构:
    在这里插入图片描述
    最后附上效果图:
    在这里插入图片描述

    展开全文
  • layui 动态加载多页面并导出全量数据 先上图,点不同的按钮加载不同的table,显示不同的数据,查询条件对所有的table都有效。 HTML的table代码截图 js 代码 $(function () { var url = '/xxxx/xxxxx?xxxx=';//...
  • 用到知识点表单监听 form.on局部表单渲染 form.render动态加载的select表单 必须有默认的option项(第一个option) 要不然layui 不会渲染出 select 组件代码如下:添加数据  返回列表//查找所有的助理 5 是助理$...
  • 目的: 思路:①、界面打开则加载Tree数据 和 Table... ②、用户点击某个节点则加载该节点的所有数据、 过程: 1、先加载table数据 // 显示右侧表格数据 var tableIns = table.render({ elem: '#test' ...
  • layui 树形表格—优化加载速度

    千次阅读 2019-09-10 14:44:59
    项目中要用layui的树形表格实现某个功能,之前用了一种办法,但是当数据量比较大的时候(一次性返回了省市县所有的数据,大概4000条),加载速度比较慢,无奈又换了一种实现办法。 之前实现的方法:...
  • 进入页面后会加载所有的请求,但当我们嵌入的是iframe,需要切换页面才加载对应页面的请求,这样做就行了 <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li class="layui...
  • 使用layui是报错layui is not defined

    千次阅读 2020-03-29 18:56:05
    错误放上 ...原因:这是由于你导入自己写的js文件才导入layui.js文件,因为程序从上到下执行,先执行你写的js文件中这段话,这时候没有加载layui.js,所以不认识layui是什么东西所有报错。 解决方案:先...
  • layui源码详细分析系列之流加载模块

    千次阅读 2017-08-07 19:53:15
    具体的体现是在页面初始化时,先加载一小部分内容,当用户下拉页面到一定的距离,开始加载另一小部分的内容,直至将所有资源加载呈现,体现的是化整为零的思想,具有较好地用户体现效果。自实现流加载以及图片懒加载...
  • Layui数据表格

    2019-06-27 21:42:49
    数据表格的加载:用了layui插件里面的数据表格,加载表格,首先需要给它准备好一个Demo,存放所有的数据,这里需要加载所有的仓库。 加载表格之前要声明两个全局变量以方便使用,一个是数据表格Demo,一个是laer跟...
  • layui提供了丰富的内置模块,他们皆可通过模块化的...table.js1、描述:【所有浏览器】 加载图标是静止的,想要做成动画。解决:寻找到每一个"layui-icon-loading",添加上"layui-anim layui-anim-rotate layui-ani...
  • 目录 概述 1.... 2.... 2.1 本组件依赖于treetable.js【重中之重】 2.2 本组件基于layUIAdmin进行使用 2.3 本组件的方法支持treetable.js的所有方法; 2.4 本组件不支持的其他方法,均可使...
  • layui select回显问题

    2020-07-23 17:22:34
    layui.form.render("select") 不会清空其他select formSelects.render();...加载单选的最好放在layui.use('form', function() {}中 多选的回显放在layui.use(['jquery', 'formSelects'], function(){}中
  • layui动态赋值select标签

    千次阅读 2020-02-16 13:34:55
    layui select标签中,请求...因为在layui所有的组件都是声明使用 ,你表面上看了是一个select类型的显示类型但是并不是。需要手动声明吧数据加载进form里面。简而言之就是在代码最后执行一次 form.render(); ...
  • 基本思路后台提供根据区域编码查询区域列表公共接口页面初始化调用后台接口加载所有省份点击省份将省份区域编码传入后台查询该省份下所有地市信息,以此类推2.数据表结构展示SELECTCOLUMN_NAME 列名,DATA_TYPE 字段...
  • layui初始化列表的CheckBox属性详解,初始化属性通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式的时候始终...
  • layui 分页勾选。

    2021-02-24 15:10:59
    有想过按照不同页面来进行,但万一选择了页数,又发生改变,数据又对不上号,又得重新来选,就直接把所有id直接存起来,勾选后保存id,取消勾选删除id,加载后匹配id设置勾选效果。 又不懂的可以私信我 <!...
  • 一、先加载所有的主菜单,之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过,那么动态添加了菜单,这里显示不出来,不判断的话,每次点击都会请求一次,这样请求的次数就太多了,服务器不太好的...
  • layui关闭弹窗

    2020-12-16 15:18:47
    可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) layer.closeAll(); //关闭所有层 layer.closeAll(‘dialog’); //关闭信息框 layer.closeAll(‘page’); //关闭所有页面层 layer....
  • layui的form的学习笔记

    2020-11-22 15:40:42
    后来查了下官方文档(遇到问题查官方文档很多都能解决),自己只进行了layui的css、js的文件的引入,没有对form模块进行加载,调用 render(type, filter) 后就可以正常显示form表单的所有的元素了。 <!DOCTYPE ...
  • 可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)layer.closeAll(); //关闭所有层layer.closeAll(‘dialog’); //关闭信息框layer.closeAll(‘page’); //关闭所有页面层layer.closeAll(...
  • layui的layer弹出层和form表单

    万次阅读 多人点赞 2019-06-27 22:33:12
    文章目录弹出层layerform表单增删改查所有代码 如果想用layui来完成增删改查,那么要会用弹出层和form表单这两个组件是...那么就需要先这样定义,你的操作都是在这个里面进行,当然页可以一次性加载所有模块,详情...
  • layui-v2.4.5 兼容性微调

    2019-03-05 21:58:39
    layui 的社区已经写过了,但是社区的编辑...描述:【所有浏览器】 加载图标是静止的,想要做成动画。解决:寻找到每一个layui-icon-loading,添加上 class layui-anim layui-anim-rotate layui-anim-loop即可。 ...
  • pjax+layui遇到的坑

    2019-09-30 05:54:05
    观点1:当使用layui中elment.on或form.on事件(也就是所有利用layui里面的on去绑定事件)时,利用pjax加载页面,并且多个页面包含相同 lay-filter元素时,某一个页面绑定的lay-filter元素事件处理程序会在其他未...

空空如也

空空如也

1 2 3 4 5
收藏数 90
精华内容 36
关键字:

layui加载所有