各位朋友,你是否对layui的相关问题感到好奇?别担心,我将为你揭示这些问题的答案,帮助你更好地理解和应用这些知识。让我们一起探索吧!
Layui-基本使用、数据调试
首先是官方文档。我真的不是第一次觉得阅读官方文档比百度上搜索要有效率几百倍了,当然前提教程是汉语。
组件库
使用文档
Springboot+Thymeleaf+layui框架的配置与使用
Spring data jpa分页+ layui数据表格渲染数据
我觉得我现在能看懂了,感慨。
layui.table里面 json数据有多层嵌套,请问要怎么获取数据?
下面这个主楼里用的是改底层源码的方式,我觉得不可取。
layui数据表格total和data无法使用多层嵌套json格式的数据的解决办法
下面有对主楼这样的补充,但也是改的底层源码:
我用的版本中Layui符号是以字体的形式表示的(layui 2.3.0之前只支持采用 unicode字符),可能也是被拦截掉了,参考以下写法。
SpringBoot中引用LayUI font不显示问题解决办法
以后可以直接使用内联元素调出字体图标。
Layui字体图标库
第二种方法(我没试过):
Spring Boot使用layui的字体图标时无法正常显示解决办法
layuiAdmin使用总结,基于springmvc
Layui在MVC下的配置过程,我没用到,但是感觉不错。去看了看这位以前的文章,感叹大佬真的太多了,随处一看就都是大佬。
虽然大家都说毕设很水,但是年轻又有为的人却不计其数,可能他们很聪明早就开始做自己的项目了,没把毕设当作发力点。那我就将错就错吧,我想学习,我很羡慕。
通过table.render来刷新、绘制table
Layui表格单元格编辑保存
le可编辑扩展下拉框编辑器
layui的table中日期格式转换
这个除了显示其实还有个问题:当这个日期还是null时,会自动显示当前日期,所以需要加一个判断,不为空才显示。
下面是我用在了进度计划行内编辑中的例子。
layui框架的优缺点是什么
layui框架的优点有它属于轻量级框架,简单适合后端人员开发;缺点是技术还不是很成熟,由于需要查询DOM操作因此在前端交互上较麻烦
layui是一款模块化的前端框架,因其简单而又充实的内在而受到欢迎。今天将要介绍layui框架的优点与缺点,具有一定的参考价值,希望对大家有所帮助。
【推荐课程:javascript教程】
layui含义:
layui是一款采用自身模块规范编写的前端 UI框架,它遵循原生的 HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到 API都非常适合界面的快速开发。事实上layui更多是面向于后端开发者,而且它还拥有自己的模式。更加轻量和简单
layui的优点与缺点
优点有以下几方面:
(1)layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。
(2)layui是提供给后端开发人员最好的ui框架,基于DOM驱动,只要不涉及到交互layui还是很不错的
缺点如下:
(1)layui出现较迟,想必其他前端框架来说还是不太成熟。现在已更新到2.X版本了
(2)在实现前端交互上比较麻烦,因为页面的增删改查都需要查询DOM元素
案例:通过layui框架实现轮播图效果
(1)外部引入layui文件
<link rel="stylesheet" type="text/css" href=".\layui-v2.4.5\layui\css\layui.css">
<script src=.\layui-v2.4.5\layui\layui.js></script>(2)轮播图代码:
<div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger">
<div carousel-item>
<div style="background-color:pink;">图1</div>
<div style="background-color:lightblue">图2</div>
<div style="background-color:blue">图3</div>
<div style="background-color:mediumorchid">图4</div>
<div style="background-color:orange">图5</div>
</div>
</div>
<script src=.\layui-v2.4.5\layui\layui.js></script>
<script>
layui.use('carousel', function(){
var carousel= layui.carousel;
var ins=carousel.render({
elem:'#test1'
, width:'450px'//设置容器宽度
, arrow:'always'//始终显示箭头,可选hover,none
//,anim:'updown'//切换动画方式,可选fade,default
, full: false//全屏
, autoplay: true//自动切换
, interval: 1000//自动切换的时间间隔
, index: 3//初始化时item索引,默认时0
, indicator:'inside'//指示器位置,可选outside,none
});
//监听轮播切换事件
carousel.on('change(carofilter)', function(obj){//test1来源于对应HTML容器的
lay-filter="test1"属性值
console.log(obj.index);//当前条目的索引
console.log(obj.prevIndex);//上一个条目的索引
console.log(obj.item);//当前条目的元素对象
});
//重置轮播
ins.reload({arrow:'hover'});//将arror从alway变成hover
});
</script>效果图:
总结:
layui 的基本使用介绍
方法:layui.define([mods], callback)
本地存储是对 localStorage和 sessionStorage的友好封装,可更方便地管理本地数据。
localStorage持久化存储:layui.data(table, settings),数据会永久存在,除非物理删除。
sessionStorage会话性存储:layui.sessionData(table, settings),页面关闭后即失效。注:layui 2.2.5新增
layui.device(key)
方法/属性描述
layui.cache静态属性。获得一些配置及临时的缓存信息
layui.extend(options)拓展一个模块别名,如:layui.extend({test:'/res/js/test'})
layui.each(obj, fn)对象(Array、Object、DOM对象等)遍历,可用于取代for语句
layui.getStyle(node, name)获得一个原始DOM节点的style属性值,如:layui.getStyle(document.body,'font-size')
layui.img(url, callback, error)图片预加载
layui.sort(obj, key, desc)将数组中的对象按某个成员重新对该数组排序,如:layui.sort([{a: 3},{a: 1},{a: 5}],'a')
layui.router()获得location.hash路由,目前在Layui中没发挥作用。对做单页应用会派上用场。
layui.hint()向控制台打印一些异常信息,目前只返回了error方法:layui.hint().error('出错啦')
layui.stope(e)阻止事件冒泡
layui.onevent(modName, events, callback)自定义模块事件,属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块
layui.event(modName, events, params)执行自定义模块事件,搭配onevent使用
layui.factory(modName)用于获取模块对应的 define回调函数
模块命名空间
layui的模块接口会绑定在 layui对象下,内部由 layui.define()方法来完成。每一个模块都会一个特有的名字,并且无法被占用。所以你无需担心模块的空间被污染,除非你主动 delete layui.{模块名}。调用模块可通过 layui.use方法来实现,然后再通过 layui对象获得模块接口。
如何使用内部jQuery
//主动加载jquery模块
layui.use(['jquery','layer'], function(){
var//重点处
,layer= layui.layer;
//后面就跟你平时使用jQuery一样
$('body').append('hello jquery');
});