精华内容
下载资源
问答
  • 由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久。同一项目,设计风格都...

    由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久。

    同一项目,设计风格都差不多,对于涉及单个数据表的页面,基本都是增删改查,布局都是差不多,实际项目中都是复制、粘贴过来改下数据基本就能完成80%,后续就是修修补补或者是要实现一些特殊需求,记得刚参加工作时,老大直接给了一个已经做好的模板页面让我比对着手动敲一遍,当时觉得重复操作没啥用,现在再看觉得作用很大,受益匪浅,所以弄一个模板页是很有必要的,后续功能页面只要复制粘贴修改数据就好了。

    一、用户列表页list.html

    列表页面一般上面是查询搜索框和页面交互按钮,下面是表格显示搜索结果。用户列表页面也是这样布局的,上面的搜索框比较少,后续可以进一步优化。列表显示的数据这里暂时在UserController中写成固定的,数据是从https://www.layui.com/demo/table/user/?page=1&limit=30获取的。

    编辑

    删除

    View Code

    二、用户列表脚本user.js

    在user.js中主要是table表格渲染、增删改查按钮的交互。

    vartable;varlayer;

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

    table=layui.table;

    layer=layui.layer;//执行一个 table 实例

    table.render({

    elem :'#user',

    height:350,

    url :'/user/getUsers',

    page :true, //开启分页

    cols : [ [ //表头

    {

    fixed :'left',

    type :'checkbox'}, {

    field :'id',

    title :'ID',

    width :80,

    fixed :'left'}, {

    field :'username',

    title :'姓名',

    width :160}, {

    field :'sex',

    title :'性别',

    width :220,

    },{

    title :'操作',

    width :200,

    align :'center',

    toolbar :'#tools'} ] ]

    });//监听工具条

    table.on('tool(tools)', function(obj) { //注:tool是工具条事件名,test是table原始容器的属性

    var data = obj.data //获得当前行数据

    , layEvent = obj.event; //获得 lay-event 对应的值

    if ('edit' ==layEvent) {

    addTea(data.id)

    }else if ('del' ==layEvent) {

    del(data.id);

    }

    });

    });functionqueryUser(){var keyword = $("#keyword").val();

    table.reload('user', {

    where : {

    keyword : keyword

    },

    page : {

    curr :1}

    });

    }varindex;functionaddUser(id) {

    index=parent.layer.open({

    type :2,

    title :"用户信息",

    area: ['550px', '400px'],

    content :'/user/edit?id=' +id

    });

    layer.full(index);

    }functiondel(id) {

    parent.layer.open({

    type :1,

    content :'

    确定删除记录?
    ',

    btn : ['确定', '取消'],

    yes :function(index, layero) {

    $.ajax({

    url :"/user/delete",

    data : {"id": id

    },

    dataType :"text",

    success :function(data) {if(data==0){

    layer.msg("删除成功!");

    layer.close(index);

    queryUser();

    }else{

    layer.msg("删除失败!");

    }

    },

    error :function() {

    }

    });

    }

    });

    }/**

    * 获取选中数据*/

    functiongetDatas(){var checkStatus = table.checkStatus('user');var data =checkStatus.data;var id = "";for(var i=0;i

    id+=data[i].id;if(i

    id+= ",";

    }

    }if(data.length != 0){

    del(id);

    }

    }

    View Code

    三、编辑页面edit.html

    点击新增用户、编辑按钮时会弹出遮罩层显示出编辑页面。

    姓名

    展开全文
  • 由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久。 同一项目,设计风格...

    由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久。

    同一项目,设计风格都差不多,对于涉及单个数据表的页面,基本都是增删改查,布局都是差不多,实际项目中都是复制、粘贴过来改下数据基本就能完成80%,后续就是修修补补或者是要实现一些特殊需求,记得刚参加工作时,老大直接给了一个已经做好的模板页面让我比对着手动敲一遍,当时觉得重复操作没啥用,现在再看觉得作用很大,受益匪浅,所以弄一个模板页是很有必要的,后续功能页面只要复制粘贴修改数据就好了。

    一、用户列表页list.html

    列表页面一般上面是查询搜索框和页面交互按钮,下面是表格显示搜索结果。用户列表页面也是这样布局的,上面的搜索框比较少,后续可以进一步优化。列表显示的数据这里暂时在UserController中写成固定的,数据是从https://www.layui.com/demo/table/user/?page=1&limit=30获取的。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="UTF-8"></meta>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
        <meta http-equiv="pragma" content="no-cache"></meta>
        <meta http-equiv="cache-control" content="no-cache"></meta>
        <meta http-equiv="expires" content="0"></meta>
        <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
      <style>
        body{margin: 10px;}
      </style>
    </head>
    <body class="childrenBody">
    <blockquote class="layui-elem-quote role_search">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input id="keyword" type="text" value="" placeholder="请输入关键字" class="layui-input search_input">
            </div>
            <a class="layui-btn search_btn" οnclick="queryUser()">查询</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal newsAdd_btn" οnclick="addUser('')">添加用户</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-danger batchDel" οnclick="getDatas();">批量删除</a>
        </div>
    </blockquote>
    <table class="layui-hide" id="user" lay-filter="tools"></table>
    <script type="text/html" id="tools">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/js/user.js"></script>
    </body>
    </html>
    View Code

    二、用户列表脚本user.js

    在user.js中主要是table表格渲染、增删改查按钮的交互。

    var table;
    var layer;
    layui.use([ 'layer', 'table', 'element' ], function() {
        table = layui.table;
        layer = layui.layer;
        // 执行一个 table 实例
        table.render({
            elem : '#user',
            height:350,
            url : '/user/getUsers',
            page :true, // 开启分页
            cols : [ [ // 表头
                {
                    fixed : 'left',
                    type : 'checkbox'
                }, {
                    field : 'id',
                    title : 'ID',
                    width : 80,
                    fixed : 'left'
                }, {
                    field : 'username',
                    title : '姓名',
                    width : 160
                }, {
                    field : 'sex',
                    title : '性别',
                    width : 220,
                },{
                    title : '操作',
                    width : 200,
                    align : 'center',
                    toolbar : '#tools'
                } ] ]
    
        });
    
    // 监听工具条
        table.on('tool(tools)', function(obj) { // 注:tool是工具条事件名,test是table原始容器的属性
            var data = obj.data // 获得当前行数据
                , layEvent = obj.event; // 获得 lay-event 对应的值
            if ('edit' == layEvent) {
                addTea(data.id)
            } else if ('del' == layEvent) {
                del(data.id);
            }
        });
    });
    
    function queryUser(){
        var keyword = $("#keyword").val();
        table.reload('user', {
            where : {
                keyword : keyword
            },
            page : {
                curr : 1
            }
        });
        }
    
    var index;
    function addUser(id) {
        index = parent.layer.open({
            type : 2,
            title : "用户信息",
            area: ['550px', '400px'],
            content : '/user/edit?id=' + id
        });
        layer.full(index);
    }
    
    function del(id) {
        parent.layer.open({
                type : 1,
                content : '<div style="padding: 20px 80px;">确定删除记录?</div>',
                btn : [ '确定', '取消' ],
                yes : function(index, layero) {
                    $.ajax({
                        url : "/user/delete",
                        data : {
                            "id" : id
                        },
                        dataType : "text",
                        success : function(data) {
                            if(data==0){
                                layer.msg("删除成功!");
                                layer.close(index);
                                queryUser();
                            }else{
                                layer.msg("删除失败!");
                            }
                        },
                        error : function() {
                        }
                    });
                }
            });
    
    }
    
    /**
     * 获取选中数据
     */
    function getDatas(){
        var checkStatus = table.checkStatus('user');
        var data = checkStatus.data;
        var id = "";
        for(var i=0;i<data.length;i++){
            id += data[i].id;
            if(i<data.length-1){
                id += ",";
            }
        }
        if(data.length != 0){
            del(id);
        }
    }
    View Code

    三、编辑页面edit.html

    点击新增用户、编辑按钮时会弹出遮罩层显示出编辑页面。

    <!DOCTYPE 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">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
          <style>
        body{margin: 10px;}
      </style>
    </head>
    
    <body class="childrenBody">
    <form class="layui-form changePwd">
        <input type="hidden" name="id"  id="id" th:value="${id}">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" value="" placeholder="姓名" id="name"  lay-verify="required|name" class="layui-input pwd">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="女" checked="">
                <input type="radio" name="sex" value="1" title="男" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" value="" placeholder="年龄"  id="age" class="layui-input pwd">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="*">保存</button>
               <button type="button" class="layui-btn layui-btn-primary" onclick="layerclose();">关闭</button>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            var id = $("#id").val();
            if(id != ""){
                $.ajax({
                    url: "/user/queryById",
                    data:{"id":id},
                    dataType:"json",
                    success: function(data){
                        $("#name").val(data.name);
                        $("#age").val(data.age);
                        $("input[name='sex']").eq(data.sex).attr("checked",'checked');
    
                    },error:function(){
                    }
                });
            }
        })
        
        function layerclose() {
            layui.use(['layer' ], function() {
                var layer = layui.layer;
                var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级            
                parent.layer.close(index);//关闭弹出层
                location.reload();//刷新父页面
            })    
        }
    
    
        layui.use(['form','layer' ], function() {
            var form = layui.form;
            var layer = layui.layer;
            // 添加验证规则
            form.verify({
                name : function(value, item) {
                    value = value.trim();
                    if (value.length < 0) {
                        return "请输入教师名称";
                    }
                }
            });
    
            form.on('submit(*)', function(data) {
                var index = layer.msg('提交中,请稍候',{icon: 16,time:false,shade:0.8});
                var d = data.field;
                var url = "/user/add";
                if(d.id != ""){
                    url = "/user/edit";
                }
                $.ajax({
                    url: url,
                    data:d,
                    dataType:"text",
                    success: function(data){
                        layer.close(index);
                        if(data == 0){
                            layer.msg("保存成功!");
                            parent.queryTea();
                            parent.close();
                        }else{
                            layer.msg("保存失败!");
                        }
                    },error:function(){
                        layer.close(index);
                        layer.msg("保存失败!");
                    }
                });
                return false;
            });
        });
    </script>
    
    </body>
    </html>
    View Code

    四、弹出层遮罩与关闭问题

    在实现上面功能的过程中遇到两个问题,还都是遮照层的问题,一是点击新增用户弹出的遮罩层不是全屏,只遮了右侧内容部分,二、在弹出编辑页面之后点击取消按钮时遮照层关闭不了。

    对于第一个问题可以参考https://blog.csdn.net/yufengaotian/article/details/79231552,在父页面home.html和子页面list.html中都引入引用layui.js和layui.css,在子页面list.html中使用parent.layer.open打开iframe。

    function addUser(id) {
        index = parent.layer.open({
            type : 2,
            title : "用户信息",
            area: ['550px', '400px'],
            content : '/user/edit?id=' + id
        });
        layer.full(index);
    }

    对于第二个问题也是耗时最多的,这个也是坑最深的。在下面的代码中的onclick事件方法名写成了close();,开始以为是关闭方法写在edit.html中无法关闭,又把关闭事件放在了user.js中,依然不行,在close()方法中使用alert调试也弹不出信息,很是苦恼,后来尝试改下方法名再试没想到点击事件起作用了。关闭事件参考https://www.layui.com/doc/modules/layer.html。

    <button type="button" class="layui-btn layui-btn-primary" onclick="layerclose();">关闭</button>

    五、小结

    目前已完成首页、单表页面增删改查布局交互,但现在使用的还是固定数据,后续就是集成Mybatis、实现分页功能,用真实数据返回接口。

     

    转载于:https://www.cnblogs.com/5ishare/p/10427953.html

    展开全文
  • 今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tabs的title名称参数,在layui-admin-iframe中自动打开一个新的tabs页面,不需要点击左边的菜单栏,实现一个单页面的效果。代码实现:请求的...

    前言:

    使用Layui-admin做后台管理框架有很长的一段时间了,但是一直没有对框架内iframe菜单栏切换跳转做深入的了解。今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tabs的title名称参数,在layui-admin-iframe中自动打开一个新的tabs页面,不需要点击左边的菜单栏,实现一个单页面的效果。

    代码实现:

    请求的超链接如下所示:

    https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首页

    其中transferUrl:为需要打开的页面地址

    openTabsName:为tabs标题名称

    layui预先加载,获取超链接中传递过来的跳转页面地址和tabs title名称在iframe中打开:

    //layui预先加载

    layui.use('index', function(){

    var transferUrl =getQueryVariable("tabName");

    var openTabsName =getQueryVariable("name");

    //初始化页面调转

    layui.index.openTabsPage(transferUrl,openTabsName);

    })

    Js获取超链接里面传递的参数值:

    如获取超链接[https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首页] 中的transferUrl和openTabsName中的值

    function getQueryVariable(variable)

    {

    var query = window.location.search.substring(1);

    console.log(decodeURIComponent(query));//js解码(超链接中的中文获取时可能存在编码的情况)

    var vars = query.split("&");

    for (var i=0;i

    var pair = vars[i].split("=");

    if(pair[0] == variable){return decodeURIComponent(pair[1]);}

    }

    return(false);

    }

    关于存在多了一级菜单栏,而链接中所带的地址又不是第一个一级菜单栏中的子菜单栏我们该如何解决初次加载显示子级菜单栏问题?

    我们可以在导航栏中设置左侧菜单导航栏默认展开的属性,如下所示:

    layui-nav-itemed的属性默认导航全部展开

    效果图,如下所示:

    92603dd68b8a08e33ebe770b4cbbe519.png

    展开全文
  • layui基础-页面元素

    千次阅读 2018-12-20 10:02:03
    1.layui简介 采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。贤心大佬专门给后端开发写的框架 官网:https://www.layui.com/ 1&gt;目录结构: ├─css...

    1.layui简介

    采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。贤心大佬专门给后端开发写的框架

    官网:https://www.layui.com/

    1>目录结构:

      ├─css //css目录
      │  │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
      │  │  ├─laydate
      │  │  ├─layer
      │  │  └─layim
      │  └─layui.css //核心样式文件
      ├─font  //字体图标目录
      ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
      │─lay //模块核心目录
      │  └─modules //各模块组件
      │─layui.js //基础核心库
      └─layui.all.js //包含layui.js和所有模块的合并文件

    2>开始使用:

    第一步:将下载后的layui压缩包解压,复制layui文件夹的所有内容到项目中

    第二步:导入layui的css和js文件,然后加载你要使用的各个模块

    <link rel="stylesheet" href="../layui/css/layui.css">
    		<script src="../layui/layui.js"></script>
    		<script>
    			//一般直接写在一个js文件中
    			layui.use(['layer', 'form'], function() {
    				var layer = layui.layer,
    					form = layui.form;
    			});
    		</script>

    3>一个例子

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>layui的hello</title>
    		<link rel="stylesheet" href="../layui/css/layui.css">
    	</head>
    
    	<body>
    		<script src="../layui/layui.js"></script>
    		<script>
    			//一般直接写在一个js文件中
    			layui.use(['layer', 'form'], function() {
    				var layer = layui.layer,
    					form = layui.form;
    				layer.msg('Hello 杨宇莹');
    			});
    		</script>
    	</body>
    </html>

     

    2.栅格布局:layui-container、layui-row、layui-col-md*

    将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,在移动设备(xs)、平板(sm)、桌面中(md)/大尺寸(lg)四种不同的屏幕下发挥着各自的作用

    1>将栅格放入一个带有 class="layui-container" 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控;当然,你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中,那么宽度将不会固定,而是 100% 适应

    		<div class="layui-container">
    			常规布局(以中型屏幕桌面为例),额外加了一个平板屏幕下的布局
    			<div class="layui-row">
    				<div class="layui-col-md9 layui-col-sm6 a1">//a1、a2是自定义的style,只定义了背景颜色
    					你的内容 md9/12
    				</div>
    				<div class="layui-col-md3 layui-col-sm6 a2">
    					你的内容 md3/12
    				</div>
    			</div>
    		</div>

    2>列间距:layui-col-space*(*代表着列间距的数组:px)

    通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。

    <div class="layui-row layui-col-space10">
      <div class="layui-col-md4">
        1/3
      </div>
      <div class="layui-col-md4">
        1/3
      </div>
      <div class="layui-col-md4">
        1/3
      </div>
    </div>

    3>列偏移:layui-col-md-offset*

    列向右偏移。其中 * 号代表的是偏移占据的列数,可选中为 1 - 12。

    <div class="layui-row">
      <div class="layui-col-md4">
        4/12
      </div>
      <div class="layui-col-md4 layui-col-md-offset4">
        偏移4列,从而在最右
      </div>
    </div>

    4>栅格嵌套

    		<div class="layui-container">
    			<div class="layui-row layui-col-space5">
    				<div class="layui-col-md5">
    					<div class="layui-row grid-demo a1">
    						<div class="layui-col-md3 a2">
    							内部列
    						</div>
    						<div class="layui-col-md9 a2">
    							内部列
    						</div>
    						<div class="layui-col-md12 a2">
    							内部列
    						</div>
    					</div>
    				</div>
    				<div class="layui-col-md7">
    					<div class="layui-row grid-demo grid-demo-bg1">
    						<div class="layui-col-md3 a2">
    							内部列
    						</div>
    						<div class="layui-col-md5 a2">
    							内部列
    						</div>
    						<div class="layui-col-md4 a2">
    							内部列
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>

     

    3颜色

    常用主色、场景色、极简中性色等都可以直接使用即可,下面是内置背景色css类

    赤色:class="layui-bg-red"
    橙色:class="layui-bg-orange"
    墨绿:class="layui-bg-green"
    藏青:class="layui-bg-cyan"
    蓝色:class="layui-bg-blue"
    雅黑:class="layui-bg-black"
    银灰:class="layui-bg-gray"

     

    4.图标

    通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 font-class

    <i class="layui-icon layui-icon-face-smile"></i>   
    
    //可以定义它的大小和颜色
    <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>  

     

    5.动画

    直接对元素赋值动画特定的 class 类名即可。

    其中 layui-anim 是必须的,后面跟着的即是不同的动画类
    <div class="layui-anim layui-anim-up"></div>
     
    循环动画,追加:layui-anim-loop
    <div class="layui-anim layui-anim-up layui-anim-loop"></div>

     

    6.按钮

    向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。

    <button class="layui-btn">一个标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

     

    7.表单

    在一个容器中设定 class="layui-form" 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。

    注意:必须要加载from模块(如果要加载其他模块直接在数组中添加,然后在form后再添加即可)

    			layui.use(['layer', 'form'], function() {
    				var layer = layui.layer,
    					form = layui.form;

    2>表单监听提交

      //监听提交,一般是监听提交按钮(formDemo就在提交按钮上)
      form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));//弹出填写的数据
        return false;//阻止表单提交
      });

     

     

     

    展开全文
  • 若测试网址为:localhost/start/#/user/manage/uid=xxx/uname=aaa/&... layui.use(['layer'], function(){ var layer=layui.layer; var router = layui.router(); layer.alert(router.search.uid);//弹...
  • layuiadmin单页面框架,弹出iframe窗口

    万次阅读 2018-03-18 17:35:37
    layui.use(['admin','view'],function(){var admin=layui.admin,view=layui.view;admin.popup({ "title":"窗口名称" ,area: ['600px', '600px'] ,id:'someid'//id唯一 ,success: fun.....
  • 我这里有很多个radio和checkbox,就截一个出来,因为其他都是一样的div 然后单独遍历input里面的radio和checkbox...里面的属性是layui框架的,小伙伴们可以参考https://www.layui.com/ 里面的文档挺详细的 ...
  • 首先,我是直接导入layui,不是单独只导入layer,因为我其他的页面也需要用到layui的css样式。网上的办法有的是在angular.json导入相应的js和css,这种办法比较适合单独导入layer的情况。 我的做法是这样的。 ...
  • 介绍有一段时间没推荐过后端模板了,今天就来一个,...模板分为两种模式,分别是传统的iframe版本,另外一个是单页面版本,可以满足不同的开发需求!Githubhttps://github.com/zhongshaofa/layuimini主要特性界面足...
  • layui栅格系统

    千次阅读 2017-10-19 08:58:10
    首先,它是一种响应式的栅格系统...首先定义好页面框架:”layui-container”>其次layui定义的栅格为12等分,就是说一行被分成了12份,可以任意分割小于等于12列,但是必须满足一行有12份 定义一行:”layui-row”>
  • Layui弹出层

    2020-09-18 09:04:46
    由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照实际需求来选择。...如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layu
  • 本文主要为大家分享一篇Layui前后台交互...Json数据格式交互前后台,并且也相当适用单页面开发。有兴趣的朋友可以看看layui官网。Layui前后台数据交互layui有自己的一套特定的数据格式交互(这很重要),必须参数code...
  • Layui 弹出层模块

    2020-09-18 16:03:36
    Layui 弹出层模块 使用场景 由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。...如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer
  • 有时我们使用的layui框架,可以不需要单独引进jq,因为layui是内置有jq。我们需要在layui里面使用jq,就能自动引进来了。 由于Layui部分内置模块依赖jQuery,所以我们将jQuery1.11最稳定的一个版本作为一个内置的...
  • Layui前后台交互数据获取java

    万次阅读 热门讨论 2018-01-01 09:32:27
    Json数据格式交互前后台,并且也相当适用单页面开发。有兴趣的朋友可以看看layui官网。Layui前后台数据交互layui有自己的一套特定的数据格式交互(这很重要),必须参数code:0,msg:“”,count:数据size(int),...
  • 演示案例实现技术是:ssh框架+layui表格,即简单的对表数据库做了个增删改查。 相信大家看过视频之后,已经知道大体的业务流程,我在这里在简单的说明一下。 1.默认进入首页default.jsp,进入该页面之前将所有数据...
  • 基于spring boot+layui的通用后台管理项目 相关框架使用 核心框架 spring boot 视图框架 spring mvc orm框架 jpa lombok插件 数据库连接池 druid 单元测试框架 junit ...后台页面 layui 代码生成器 f...
  • 介绍有一段时间没推荐过后端模板了,今天就来一个,...模板分为两种模式,分别是传统的iframe版本,另外一个是单页面版本,可以满足不同的开发需求!Githubhttps://github.com/zhongshaofa/layuimini主要特性界面足...
  • 该套框架中UI框架采用Layui+Bootstrap,Layui用来美化页面元素,Bootstrap用其栅格系统实现页面布局,JS框架采用AngularJs+Jquery,AngularJs模块化编程思想、双向数据绑定、重中之重路由系统实现单页面应用,...
  • (我起名字时删改多遍,这是最终定下来的),不过,为了让大家看的明白,我专门去做了个演示视频:演示案例使用的技术:ssh框架+layui表格,即简单的对表数据做了个增删改查。相信大家看过视频之后,已经知道大体的...
  • 1. spring boot无法加载layui框架 问题: 单独layui网页界面如下: layui加入spring boot 页面如下: 注:pom文件Web和Thymeleaf依赖相关配置已经加入。 解决: 查看浏览器调试模式下的文件加载情况如下: 可以...
  • 因为是用的layui框架写的系统,所以就直接基于layui编写了个插件。写篇文章总结介绍下这个插件。 使用简单,可以不用学习layui,只要把相关js引入了,也可以在项目中单独使用。 插件源码:去码云下载 体验地址1:...
  • 在Java学习阶段,相信许多小伙伴用Layui搭建过前端页面,对于后端开发学习,使用一块好用的前端框架尤为重要,记录一下我在开发过程中遇见的问题。 问题描述: 我在使用layui的layer弹出层做模态框时,需要查询...
  • layui是基于原生js的,跟vue的编程思想不太搭,用这俩主要是因为只是一个作业的单页面应用而已……所以来了三个工具框架的大杂烩,用vue的话还是用基于vue组件化的ui框架比较好。vue在这个实现中……其实没有也行。 ...
  • 框架核心问题

    2020-12-08 22:49:17
    表单单选框 设置了禁用 当页面css渲染页面时候是 单选框是是可以禁用的 但是框架核心JS方法执行完毕后,重新渲染了一次表单,导致单选框的禁用不起作用 问题四 如何劫持表单的提交,提交前做一些响应的操作 就...
  • 主体页面架构

    2020-05-19 14:12:27
    云笔记主页面设计 1利用layui 网络模板 layui–》示例–》后台布局 直达链接: ... ...页面布局代码 ...主体框架后填充内容 1在layui 里找表格利用相关合适表格进行填充 如选择 ![在这里插入图片描述](https://img-b
  • lake-admin基于ThinkPHP框架,后台页面基于Layui 更新ThinkPHP版本到v6.0.7 更新Layui版本到v2.5.7 更新lake-admin版本到v2.3.29 主要特性 基于RABC验证的权限管理系统 支持父级的管理员可以任意增删改子级管理员及...

空空如也

空空如也

1 2 3
收藏数 49
精华内容 19
关键字:

layui单页面框架