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
Thymeleaf+layui+jquery复选框回显的更多相关文章
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- Element-ui框架checkbox复选框回显
先看下效果是不是你需要的..... 然后废话不多说,上代码,希望能够帮助到你... <template> <div class=''> <el-form label-wi ...
- js 复选框回显
<div class="control-group"> <label class="control-label">客户状态:</l ...
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- Jquery复选框
Jquery复选框 1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- layui 添加复选框checkbox后,无法正确显示及点击的方法
layui 添加复选框checkbox后,无法正确显示方式,这个是由于html里的样式添加 layui-form后,没有加载 form插件 ,具体如下: <body style="ba ...
- jquery 复选框
jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- Jquery复选框的全选全不选及选择所有复选框实现全选的复选框
Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...
随机推荐
- Matlab+Qt开发笔记(二):Qt打开mat文件显示读取的数据
前言 介绍了基础环境,最终是为了读取显示.mat文件,本篇读取mat文件并显示. 补充 测试的mat文件是double类型的. Matlab库数据类型 变量类型:matError,错误变量 ...
- NodeJs创建一个简单的服务器
步骤: 1 //模块化引入 2 let http = require ("http"); 3 4 //创建服务器 5 http.createServer(function(requ ...
- es聚合查询语法
{ "size": 0, "query": { "bool": { "filter ...
- PHP create_function代码注入
今天做ctf遇到一道题,记录一下知识点 <?php class Noteasy{ protected $param1; protected $param2; function __destruc ...
- IO流(一)
内容概要: Java以流的形式处理所有输入和输出.流是随通信路径从源移动到目的地的字节序列. 内存与存储设备之间传输数据的通道 流的分类: 按方向 输入流:将存储空间中的内容读到内存中 硬盘--& ...
- 14-1-Unsupervised Learning ---dimension reduction
无监督学习(Unsupervised Learning)可以分为两种: 化繁为简 聚类(Clustering) 降维(Dimension Reduction) 无中生有(Generation) 所谓的 ...
- Exploring Matrix
import java.util.Scanner; public class J714 { /** * @taking input from user */ public static void ma ...
- 生产服务GC调优实践基本流程总结
Photo by Pixabay from Pexels 本文作者:夜色微光 - 博客园 (cnblogs.com) 前言 对Java虚拟机进行性能调优是一个非常宽泛的话题,在实践上也是非常棘手的过程 ...
- [hdu6582]Path
首先,从1和n跑一次dij,判断每一条边能否出现在最短路上,不能出现就删掉,然后将所有边建在图上,流量为边权,跑最小割即可. 1 #include<bits/stdc++.h> 2 usi ...
- 【PS】证件照修改尺寸
证件照同时修改尺寸.分辨率.像素 2019-07-14 12:56:25 by冲冲 1. 需求 实现证件照自由切换一寸.小一寸.大一寸.二寸. 2. 步骤 ① 裁剪工具 -- 原始比例 -- 存储 ...