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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180309G0LPDR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券