信息
最新版本
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展示树状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 如何取得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的分页+模糊查询

    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 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 = { ...

    多选下拉

    多选下拉选中

    单选下拉

    单选下拉选中

    完整代码下载
    JS 代码

    
    //id div 的id,isMultiple 是否多选,chkboxType 多选框类型{"Y": "ps", "N": "s"} 详细请看ztree官网
    function initSelectTree(id, isMultiple, chkboxType) {
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            check: {
                enable: false,
                chkboxType: {"Y": "ps", "N": "s"}
            },
            callback: {
                onClick: onClick,
                onCheck: onCheck
            }
    
        };
        if (isMultiple) {
            setting.check.enable = isMultiple;
        }
        if (chkboxType !== undefined && chkboxType != null) {
            setting.check.chkboxType = chkboxType;
        }
        var html = '<div class = "layui-select-title" >' +
            '<input id="' + id + 'Show"' + 'type = "text" placeholder = "请选择" value = "" class = "layui-input" readonly>' +
            '<i class= "layui-edge" ></i>' +
            '</div>';
        $("#" + id).append(html);
        $("#" + id).parent().append('<div class="tree-content scrollbar">' +
            '<input hidden id="' + id + 'Hide" ' +
            'name="' + $(".select-tree").attr("id") + '">' +
            '<ul id="' + id + 'Tree" class="ztree scrollbar" style="margin-top:0;"></ul>' +
            '</div>');
        $("#" + id).bind("click", function () {
            if ($(this).parent().find(".tree-content").css("display") !== "none") {
                hideMenu()
            } else {
                $(this).addClass("layui-form-selected");
                var Offset = $(this).offset();
                var width = $(this).width() - 2;
                $(this).parent().find(".tree-content").css({
                    left: Offset.left + "px",
                    top: Offset.top + $(this).height() + "px"
                }).slideDown("fast");
                $(this).parent().find(".tree-content").css({
                    width: width
                });
                $("body").bind("mousedown", onBodyDown);
            }
        });
        $.fn.zTree.init($("#" + id + "Tree"), setting, zNodes);
    }
    
    function beforeClick(treeId, treeNode) {
        var check = (treeNode && !treeNode.isParent);
        if (!check) alert("只能选择城市...");
        return check;
    }
    
    function onClick(event, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        if (zTree.setting.check.enable == true) {
            zTree.checkNode(treeNode, !treeNode.checked, false)
            assignment(treeId, zTree.getCheckedNodes());
        } else {
            assignment(treeId, zTree.getSelectedNodes());
            hideMenu();
        }
    }
    
    function onCheck(event, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        assignment(treeId, zTree.getCheckedNodes());
    }
    
    function hideMenu() {
        $(".select-tree").removeClass("layui-form-selected");
        $(".tree-content").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    
    function assignment(treeId, nodes) {
        var names = "";
        var ids = "";
        for (var i = 0, l = nodes.length; i < l; i++) {
            names += nodes[i].name + ",";
            ids += nodes[i].id + ",";
        }
        if (names.length > 0) {
            names = names.substring(0, names.length - 1);
            ids = ids.substring(0, ids.length - 1);
        }
        treeId = treeId.substring(0, treeId.length - 4);
        $("#" + treeId + "Show").attr("value", names);
        $("#" + treeId + "Show").attr("title", names);
        $("#" + treeId + "Hide").attr("value", ids);
    }
    
    function onBodyDown(event) {
        if ($(event.target).parents(".tree-content").html() == null) {
            hideMenu();
        }
    }
    

    HTML代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
        <link rel="stylesheet" type="text/css" href="../static/ztree/css/metroStyle/metroStyle.css">
        <link rel="stylesheet" type="text/css" href="../static/plugin/css/index.css">
        <script type="text/javascript" src="../static/layui/layui.js"></script>
        <script type="text/javascript" src="../static/ztree/js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="../static/ztree/js/jquery.ztree.all.js"></script>
        <script type="text/javascript" src="../static/plugin/js/selectTree.js"></script>
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">layui 后台布局</div>
            <!-- 头部区域(可配合layui已有的水平导航) -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="">控制台</a></li>
                <li class="layui-nav-item"><a href="">商品管理</a></li>
                <li class="layui-nav-item"><a href="">用户</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">其它系统</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">邮件管理</a></dd>
                        <dd><a href="">消息管理</a></dd>
                        <dd><a href="">授权管理</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        贤心
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">退了</a></li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
                <ul class="layui-nav layui-nav-tree">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">所有商品</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">列表一</a></dd>
                            <dd><a href="javascript:;">列表二</a></dd>
                            <dd><a href="javascript:;">列表三</a></dd>
                            <dd><a href="">超链接</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" lay-filter="test">解决方案</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">列表一</a></dd>
                            <dd><a href="javascript:;">列表二</a></dd>
                            <dd><a href="">超链接</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">云市场</a></li>
                    <li class="layui-nav-item"><a href="">发布商品</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <div id="demo" class="layui-form-select select-tree">
                    </div>
                </div>
            </div>
            <div class="layui-input-inline">
                <div id="demo2" class="select-tree layui-form-select">
                </div>
            </div>
        </div>
        <div class="layui-footer" style="text-align: center">
            © layui.com - 底部固定区域
        </div>
    </div>
    <script>
        layui.use(['form', 'element'], function () {
        });
        var zNodes = [
            {id: 1, pId: 0, name: "北京"},
            {id: 2, pId: 0, name: "天津"},
            {id: 3, pId: 0, name: "上海"},
            {id: 6, pId: 0, name: "重庆"},
            {id: 4, pId: 0, name: "河北省", open: true, "chkDisabled": true},
            {id: 41, pId: 4, name: "石家庄"},
            {id: 42, pId: 4, name: "保定"},
            {id: 43, pId: 4, name: "邯郸"},
            {id: 44, pId: 4, name: "承德"},
            {id: 5, pId: 0, name: "广东省", open: true},
            {id: 51, pId: 5, name: "广州"},
            {id: 52, pId: 5, name: "深圳"},
            {id: 53, pId: 5, name: "东莞"},
            {id: 54, pId: 5, name: "佛山"},
            {id: 6, pId: 0, name: "福建省", open: true},
            {id: 61, pId: 6, name: "福州"},
            {id: 62, pId: 6, name: "厦门"},
            {id: 63, pId: 6, name: "泉州"},
            {id: 64, pId: 6, name: "三明"}
        ];
    
        $(document).ready(function () {
            initSelectTree("demo", true, {"Y": "ps", "N": "s"})
            initSelectTree("demo2", false);
            })
        });
    </script>
    </body>
    </html>
    
    展开全文
  • 使用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;/...

    先上最终效果图:

    1,引入layui的css和js文件

                

    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script src="lib/layui/layui.js"></script>

    2,在页面放置一个table元素

     

    <table class="layui-hide" id="test" lay-filter='test3'></table>

    3,通过 table.render() 方法指定该容器

     

    
     

    4,这个时候你的页面差不多就是以下这个样子了

     

    5,正文到了,怎么把表格数据渲染进去呢?咱们上面第三部就是渲染的一中方法,叫“方法渲染”,layui官网提供的三种渲染

    方法,在这里不做陈述,方法渲染的优点是:你可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显,

    layui的url默认是“get”请求,我这边是post请求,所以记得加上“method”属性为post,

    6,容易碰到的问题,按理来说这个时候应该已经可以看到表格数据了,为什么大多数人的表格还是渲染不出来呢?一般是因为你没配置后台数据格式

    response: {
        statusName: 'code' //数据状态的字段名称,默认:code
        ,statusCode: 200 //成功的状态码,默认:0
        ,msgName: 'msg' //状态信息的字段名称,默认:msg
        ,countName: 'count' //数据总数的字段名称,默认:count
        ,dataName: 'data' //数据列表的字段名称,默认:data
    }
    layui.use('table', function(){
                var table = layui.table;
    //            var playerName;
    //            if(item != undefined) {
    //                playerName=item;
    //            }
                table.render({
                    elem: '#test'  table 容器的选择器或 DOM
                    ,url:'http://boss.superlychee.com/rest/web/golfTourManage/getGolfTourPlayerByTourIdAndRounds'
                    ,method:'post'
                    ,where:{tourId:tourIds,rounds:rounds,playerName:item}
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
                    ,cols: [[
                        {field:'tourPlayerId', width:80, title: 'ID1', sort: true}
                        ,{field:'playerName', width:80, title: '姓名'}
                        ,{field:'hole1',  title: '1',edit: 'text'}
                        ,{field:'hole2', title: '2',edit: 'text'}
                        ,{field:'hole3', title: '3',edit: 'text'} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
                        ,{field:'hole4', title: '4',edit: 'text'}
                        ,{field:'hole5', title: '5',edit: 'text'}
                        ,{field:'hole6', title: '6',edit: 'text'}
                        ,{field:'hole7', title: '7',edit: 'text'}
                        ,{field:'hole8', title: '8',edit: 'text'}
                        ,{field:'hole9', title: '9',edit: 'text'}
                        ,{field:'hole10', title: '10',edit: 'text'}
                        ,{field:'hole11', title: '11',edit: 'text'}
                        ,{field:'hole12', title: '12',edit: 'text'}
                        ,{field:'hole13', title: '13',edit: 'text'}
                        ,{field:'hole14', title: '14',edit: 'text'}
                        ,{field:'hole15', title: '15',edit: 'text'}
                        ,{field:'hole16', title: '16',edit: 'text'}
                        ,{field:'hole17', title: '17',edit: 'text'}
                        ,{field:'hole18', title: '18',edit: 'text'}
                        ,{field:'add', title: '操作', width:177,toolbar:"#barDemo"}
                    ]],
                });
                });

    这个时候表格一般已经是出来了,记得,后台提供的数据格式,和layui提供的一样最好,这一点要切记,这一点大家可以去官网上看下,不做说明

     

    展开全文
  • layui之动态数据表格

    万次阅读 2018-07-19 09:53:14
    layui数据动态表格,如果返回的json格式是默认格式就好了,从api上直接copy下来用就可以,可是我这里返回的json格式如下: { "code": 200, "content": { "currentPage": 1, &...
  • layui table reload 重载

    万次阅读 热门讨论 2018-10-15 11:08:13
    在所有记录中通过姓名搜索需要的数据,     搜索记录为空时返回所有记录 ...ennn,然后就是后台操作了,我的方法比较笨拙就不贴代码了,but还是记录一下思路吧,前面做分页时查询了所有的记录,然后reload时...
  • document.getElementById('hide').className="layui-color layui-icon layui-icon-shrink-right"; } function ulHide(){ if(isShow===-1) show(); isShow=1; } </script>
  • Layui】数据表格(与后台交互获取数据)

    万次阅读 多人点赞 2018-05-26 09:42:34
    jsp &amp;amp;amp;amp;amp;amp;lt;table id=&amp;amp;amp;amp;amp;quot;userList&amp;amp;amp;amp;amp;quot; lay-filter=&amp;amp;amp;amp;amp;quot;userList&amp;amp;amp;...l
  • 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-...
  • layui单选框未显示的问题

    万次阅读 2020-02-10 18:06:23
    一开始还没导入idea的时候,单纯点击一个网页是有显示出来的,当我把这个带有单选框的网页放到idea的项目中去的时候,发现单选框没显示出来。 1.首先在确认js.css等东西有导入,和之前的网页也没有什么区别 ...
  • 虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪。 html: &lt;input type="text" lay-verify="digital" ...
  • <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=...
  • <div class="layui-form-item"> <label class="layui-form-label">*行为概述: <div class="layui-input-block"> ;" placeholder="请输入行为概述" autocomplete="off" class="layui-textarea">${...
  • 使用 Vue + LayUI 做后台管理、RESTful 交互

    万次阅读 热门讨论 2018-08-22 14:27:08
    一、前言 1、之前使用了 React/Angular,使用起来显然是比 jQuery 好多了,但时隔半年,最近再次...2、使用 vue + layui 了,但 layui 里边的 layui.js 模块 vue.js 冲突, 因此放弃使用 layui.js,导致很多高级...
  • 小编最近遇到一个问题,需要使用layui中的table 来动态添加一行,添加行需要实现 效果呢,表格可以编辑,同一行,不同列有具体的数据,下拉框,对行中所编辑或者选中的数据能够进行保存到数据中,可以给我一些跳出...
  • Layui文件下载

    万次阅读 2019-09-10 09:27:20
    Layui超实用10篇技术解决方案:https://blog.csdn.net/libusi001/article/details/100065911 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...div class="layui-body"> <!-- 内容主体区域 --> <...
  • ;&gt;&gt;&gt;&gt;...主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 &lt;script type="text/javascript" src="${pageContex
  • layui 标识、 layui排序

    2019-01-14 13:26:03
    layui-inline"&gt; &lt;label class="layui-form-label"&gt;楼宇地址:&lt;/label&gt; &lt;div class="layui-input-inline"&gt; &lt;input id="...
  • layui简介

    千次阅读 2019-05-05 23:49:32
    layui是什么? layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处...
  • 使用layui做弹出层如图一,关闭窗口后,div又显示在了页面中如图二,正常情况是关闭窗口也隐藏,这是是什么原因呢?是不是导报包不对,求大佬指点![图片说明]...
  • spring boot+layui实现增删改查实战

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

    千次阅读 2019-10-02 13:15:24
    layui-progress 代表一个进度条 |-- layui-progress-bar 代表进度条里面的进度 layui-progress-big 变粗了 相关属性 lay-percent 代表进度值 lay-showpercent="true" 是否显示进度值 代码如下图: <%-...
  • Layui 表单提交数据为空

    万次阅读 2018-03-27 09:55:20
    最近用了一段时间Layui作为项目后台管理模块的前端框架,感觉还是挺好用的。 今天踩了个坑,就是使用layui表单提交时,提交的数据为空。 例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为...
  • 因为主框架是通过 jquery.html() 来加载页面, 会导致layUI表单提交事件多次触发 ``` // load子页面 window.onhashchange = function () { var surl = location.hash.replace("#", ""); var htmlobj =...
  • 使用Layui搭建后台管理界面

    万次阅读 多人点赞 2019-08-05 21:56:20
    Layui是一个样式比较丰富艳丽的UI框架,通过自学了相关api文档,自己手工搭建了一个后台管理页面。页面布局是常用的一套,上面是一个logo,左边区域是一个导航,中间是内容tab页,底部是版权信息,好了,看代码吧!&...
  • 下面摘抄官方的一段话简单介绍一下Layuilayui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积...
  • layui下拉框的使用

    万次阅读 2019-03-19 18:35:39
    div class="layui-form"> <select name="" id="" lay-filter="myselect"> <option value="zhang">张先生</option> <option value="wang">王先生</option>...

空空如也

1 2 3 4 5 ... 20
收藏数 25,896
精华内容 10,358
热门标签
关键字:

layui