thymeleaf中使用layui

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