layui已经提供了一整套的UI布局及相关组件,并且有相当完善的api文档,本文重点在于thymeleaf中如何使用layui,包括公用部分的提取,而非简单的layui的用法。
先上两个效果图
列表.png
表单.png
一、思路
像传统的一样建文件头和尾(但是又和传统的写法不同,见下面代码)
定义公用js--common.js
定义公用css--用来重写一些样式或者自定义样式
编写列表页
编写表单页
二、文件头和尾
头部引入css,尾部引入js,定义两个模板(一个也可以,里面的碎片分开写,我喜欢写两个分别引入),注意th:fragment,fragment即碎片,可以在模板任何位置引入,此处为分别定义名为header和js_footer的碎片,以供后面引用
样式文件 link.html
js文件 script.html
三、公用js
该文件包含几个方法:
1.initTable初始化带分页的table,注意其中的request属性,可以配置和你后台Page对象对应的属性,具体可以参考layui官方文档
2.searchTabletable的搜索功能,调用layui table模块的的重载功能,参数组建思路:获取序列化的表单,组装成json对象
3.upload文件上传
4.openFrame打开弹出层,基于最顶层弹出
四、公用css
这个可以根据个人喜好或者项目实际情况自己定义
五、列表页
整个html除了头部的引入,整体分为三部分: 1.上面form为搜索内容部分 2.中间一个table为主窗口 3.注意一个id="toolBars"的js,为工具条,用于追加在每一列的后面 4.可以看到下面页面初始化等都调用了Common.js中的对应方法
六、表单页
列表出来之后表单就更简单了,只需要去layui官网找个表单,根据自己的实际情况布局即可,特别说明的是校验,即verify.js,用于自己对验证方法的扩展form.html
verify.js
波浪线提示.png
解决方法也很简单:File--settings--Editor--Inspections--Thymeleaf,去掉第一个校验即可。
去掉波浪线提示.png
领取专属 10元无门槛券
私享最新 技术干货