bootstrap+thymeleaf 页面多选回显时莫名其妙多了

简介: 【1月更文挑战第5天】bootstrap+thymeleaf 页面多选回显时莫名其妙多了 问题分析处理

问题现象

今天遇到的问题的描述正如标题中的一样,就是后台管理系统在配置完内容后点击保存,回显时发现页面竟然莫名其妙多了一些数据。项目整体后台管理系统采用的是bootstrap+thymeleaf页面,这里首先复现一下问题效果

image.png

图1

image.png

图2

对比两个图不难看出,图2比图1多了一个套餐名称【书课包】,那么查看数据发现图1中对应的套餐id为【36,38,295】,而图2中回显的套餐id为【36,38,95,295】,那么问题来了,为什么选择了三个,而回显时却回显了四个呢?

问题分析

首先查看页面回显代码,根据页面分析来看,由于是字符串的contains比较,那么当逐个比较 "36" "38" "95" "295"时就能匹配上,因此页面会多余显示了95对应的套餐名称

image.png

那么既然问题分析明白了,我们就可以对当前遇到的问题进行处理了。

thymeleaf官方文档地址如下:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html,有需要的可以参考。下面开始处理当前遇到的问题。

问题处理

既然使用字符串的contains包含判断会出现误判的情况,那么我们可以采用list集合判断包含的形式,避免字符串判断出现误判的情况。首先需要将set.classIds转化成list集合,语法格式如下

${#strings.listSplit(namesStr,',')} 

image.png

然后再通过list集合判断包含的形式,语法格式如下

${#lists.contains(list, element)}

image.png

那么最后整合之后的thymeleaf页面代码如下

${#lists.contains(#strings.listSplit(set.classIds,','),item.classId+'')}

将修改后的页面代码放在页面,刷新项目后查看效果

image.png

image.png

这里可以很明显的看到回显的内容是正确的。但是这里其实还有一个问题,就是套餐不是非必填的,当套餐没有选择时页面效果是这样的

image.png

后台控制台打印日志如下

image.png

那么这个问题其实也好处理,在进行字符串转list之前需要进行字符串非空的判断,通过thymeleaf的if else判断,当字符串 set.classIds 为空时,不进行 #strings.listSplit(set.classIds,',') 的转换,当 set.classIds 不为空时,再进行 #strings.listSplit(set.classIds,',') 的转换,那么改造后的代码如下

image.png

改造之后再次刷新页面之后就可以看到没有问题了

image.png

到这里整个今天遇到的问题也就解决了,对于thymeleaf页面回显时,字段空的判断以及list集合空的判断一定不能少,少的话页面往往就会出现500报错无法展示的情况,需要注意。

总结

本次遇到的thymeleaf页面回显的问题其实算比较常见的,毕竟后台管理系统多选回显还是会经常遇到的,稍有不注意可能就会出现这样的情况。当然如果你使用的是 ${set.classIds?.contains(item.classId+'')} 也不一定会出现问题,因为这个问题必须等数据积累到一定程度了才会出现,比如这次我遇到的情况 【36,38,295】【36,38,95,295】,因此最好的处理办法就是遇到这类多选回显的问题,直接采用我现在使用的方案,防止以后数据积累出现这样莫名其妙的情况时而不能及时察觉,导致系统数据出现一些莫名其妙的问题。

相关文章
|
前端开发
Bootstrap02 家居商城首页之最新上架&热门家具&分类页面
Bootstrap02 家居商城首页之最新上架&热门家具&分类页面
|
1月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
32 3
|
3月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
28 2
|
前端开发 JavaScript
Javascript知识【BootStrap技术实现商品页面】(下)
Javascript知识【BootStrap技术实现商品页面】
|
JSON 前端开发 JavaScript
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
在这里记录一下,也是在公司用到的一个例子,刚刚解决,正好趁热打铁。前端页面是采用BootStrap框架搭建的,主要的样式涉及到项目,在这里就不截图了,直接上代码:
113 1
Bootstrap03购物车页面&登录注册界面&其他组件使用
Bootstrap03购物车页面&登录注册界面&其他组件使用
157 0
|
Web App开发 弹性计算 前端开发
实验4 利用 BootStrap 创建简单页面| 学习笔记
快速学习实验4 利用 BootStrap 创建简单页面
实验4 利用 BootStrap 创建简单页面| 学习笔记
|
前端开发 JavaScript 容器
Bootstrap实战 - 单页面网站
单页面结构简单、布局清晰,常常用来做手机 App 或者某个产品的下载介绍页面。现在,展示型网页整体趋向于单页网站设计,这样一次性把核心信息展现出来,对于用户来说更加直观和简单,能够快速了解一个产品。
291 0
Bootstrap实战 - 单页面网站
|
前端开发 Java Spring
Spring之路(22)–SpringMVC+Bootstrap开发博客系统实例(引入Boostrap并实现浏览博客页面)
本文目录 1.背景 2. 浏览博客功能实现 3. 导入Bootsrap 4. 利用Bootstrap样式美化表格 5. 利用Bootstrap添加导航栏 6. 添加修改、删除链接 7. 总结
290 0
Spring之路(22)–SpringMVC+Bootstrap开发博客系统实例(引入Boostrap并实现浏览博客页面)
|
移动开发 前端开发 JavaScript
Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器
Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器
456 0