• springMVC 复选框带有选择项记忆功能的处理


    前言:由于jsp管理页面经常会遇到复选框提交到JAVA后台,后台处理逻辑完成后又返回到jsp页面,此时需要记住jsp页面提交时复选框的选择状态,故编写此功能!

    一、复选框的初始化

    1.1.jsp页面

      <c:forEach items="${cycleMap}" var="light">
           <input type="checkbox" name="id" value="${light.key}" />${light.value}
      </c:forEach>

    1.2.后台JAVA片段

      //初始化复选框
      Map<String, String> cycleMap = new HashMap<String, String>();
      cycleMap.put("FRANCE", "FRANCE");
      cycleMap.put("ENGLISH", "ENGLISH");
      cycleMap.put("CHINESE", "CHINESE");

    1.3.传参到前端jsp页面

      mv.addObject("cycleMap", cycleMap);

    二、jsp页面复选框提交后,返回提交页面带有选择项记忆功能

      2.1.java片段

      String[] idas =new String[3];

      String ids = "";
      if(request.getParameterValues("id") != null){
        idas = request.getParameterValues("id");
        ids = StringUtils.join(idas, ",");
      }else {
        idas[0] = "FRANCE";
        idas[1] = "ENGLISH";
        idas[2] = "CHINESE";
        ids = "FRANCE,ENGLISH,CHINESE;
      }

    2.2 传参到jsp页面

      mv.addObject("ids", ids);

    2.3 JavaScript处理

    <script type="text/javascript">

      $(function() {//页面加载的时候触发
          var boxObj = $("input:checkbox[name='id']");  //获取所有的复选框
          var expresslist = '${ids}'; //用el表达式获取在控制层存放的复选框的值为字符串类型
          var express = expresslist.split(','); //去掉它们之间的分割符“,” 
          for(i=0;i<boxObj.length;i++){
      for(j=0;j<express.length;j++){          
                 if(boxObj[i].value == express[j])  //如果值与修改前的值相等
                 {
                     boxObj[i].checked= true;
                     break;
                 }
        }
          }          
      })

    </script>

    经过实际项目验证无误,分享共勉!

    天津雍博科技有限责任公司

    www.yongbosoft.com

  • 相关阅读:
    Vue.js中使用iView日期选择器并设置开始时间结束时间校验
    侠客行
    myJRebel 已不可用
    开发.NET Core NuGet包并实现CI/CD
    独立部署GeoWebCache
    GeoServer中GeoWebCache(GWC)的使用
    使用VS Code编写Markdown文件
    GitHub团队协作流程
    打包发布到NPM并通过CDN访问
    使用VS Code编写Markdown文件
  • 原文地址:https://www.cnblogs.com/monjeo/p/10557097.html
Copyright © 2020-2023  润新知