Thymeleaf+layui+jquery復選框回顯

一、Thymeleaf+layui+jquery復選框回顯

　　基於Thymeleaf模板下的layui+jquery復選框回顯，主要是jquery。大致意思是：把數組轉成JSON傳到前台，再在前台轉回數組 AJAX一般都是用JSON格式或XML格式來傳遞數據的JSON就是一種具有特殊格式的字符串。

1.實體類屬性

//顧客等級
private Integer[] constomerGradeArray;
//用來存儲json格式的顧客等級數組(方便數據傳輸)
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