码迷,mamicode.com
首页 > Web开发 > 详细

Thymeleaf+layui+jquery复选框回显

时间:2020-01-03 17:59:18      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:ecb   ejs   item   标签   splay   null   mod   display   cli   

一、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.前台页面<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

  

Thymeleaf+layui+jquery复选框回显

标签:ecb   ejs   item   标签   splay   null   mod   display   cli   

原文地址:https://www.cnblogs.com/wwct/p/12144257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!