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

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

1.实体类属性

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

2.后台返回

  1. @RequestMapping("goodsTypeList")
  2. public String goodsType_list(Client client,Model model){
  3. if(client!=null){
  4. //将数组转为json格式
  5. client.setConstomerGradeString(JSON.toJSONString(client.getConstomerGradeArray()));
  6. model.addAttribute("client",client);
  7. }
  8. return "goodsType_list";
  9. }

3.前台页面<div class="layui-form-item">

  1. <label class="layui-form-label">客户等级</label>
  2. <div class="layui-input-inline" id="constomerGradeArray">
  3. <!-- 如果是layui的表单提交input标签的name值是constomerGradeArray[] -->
  4. <!-- 不然就会导致只提交过去一个值 (本人使用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

  1. layui.use(['form','jquery'], function(){
  2. var form = layui.form;
  3. var $ = layui.jquery;
  4.  
  5. $(function () {
  6.  
  7. if('[[${client.constomerGradeString}]]'!='null'){
  8. //获取后台json /*用jQuery处理传过来的json值*/
  9. var constomerGradeString=$.parseJSON('[[${client.constomerGradeString}]]');
  10. //获取所有复选框的值
  11. var constomerGradeArray = $("input[name='constomerGradeArray']");
                     //遍历json数组
  12. $.each(constomerGradeString,function(i,json){
  13. //获取所有复选框对象的value属性,用json数组和他们匹配,如果有,则说明他应被选中
  14. $.each(constomerGradeArray,function(j,checkbox){
  15. //获取复选框的value属性
  16. var checkValue=$(checkbox).val();
  17. if(json==checkValue){
  18. $(checkbox).attr("checked",true);
  19. }
  20. })
  21. //重新渲染(很重要:因为页面是用layui画的)
  22. form.render();
  23. })
  24. }
  25. })
  26. })
  27. }

参考链接:

  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复选框回显的更多相关文章

  1. 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面

    <%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...

  2. Element-ui框架checkbox复选框回显

    先看下效果是不是你需要的..... 然后废话不多说,上代码,希望能够帮助到你... <template> <div class=''> <el-form label-wi ...

  3. js 复选框回显

    <div class="control-group"> <label class="control-label">客户状态:</l ...

  4. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  5. Jquery复选框

    Jquery复选框 1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  6. layui 添加复选框checkbox后,无法正确显示及点击的方法

    layui 添加复选框checkbox后,无法正确显示方式,这个是由于html里的样式添加 layui-form后,没有加载 form插件 ,具体如下: <body style="ba ...

  7. jquery 复选框

    jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...

  8. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  9. Jquery复选框的全选全不选及选择所有复选框实现全选的复选框

    Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...

随机推荐

  1. Matlab+Qt开发笔记(二):Qt打开mat文件显示读取的数据

    前言   介绍了基础环境,最终是为了读取显示.mat文件,本篇读取mat文件并显示.   补充   测试的mat文件是double类型的. Matlab库数据类型 变量类型:matError,错误变量 ...

  2. NodeJs创建一个简单的服务器

    步骤: 1 //模块化引入 2 let http = require ("http"); 3 4 //创建服务器 5 http.createServer(function(requ ...

  3. es聚合查询语法

    {    "size": 0,    "query": {        "bool": {            "filter ...

  4. PHP create_function代码注入

    今天做ctf遇到一道题,记录一下知识点 <?php class Noteasy{ protected $param1; protected $param2; function __destruc ...

  5. IO流(一)

    内容概要: Java以流的形式处理所有输入和输出.流是随通信路径从源移动到目的地的字节序列. 内存与存储设备之间传输数据的通道 流的分类: 按方向 输入流:将存储空间中的内容读到内存中   硬盘--& ...

  6. 14-1-Unsupervised Learning ---dimension reduction

    无监督学习(Unsupervised Learning)可以分为两种: 化繁为简 聚类(Clustering) 降维(Dimension Reduction) 无中生有(Generation) 所谓的 ...

  7. Exploring Matrix

    import java.util.Scanner; public class J714 { /** * @taking input from user */ public static void ma ...

  8. 生产服务GC调优实践基本流程总结

    Photo by Pixabay from Pexels 本文作者:夜色微光 - 博客园 (cnblogs.com) 前言 对Java虚拟机进行性能调优是一个非常宽泛的话题,在实践上也是非常棘手的过程 ...

  9. [hdu6582]Path

    首先,从1和n跑一次dij,判断每一条边能否出现在最短路上,不能出现就删掉,然后将所有边建在图上,流量为边权,跑最小割即可. 1 #include<bits/stdc++.h> 2 usi ...

  10. 【PS】证件照修改尺寸

    证件照同时修改尺寸.分辨率.像素 2019-07-14  12:56:25  by冲冲 1. 需求 实现证件照自由切换一寸.小一寸.大一寸.二寸. 2. 步骤 ① 裁剪工具 -- 原始比例 -- 存储 ...