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

  

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

时间: 2024-10-11 17:50:38

Thymeleaf+layui+jquery复选框回显的相关文章

CheckBox复选框回显

CheckBox复选框回显,分两个部分查数据: 其一: 查询所有复选框数据,拼接成复选框 其二,根据查询实际场景id,查询复选框对应数据, 设计循环嵌套逻辑进行复选框数据回显默认选中: 1 //双击行事件 2 function onDblClickRow(rowIndex, rowData){ 3 4 //权限复选框置空 5 $('#permissionTd').html(""); 6 7 //打开修改窗口 8 $('#editWindow').window("open&qu

element-ui中el-table(隔行换色,复选框回显)

1.隔行换色 el-table加上改属性,然后操作该方法 之后在添加颜色  2.复选框回显 a:表格数据不是动态加载的情况下,表格会自动选中之前选中的 b:表格数据是动态获取的,需要根据行来进行回显 原理:拿已经存储好的之前选中的数据去匹配表格中某一行的某一个属性,两个数组对象中可以匹配上,表格便会回显成功. 原文地址:https://www.cnblogs.com/yxkNotes/p/11584656.html

复选框回显操作

在对有选择复选框的页面进行修改的时候  要把修改前原数据回显过来,可以这样做 .如下: 主要是运用到了双循环进行 连个foreach循环中的item 都是在控制器中写好的. 其中第一个循环 表示的是所有的项  ,第二个循环 表示的是修改前选中的项 <tr> <td width="120px"> <label for="payment">支付类型:</label> </td> <td class=&qu

js 复选框回显

<div class="control-group"> <label class="control-label">客户状态:</label> <div class="controls"> <c:forEach items="${fns:getCustomerStatusList()}" var="item"> <input type=&quo

jQuery复选框全选/取消全选

jQuery复选框 注意jquery版本的更新兼容问题 使用兼容1.6+所有版本 $("#selAll").on("click", function () { if($("#selAll").prop("checked") == true){ $("input[id='iid']").each(function(){ $(this).prop("checked", true); });

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

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

jquery复选框

$("#frmTest :checkbox").attr("checked","true"); frmTest 为表单from的id   上面代码可以让表单中所有复选框实现全选 但是 $("#frmTest :checkbox").attr("checked","flase");却未能取消全选 正确的取消全选代码是 $("#frmTest :checkbox").pr

jquery复选框赋值多选赋值给文本框

网上找到的源代码,分享给大家 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值</title><base target="_blank" /> <meta http-equiv="Content-Type" content=&