信息
最新版本
2.5.6,2020-01-15 [4]
类    型
开源的模块化前端 UI 框架 [1]
面向人群
后端开发者,前端工程师
优    点
原生开发模式、模块化、兼容性强 [3]
外文名
layui [1]
作    者
贤心 [2]
layui存在价值
事实上,layui更多是面向于后端开发者,所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式,却又并非受限于 CommonJS 的那些条条框框,它拥有自己的模式,更加轻量和简单。layui 定义为“经典模块化”,并非是刻意强调“模块”理念本身,而是有意避开当下 JS 社区的主流方案,试图以尽可能简单的方式去诠释高效!它的所谓经典,是在于对返璞归真的执念,它以当前浏览器普通认可的方式去组织模块! layui 认为这种轻量的组织方式,仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化,也正是能让人避开工具的复杂配置,重新回归到原生态的 HTML/CSS/JavaScript本身! [3] 
收起全文
精华内容
参与话题
问答
  • layui 表单标签的校验

    万次阅读 2017-10-19 09:42:04
    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值同时支持多条规则的...

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程

    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。

    required(必填项)
    phone(手机号)
    email(邮箱)
    url(网址)
    number(数字)
    date(日期)
    identity(身份证)
    自定义值
    

    同时支持多条规则的验证,格式:lay-verify=“验证A|验证B”
    如:lay-verify=“required|phone|number”

    另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify=“pass”,那么你就需要借助form.verify()方法对pass进行一个校验规则的定义

    示例:

    <div class="layui-form-item">
            <label for="" class="layui-form-label">请输入邮件</label>
            <div class="layui-input-block">
                <input type="text" placeholder="请输入邮件" lay-verify="email" class="layui-input">
            </div>
        </div>
    

    填入非法邮件时,点击提交会有笑脸图标提示,挺棒的!

    这里写图片描述

    自定义校验:

    form.verify({
      username: function(value, item){ //value:表单的值、item:表单的DOM对象
        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
          return '用户名不能有特殊字符';
        }
        if(/(^\_)|(\__)|(\_+$)/.test(value)){
          return '用户名首尾不能出现下划线\'_\'';
        }
        if(/^\d+\d+\d$/.test(value)){
          return '用户名不能全为数字';
        }
      }
      
      //我们既支持上述函数式的方式,也支持下述数组的形式
      //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
      ,pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位,且不能出现空格'
      ] 
    });
    

    当你自定义了类似上面的验证规则后,你只需要把key赋值给输入框的 lay-verify 属性即可:

    <input type="text" lay-verify="username" placeholder="请输入用户名">
    <input type="password" lay-verify="pass" placeholder="请输入密码">
    

    ###专业墙纸贴纸厨房用具装饰出售,本人网店经营
    博客对你有用记得访问下哦,增加下访问量,如有需要可以下单购买哦_。https://item.taobao.com/item.htm?id=569617707364

    展开全文
  • layUI展示树状treetable树形表格完整代码

    万次阅读 多人点赞 2018-10-23 10:01:33
    前言:因项目功能需要,在shiro权限管理模块中需要使用树状展示,前端使用的layUI框架,在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档:https://www.layui.com/doc/modules/tree.html 树状表格...

    前言:因项目功能需要,在shiro权限管理模块中需要使用树状展示,前端使用的layUI框架,在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档:https://www.layui.com/doc/modules/tree.html

    –modify from 2020-11-06 09:01
    **示例下载:**https://download.csdn.net/download/qq_35393472/13090180
    –modify from end

    树状表格步骤如下:

    1、首先下载所需调用的文件。
    下载链接:https://pan.baidu.com/s/1MRZT4VI4rUTzKL_ap5yipw

    2、引入刚刚下载的文件 (压缩包中有:module文件夹 和json文件夹)
    module文件中是需要调用的js和css
    json是后端所需要给前端传的数据格式(例子,不是下方代码的数据)。

    3、还需要正常的引用layUI的必要文件(例如:layui.js、layui.css等,根据项目所需!)

    HTML:(下方的table标签 和 最后三个button 是重要代码,其他可忽略)

      <div class="xm">
                <div class="xm-d1">
                    <p class="xm-d1-p">权限管理</p>
                 </div>
                 
                  <div class="xm-d2">
                    <div class="xm-d2-hang1">
                      <div class="pzright" style="width:101%;display: flex;justify-content: flex-start;float:right;">
                        <p class="xm-d1-p2">
                    	 	<button id="add" onclick="addPermission()" class="layui-btn layui-btn-radius btnys"><i class="layui-icon">&#xe608;</i>添加</button>
    				        <button class="layui-btn" id="btn-expand">全部展开</button>
    				        <button class="layui-btn" id="btn-fold">全部折叠</button>
    				        <button class="layui-btn" id="btn-refresh">刷新表格</button>
                       </p>
                      </div>  
                     <div class="clear"></div>  
                    </div>
                    <div class="xm-d2-hang2">
    				   <table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
                    </div>
                </div>
                
            </div>
    

    主要代码:(JavaScript)

        /*使用模块加载的方式 加载文件*/
        layui.config({
            base: '${ctx}/resoueces/css/layui/module/'
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use(['layer', 'table', 'treetable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var layer = layui.layer;
            var treetable = layui.treetable;
    
            // 渲染表格
            var renderTable = function () {//树桩表格参考文档:https://gitee.com/whvse/treetable-lay
                layer.load(2);
                treetable.render({
                    treeColIndex: 1,//树形图标显示在第几列
                    treeSpid: 0,//最上级的父级id
                    treeIdName: 'permissionId',//id字段的名称
                    treePidName: 'pid',//pid字段的名称
                    treeDefaultClose: false,//是否默认折叠
                    treeLinkage: true,//父级展开时是否自动展开所有子级
                    elem: '#permissionTable',
                    url: '${ctx}/permission/permissionTree',
                    page: false,
                    cols: [[
                        {type: 'numbers', title: '编号'},
                        {field: 'permissionName', title: '资源名称'},
                        {field: 'permissionUrl', title: '资源路径'},
                        {field: 'permissionType', title: '资源简介'},
                        {field: 'pid', title: '排序'},
                        {field: 'resType', title: '类型',
                        	templet: function(d){
                        		if(d.resType==0){
                        			return '菜单';
                        		}else{
                        			return '按钮';
                        		}
                            }	
                        },
                        {templet: complain, title: '操作'}
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                });
            };
    
            renderTable();
            
    		//触发三个button按钮
            $('#btn-expand').click(function () {
                treetable.expandAll('#permissionTable');
            });
    
            $('#btn-fold').click(function () {
                treetable.foldAll('#permissionTable');
            });
    
            $('#btn-refresh').click(function () {
                renderTable();
            });
    		
            
            function complain(d){//操作中显示的内容
            	if(d.permissionUrl!=null){
            		return [
                            '<a class="operation" lay-event="edit" href="javascript:void(0)" onclick="editDepartment(\''+ d.permissionId + '\')" title="编辑">',
                	     	'<i class="layui-icon layui-icon-edit"></i></a>',
                	     	'<a class="operation" lay-event="" href="javascript:void(0)" onclick="delDepartment(\''+ d.permissionId + '\')" title="删除">',
                	     	'<i class="layui-icon layui-icon-delete" ></i></a>',
                	     	].join('');
            	}else{
            		return '';
            	}
            	
            }
            //监听工具条
            table.on('tool(permissionTable)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
    			if(data.permissionName!=null){
    				if (layEvent === 'del') {
    	                layer.msg('删除' + data.id);
    	            } else if (layEvent === 'edit') {
    	                layer.msg('修改' + data.id);
    	            }
    			}
            });
        });
    

    备注:另外对数据库的表要有一定的等级关系。要有pid列

    效果图:在这里插入图片描述

    我的后端传给前端的json:(请做参考,数据库表列同内容)

    {"msg":"true","code":0,"data":[{"permissionId":1,"permissionName":"系统管理","permissionUrl":null,"permissionType":null,"icon":null,"pid":0,"seq":0,"resType":"0"},{"permissionId":2,"permissionName":"账户管理","permissionUrl":"/link/sysUsers","permissionType":"管理登录的账户","icon":null,"pid":1,"seq":1,"resType":"1"},{"permissionId":3,"permissionName":"部门管理","permissionUrl":"/link/deparAdministrate","permissionType":"部门的管理","icon":null,"pid":1,"seq":2,"resType":"1"},{"permissionId":4,"permissionName":"角色管理","permissionUrl":"/link/sysRoleManage","permissionType":"设定角色的权限","icon":null,"pid":1,"seq":3,"resType":"1"},{"permissionId":5,"permissionName":"权限管理","permissionUrl":"/link/sysPermission","permissionType":"对权限进行编辑","icon":null,"pid":1,"seq":4,"resType":"1"},{"permissionId":6,"permissionName":"系统日志","permissionUrl":"/link/sysLog","permissionType":"系统日志","icon":null,"pid":1,"seq":5,"resType":"1"}],"count":6}
    

    如果上方对您有帮助 还请您可以随意施舍一点,有问题也可加V(1173681997):
    在这里插入图片描述

    展开全文
  • Layui 关闭layui的tab页

    千次阅读 2020-08-16 10:44:22
    var admin = layui.admin; var topAdmin = parent === self ? admin : parent.layui.admin; // 关闭tab页 topAdmin.closeThisTabs(); $("#LAY_app_tabsheader>li").eq(admin.tabsPage.index).find('.layui-...
    引用admin.js。
     var admin = layui.admin;
    
    
     var topAdmin = parent === self ? admin : parent.layui.admin; // 关闭tab页
              topAdmin.closeThisTabs();
              $("#LAY_app_tabsheader>li").eq(admin.tabsPage.index).find('.layui-tab-close').trigger('click');
    
    展开全文
  • layui的分页+模糊查询

    2019-05-15 17:33:08
    layui.use('upload', function(){ var upload = layui.upload; var $ = layui.jquery layui.use('table', function(){ var table = layui.table,//表格 laypage = layui.laypage,//分页 layer = ...
  • layui 如何取得select下拉框选中的值

    万次阅读 热门讨论 2018-07-13 09:58:05
    引用layui插件,取得下拉框的值模板:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" ...
    var addressid = $('#addressid[name=addressid]').val()

     

    引用layui插件,取得下拉框的值

     

    模板:

    <!DOCTYPE html>
    <html>				
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>增加、修改学校/层次/专业</title>
      <link rel="stylesheet" href="__ADMIN__/common/frame/layui/css/layui.css">
    </head>
    <body>
    <div class="layui-fluid layui-form">
    <form class="layui-form" action="" method="post">
    <br>
              <div style="padding-left: 100px; padding-bottom: 20px;"><h2>{$rs1.title} >> {$rs.title}</h2></div>
              <div class="layui-form-item">
                <label class="layui-form-label">学费</label>
                <div class="layui-input-block">
                  <input type="text" name="price" required  lay-verify="required" class="layui-input" value="{$rs.price}" readonly>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">批次</label>
                <div class="layui-input-block">
    							<select name="batch" id="batch" lay-filter="batch" lay-verify="required" lay-search="required">
                       <option value="">请选择批次</option>
                      {volist name="batch_rs" id="batch"}
    							    <option value="{$batch.id}" {if condition="$rsEdit.batch eq $batch.id"}selected{/if}>{$batch.title}</option>
    							    {/volist}
    							</select>  
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="button" id="editbatchschooltuition" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                </div>
              </div>
    
    </form>
    </div>
    <script src="__ADMIN__/common/frame/layui/layui.js"></script>
    <script>
    layui.use(['form', 'jquery'], function(){
      var form = layui.form
      ,$= layui.$;
      
    // var batch=$("#batch").val();
       
    form.on('select', function(data){
      console.log(data.elem); //得到select原始DOM对象
      console.log(data.value); //得到被选中的值]
      $("#batch").val(data.value)
      console.log(data.othis); //得到美化后的DOM对象
    });  
       
      	$('#editbatchschooltuition').on('click', function(){
      		var batch=$("#batch").val();
      			alert(batch);
    						layer.ready(function(){ 
    							  layer.open({
    								type: 2,
    								title: '增加',
    								maxmin: true,
    								area: ['750px', '400px'],
    								content: '{:url('main/addschool')}?id={$id}&price={$rs.price}&batch='+batch,
    								//content: '{:url('main/addschool')}',
    								cancel: function(){ //刷新网页
    			
    								  }
    							  });
    						});
    		});
      
    });
    </script>
    </body>

     

     

     

    展开全文
  • layui单选框未显示的问题

    万次阅读 2020-02-10 18:06:23
    一开始还没导入idea的时候,单纯点击一个网页是有显示出来的,当我把这个带有单选框的网页放到idea的项目中去的时候,发现单选框没显示出来。 1.首先在确认js.css等东西有导入,和之前的网页也没有什么区别 ...
  • <div class="layui-form-item"> <label class="layui-form-label">*行为概述: <div class="layui-input-block"> ;" placeholder="请输入行为概述" autocomplete="off" class="layui-textarea">${...
  • <button type="button" lay-submit="" class="layui-btn layui-btn-xs" id="exportWord" name="exportWord"> <i class="layui-icon">导出Word <div class="layui-btn-container" id=...
  • document.getElementById('hide').className="layui-color layui-icon layui-icon-shrink-right"; } function ulHide(){ if(isShow===-1) show(); isShow=1; } </script>
  • layui 不进入 layui.extend

    2020-06-04 14:39:58
    layui.extend写在layui.js引入之后,如:
  • layui乱码

    2020-06-10 23:18:14
    0、描述:layui乱码 1、位置:表格顶部底部 2、尝试过的 转码 charset 3、我的问题及解决: 原本引入的文件是layui.all.js 改成layui.js 直接就好了。。。
  • Layui文件下载

    万次阅读 2019-09-10 09:27:20
    Layui超实用10篇技术解决方案:https://blog.csdn.net/libusi001/article/details/100065911 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...div class="layui-body"> <!-- 内容主体区域 --> <...
  • spring boot+layui实现增删改查实战

    千次阅读 多人点赞 2019-12-24 01:43:23
    最近在做一个后台,希望用一个现成的前端模板,找了一圈发现Layui比较合适。我知道很多人都有这个需求,为了使大家快速上手,我把自己写的最实用的增删改查案例完整的展示出来。 需要源码的请留下邮箱! ...
  • layui按钮

    2020-02-28 10:42:24
    按钮类设置:class=“layui-btn” ;不设置其它任何二级类名就是普通按钮 1 主题类 :layui-btn-primary 原始主题。 原始 class=“layui-btn layui-btn-primary” 默认 class=“layui-btn” 百搭 class=“layui-btn ...
  • layui滑动验证

    千次阅读 2020-07-26 17:36:38
    效果图: 代码下载地址:
  • 小编最近遇到一个问题,需要使用layui中的table 来动态添加一行,添加行需要实现 效果呢,表格可以编辑,同一行,不同列有具体的数据,下拉框,对行中所编辑或者选中的数据能够进行保存到数据中,可以给我一些跳出...
  • layui ztree 实现下拉树

    万次阅读 热门讨论 2018-01-26 15:42:11
    完整代码下载 JS 代码 //id div 的id,isMultiple 是否多选,chkboxType 多选框类型{"Y": "ps", "N": "s"} 详细请看ztree官网 function initSelectTree(id, isMultiple, chkboxType) { var setting = { ...
  • layui分页成功,但点击页数时,列表数据正确,但是页数还是显示到第一页 需要设置如图的属性,需要把点击的页数传过去。 参考文献 https://blog.csdn.net/Pruett/article/details/84070618 button和input的区别 ...
  • layui进度条

    千次阅读 2019-10-02 13:15:24
    layui-progress 代表一个进度条 |-- layui-progress-bar 代表进度条里面的进度 layui-progress-big 变粗了 相关属性 lay-percent 代表进度值 lay-showpercent="true" 是否显示进度值 代码如下图: <%-...
  • 使用layui做弹出层如图一,关闭窗口后,div又显示在了页面中如图二,正常情况是关闭窗口也隐藏,这是是什么原因呢?是不是导报包不对,求大佬指点![图片说明]...
  • layui之动态数据表格

    万次阅读 2018-07-19 09:53:14
    layui数据动态表格,如果返回的json格式是默认格式就好了,从api上直接copy下来用就可以,可是我这里返回的json格式如下: { "code": 200, "content": { "currentPage": 1, &...
  • <table class="layui-hide" id="demo" lay-filter="test"> <div class="disease-detail-box"></div> //disease-detail-box内容后台拼出来的 $(function () { butnSel(); }); function butnSel() { ...
  • 使用Layui搭建后台管理界面

    万次阅读 多人点赞 2019-08-05 21:56:20
    Layui是一个样式比较丰富艳丽的UI框架,通过自学了相关api文档,自己手工搭建了一个后台管理页面。页面布局是常用的一套,上面是一个logo,左边区域是一个导航,中间是内容tab页,底部是版权信息,好了,看代码吧!&...
  • 使用layui 渲染table数据表格

    万次阅读 热门讨论 2018-04-18 15:37:00
    先上最终效果图:1,引入layui的css和js文件&lt;link rel="stylesheet" href="lib/layui/css/layui.css"&gt;&lt;script src="lib/layui/layui.js"&gt;&lt;/...
  • layui路径

    千次阅读 2019-09-03 11:12:29
    关于路径的区别写法:../是跳级的意思
  • layui简介

    千次阅读 2019-05-05 23:49:32
    layui是什么? layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处...
  • 虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪。 html: &lt;input type="text" lay-verify="digital" ...
  • ** 有已审核和未审核两个功能,我的想法就是根据后端传我的is_audit(是否审核)来判断渲染,用的是公共的一个js,在两个html页面进行判断,用的layui模板引擎** ![图片说明]...
  • layui treeSelect

    千次阅读 2019-08-01 10:52:00
    下拉树选择 1.下载地址:...input type="text" id="ParentIdTree" lay-filter="ParentIdTree" class="layui-input">//下拉选择 <input type="text" name="ParentId" id...

空空如也

1 2 3 4 5 ... 20
收藏数 26,062
精华内容 10,424
关键字:

layui