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

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

问题现象

今天遇到的问题的描述正如标题中的一样,就是后台管理系统在配置完内容后点击保存,回显时发现页面竟然莫名其妙多了一些数据。项目整体后台管理系统采用的是bootstrap+thymeleaf页面,这里首先复现一下问题效果
在这里插入图片描述
图1
在这里插入图片描述
图2
对比两个图不难看出,图2比图1多了一个套餐名称【书课包】,那么查看数据发现图1中对应的套餐id为【36,38,295】,而图2中回显的套餐id为【36,38,95,295】,那么问题来了,为什么选择了三个,而回显时却回显了四个呢?

问题分析

首先查看页面回显代码,根据页面分析来看,由于是字符串的contains比较,那么当逐个比较 “36” “38” “95” "295"时就能匹配上,因此页面会多余显示了95对应的套餐名称
在这里插入图片描述
那么既然问题分析明白了,我们就可以对当前遇到的问题进行处理了。
thymeleaf官方文档地址如下:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html,有需要的可以参考。下面开始处理当前遇到的问题。

问题处理

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

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

在这里插入图片描述
然后再通过list集合判断包含的形式,语法格式如下

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

在这里插入图片描述
那么最后整合之后的thymeleaf页面代码如下

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

将修改后的页面代码放在页面,刷新项目后查看效果
在这里插入图片描述
在这里插入图片描述
这里可以很明显的看到回显的内容是正确的。但是这里其实还有一个问题,就是套餐不是非必填的,当套餐没有选择时页面效果是这样的
在这里插入图片描述
后台控制台打印日志如下
在这里插入图片描述
那么这个问题其实也好处理,在进行字符串转list之前需要进行字符串非空的判断,通过thymeleaf的if else判断,当字符串 set.classIds 为空时,不进行 #strings.listSplit(set.classIds,‘,’) 的转换,当 set.classIds 不为空时,再进行 #strings.listSplit(set.classIds,‘,’) 的转换,那么改造后的代码如下
在这里插入图片描述
改造之后再次刷新页面之后就可以看到没有问题了
在这里插入图片描述
到这里整个今天遇到的问题也就解决了,对于thymeleaf页面回显时,字段空的判断以及list集合空的判断一定不能少,少的话页面往往就会出现500报错无法展示的情况,需要注意。

总结

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

最近更新

  1. TCP协议是安全的吗?

    2024-04-07 20:02:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-07 20:02:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-07 20:02:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-07 20:02:02       20 阅读

热门阅读

  1. 力扣(数组)分发饼干

    2024-04-07 20:02:02       11 阅读
  2. vue-router v4.x命名路由,编程式跳转

    2024-04-07 20:02:02       13 阅读
  3. 独孤思维:1小时卖了80单

    2024-04-07 20:02:02       14 阅读
  4. shell脚本规范及变量类型、置换

    2024-04-07 20:02:02       17 阅读
  5. zynq gst-launch-1.0相关

    2024-04-07 20:02:02       13 阅读
  6. 顺序表应用——通讯录实现

    2024-04-07 20:02:02       16 阅读
  7. 《解释器模式(极简c++)》

    2024-04-07 20:02:02       15 阅读