这些天一直在做单选框,复选框,下拉框的回显问题,昨天做完复选框发现出现了一个小的bug,单选框和下拉框选择搜索之后都会找到对应的值,但是在复选框中它只会显是按照顺序的选项,例如你的爱好有(篮球,足球,羽毛球)但是在复选框中你可以搜索篮球搜到,可以搜篮球,足球搜到,可以搜篮球,足球,羽毛球搜到,但是搜篮球,羽毛球就会搜不到这条数据,今天解决了这个问题,直接上代码了
解决前
这个是我自己定义的类(作用是让复选框对应起来类似于字典表)
private void setHobby(Model model){
HashMap<String,String> hobbys=new HashMap<>();
hobbys.put("1","编程");
hobbys.put("2","篮球");
hobbys.put("3","唱歌");
hobbys.put("4","跳舞");
hobbys.put("5","睡觉");
hobbys.put("6","蹦迪");
model.addAttribute("hobbys",hobbys);
}
这里用的是springboot的框架,定义一个QueryWrapper对象,这个对象有like方法,进入这个方法就会执行里面的sql的查找语句
if(!ObjectUtils.isEmpty(student.getStudentHobby())) {
QueryWrapper<Student> queryWrapper = new QueryWrapper<Student>();
queryWrapper = queryWrapper.like("studentHobby",student.getStudentHobby());
}
之后会调用最上面那个字典方法,因为存在数据库的爱好都是用,分割开的所以需要调用split()方法根据,把他们拆分为一个个分别的爱好
setHobby(model);
if(!ObjectUtils.isEmpty(student.getStudentHobby())) {
model.addAttribute("hobbyList", Arrays.asList(student.getStudentHobby().split(",")));
}else{
model.addAttribute("hobbyList",new ArrayList<String>());
}
最后到前端页面去显示复选框对比就好(${hobbyList.contains(hobbys.value)})
<div class="layui-inline">
<input type="checkbox" th:each="hobbys:${hobbys}" th:checked="${hobbyList.contains(hobbys.value)}"
th:value="${hobbys.value}" th:title="${hobbys.value}" class="layui-input"
name="studentHobby" />
</div>
然后出来的效果应该是这样的
这个是全部显示的情况
单独选择篮球是都可以查出来的
选择篮球唱歌也是能查出来的
但是选择篮球睡觉,没有按照顺序就不会显示出来所以对上面代码进行了一点小小的优化
更改后
其实更改也很简单,知道这个小小bug出现的原因就好
原因在于上面第二句用它定义好的去查询的时候,传进去的参数是爱好显示的那个字符串例如传进去的是(唱歌,跳舞,睡觉),这样传进去的值是有顺序的,所以需要把他们拆分一下,所以应该把第二段代码改为
if(!ObjectUtils.isEmpty(student.getStudentHobby())) {
List<String> hobbies = Arrays.asList(student.getStudentHobby().split(","));
for (String h:hobbies) {
queryWrapper = queryWrapper.like("studentHobby",h);
System.out.println("******************************1"+h);
}
}
最后来看一下最后测试的结果