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;

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.前台页面<div class="layui-form-item">

    <label class="layui-form-label">客户等级</label>

    <div class="layui-input-inline" id="constomerGradeArray">

        <!-- 如果是layui的表单提交input标签的name值是constomerGradeArray[] -->

        <!-- 不然就会导致只提交过去一个值 (本人使用var data=$("form").serialize();) --> 
　　　　 <input type="checkbox" name="constomerGradeArray" value="1" title="高级客户"> 
　　　　 <input type="checkbox" name="constomerGradeArray" value="2" title="VIP客户"> 
　　</div> 
</div>

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

巴特西