thymeleaf 复选框回显_Thymeleaf+layui+jquery复选框回显

一、Thymeleaf+layui+jquery复选框回显

基于Thymeleaf模板下的layui+jquery复选框回显，主要是jquery。大致意思是：把数组转成JSON传到前台，再在前台转回数组 AJAX一般都是用JSON格式或XML格式来传递数据的JSON就是一种具有特殊格式的字符串。

1.实体类属性

1 //顾客等级

2 private Integer[] constomerGradeArray;3 //用来存储json格式的顾客等级数组(方便数据传输)

4 private String constomerGradeString;

View Code

2.后台返回

@RequestMapping("goodsTypeList")

public String goodsType_list(Client client,Model model){

if(client!=null){

//将数组转为json格式

client.setConstomerGradeString(JSON.toJSONString(client.getConstomerGradeArray()));

model.addAttribute("client",client);

}

return "goodsType_list";

}

3.前台页面

客户等级

4.jquery

layui.use(['form','jquery'], function(){

var form = layui.form;

var $ = layui.jquery;

$(function () {

if('[[${client.constomerGradeString}]]'!='null'){

//获取后台json /*用jQuery处理传过来的json值*/

var constomerGradeString=$.parseJSON('[[${client.constomerGradeString}]]');

//获取所有复选框的值

var constomerGradeArray = $("input[name='constomerGradeArray']");

//遍历json数组

$.each(constomerGradeString,function(i,json){

//获取所有复选框对象的value属性，用json数组和他们匹配，如果有，则说明他应被选中

$.each(constomerGradeArray,function(j,checkbox){

//获取复选框的value属性

var checkValue=$(checkbox).val();

if(json==checkValue){

$(checkbox).attr("checked",true);

}

})

//重新渲染(很重要：因为页面是用layui画的)

form.render();

})

}

})

})

}

参考链接：

json转换：https://www.cnblogs.com/YeHuan/p/11221504.html 或 https://blog.csdn.net/qq_37444478/article/details/76209189

主要代码：https://blog.csdn.net/w18853851252/article/details/82888109

表单渲染：https://blog.csdn.net/qq_33048333/article/details/80609553