精华内容
下载资源
问答
  • springboot启动正常且页面跳转正确后,出现layui前端页面显示空白情况,其中标题title正常加载出现。如下图所示 解决方法 引入资源路径问题 经过发现是在index.html中引入static下的layui框架资源的路径有误,会...

    问题

    springboot启动正常且页面跳转正确后,出现layui前端页面显示空白情况,其中标题title正常加载出现。如下图所示

    空白页面

    解决方法

    引入资源路径问题
    经过发现是在index.html中引入static下的layui框架资源的路径有误,会出现cannot resolve directory提示

    <link rel="stylesheet" href="E:/lh/programs/springboot/demo1/src/main/resources/static/layui/css/layui.css">

    应该修改为

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

    页面正确显示

    补充知识点

    HTML的a标签href属性指定相对路径与绝对路径的用法讲解
    Layui开发使用文档

    展开全文
  • layui框架整理

    2021-01-14 15:53:18
    layui使用form表单实现post请求页面跳转 https://blog.csdn.net/souloflove21g/article/details/80346690 如果想用form表单进行post请求跳转,只能用这个方式了。所需要的参数在input里面加好,然后在上面做赋值就...

    昨天在画方框的时候发现搞不定方框,想到之前团队里面有人用了layui.就直接用了一下。因为时间紧张,没有仔细看文档。解决遇到一堆的问题。。。

    layui使用form表单实现post请求页面跳转 https://blog.csdn.net/souloflove21g/article/details/80346690

    如果想用form表单进行post请求跳转,只能用这个方式了。所需要的参数在input里面加好,然后在上面做赋值就可以了。

    window.location.href='url?param=' + paramValue;
    

    上面这种方式实现页面跳转附带参数,容易造成信息泄露;

    layui使用form表单实现post请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏):

    这里是在数据表格查询数据时的按钮操作,其他操作类似

    <table id="myTable" class="layui-table" lay-filter="myTableDetail" ></table>
    

    数据表格具体配置查看layui文档

    <script type="text/html" id="detailBar">
     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    </script>
    

    下面action部分可以是具体的请求路径,亦可以使*.do请求

    <form action='${basepath}/requestMethodName' method='post' name='form1' style='display:none'>
    
     <input type=hidden name='param1' id="param1" value=''>
     <input type=hidden name='param2' id="param1" value=''>
    </form>
    

    js部分:

    table.on('tool(myTable)', function(obj){
         var data = obj.data;  // 选中的单条数据信息,后台传过来的数据全部可以获取
         if(obj.event === 'detail'){ // 监听上面定义的按钮
           // layer.msg('ID:'+ data.ID+ ' 的查看操作');
           // 提交前设置提交数据,需要向后台传输的数据,
           $('#param1').prop("value", data.param1);
           $('#param2').prop("value", data.param2);
           document.form1.submit();
         } 
      });
    

    https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data
    这个是form标签的标准用法。目前的需求应该是需要直接post跳转过去的。就是我上面这个链接里POST方式的用法

    https://blog.csdn.net/ZHANGLIZENG/article/details/86770657
    这个是用于设置单选的
    关键的代码就这一块

    form.on('checkbox(indicators)', function(data){       
                    $("input[name='indicators']").prop("checked", false);   //全部取消选中
                    $(this).prop("checked", true);                          //勾选当前选中的选择框     
                    form.render('checkbox');    
                });      
                form.render('checkbox'); 
    

    https://blog.csdn.net/qq_31878883/article/details/84064221
    监听复选框提交表单的,不错的case

    https://www.layui.com/doc/modules/form.html
    layui的官方文档

    展开全文
  • 一、LayUI介绍Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。内置了一些常用元素和组件的UI框架。下载后引入项目中。二、LayPage参数介绍laypage是...

    本文主要为大家带来一篇基于LayUI实现前端分页功能的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

    一、LayUI介绍

    Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。内置了一些常用元素和组件的UI框架。

    下载后引入项目中。

    二、LayPage参数介绍

    laypage是内置封装好的一个对象,在进行分页的时候直接调用即可,这里主要有以下几个参数,用于配置laypage的键值对集合:键默认值类型描述

    cont必填String/Object容器。值可以传入元素id或原生DOM或jquery对象

    pages必填Number分页数

    curr1Number当前页。

    groups5Number连续分页数。

    skindefaultString控制分页皮肤

    first1Number/String/Boolean用于控制首页。first: false,则表示不显示首页项

    last总页数值Number/String/Boolean用于控制尾页。last: false,则表示不显示尾页项

    prev上一页String/Boolean用于控制上一页。若不显示,设置false即可

    next下一页String/Boolean用于控制下一页。若不显示,设置false即可

    jump核心参数Function触发分页后的回调,函数返回两个参数。

    obj是一个object类型。包括了分页的所有配置信息。

    first一个Boolean类,检测页面是否初始加载。非常有用,可避免无限刷新。

    三、分页实现

    在前端展示页面,代码如下:

    var pcountString= "${pcount}";

    var psizeString= "${psize}";

    var pcountInt= parseInt(pcountString);//总页数

    var psizeInt=parseInt(psizeString); //页面大小

    var pindex = "${pindex}";// 当前页

    var ptotalpages=Math.ceil(pcountInt/psizeInt);// 总记录数

    layui.define(['layer', 'laypage' ], function(exports) {

    var layer = layui.layer;

    var laypage = layui.laypage;

    var pcount = pcountInt;// 总记录数

    var psize = psizeInt;// 每一页的记录数

    // 分页

    laypage({

    cont : 'pagination', // 页面上的id

    pages : ptotalpages,//总页数

    curr : pindex,//当前页

    skin: '#999999',//颜色

    jump : function(obj, first) {

    if (!first) {

    var parId=$("#parId").val();

    var pindex=obj.curr;

    window.location.href="${ctx}/web/rest/RecycleManage/GetFileList?parId=" rel="external nofollow" +parId+"&pindex="+pindex;//跳转链接

    }

    }

    });

    });

    分页效果如下:

    3b9867939c55cc1fc90f231b6cd2bc25.png

    相关推荐:

    展开全文
  • layui的iframe模板中,因为页面都是通过iframe方式引入的,所以在子(iframe)页面中使用location.href = "../user/login.html"后,跳转页面依然显示在内联框架中,而不是父页面跳转; //parent.location.href = 要...

    在layui的iframe模板中,因为页面都是通过iframe方式引入的,所以在子(iframe)页面中使用location.href = "../user/login.html"后,跳转的页面依然显示在内联框架中,而不是父页面跳转;

    //parent.location.href = 要跳转的地址,可以时相对地址或绝对地址 例如http://www.qq.com
    parent.location.href = "../user/login.html";
    

    使用上面的方法就可以了,
    parent.location.href是上一层(包裹iframe的)页面跳转,当然也可以使用top.location.href(最外层的页面跳转)
    在这里插入图片描述

    展开全文
  • 最近想使用layui框架作为毕业设计的前端页面,先在layui官网上下载源码包(步骤省略) 打开layui官网,用的是免费的一套后台布局: 把页面源码下载下来部署到自己项目上: 那么怎么实现页面的内部跳转呢?(黑色...
  • layui这个前端框架对后端人员来说提供了极大的方便,很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了,刚好最近需要开发一个后台管理项目,就拿layui来进行学习和实践.还没有接触到的同学可以先通读一遍...
  • layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。...
  • 需求:选不同的类型,去填具体信息后汇总 ...当第二个下拉框选择完后会下一步跳转页面填写详情(如图中红色页,蓝色页) 填写完成后回到图一汇总,还可以继续新增,也可以修改删除查看详情 实现思路 ...
  • //跳转到【工作管理】--人员管理页面 function navigateToTeamPersonModule() { window.parent.layui.element.tabAdd('layuiminiTab', { tabId: "/page/team-person", href: "/page/team-person", title
  • 当用户长时间停留在管理界面没有操作,等到session过期后,进行了操作,那么只是iframe跳转到login页面,这不是我们想要的结果。解决方法:在login页面加一个逻辑判断: <script > $(document).ready...
  • 这里要说一下使用jsp页面使用...事情是,有一次做页面功能测试,发现session30分钟有效期过期之后,点击内联框架之后,是内联框架跳转到登陆页面,而不是在主页面跳转。 最后发现,只需要在需要跳转的登陆页面做...
  • 前言:使用Layui-admin做后台管理框架有很长的一段时间了,但是一直没有对框架内iframe菜单栏切换跳转做深入的了解。今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tabs的title名称参数,在...

空空如也

空空如也

1 2 3
收藏数 55
精华内容 22
关键字:

layui框架跳转页面