需求描述:页面中有两个列表,一个已添加,一个可以添加,进入页面的时候,如果已添加中有数据则显示,没有数据就隐藏,emmmm,这种需求,我该怎么吐槽嗷嗷嗷

解决思路:让已添加的列表的div默认隐藏,前台接收后台传递过来的标志(该标志是已添加列表是否有数据),如果有,就把已添加列表的div设置为显示

代码:

//html代码
<div class="row" id="tableDivOne" style="display: none;">
  <table>
   //列表中间内容省略
  </table>
</div> //后台java代码
map.addAttribute("listed", list);
return VIEW_PATH + "/toAddProd";

//js代码
var prodAdded = [[${listed}]]; //接收传过来的list
if (CommnUtil.notNull(prodAdded)) {
  //如果prodADDed的长度大于0说明已添加列表有数据
if (prodAdded.length > 0) {
document.getElementById("tableDivOne").style.display="block";//显
}
}

啰嗦一句:别的代码也可以实现  下边是同事的代码:

//html代码
<div class="row" id="addedDiv" hidden="hidden">
  <table>
   //····
  </table>
</div> //js代码
var addedIds = [[${addedList}]];
if (CommnUtil.notNull(addedIds)) {
if (addedIds.length > 0) {
$("#addedDiv").prop('hidden', false);
}
}

总结:推荐用我的哈O(∩_∩)O哈哈~,为啥呢  原生js兼容性肯定比他的好啊

进入页面,根据后台传过来的flag 判断列表隐藏与否的更多相关文章

  1. jsp页面获取后台传过来的list集合的长度

    在jsp页面导入函数标签库: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"% ...

  2. 步步为营-73-asp.net的简单练习(根据美工提供静态页面,编写后台代码)

    说明:实际企业中开发分工是很明确,往往程序员根据美工提供的UI界面进行后台代码的编写. 1.1 原始HTML页面 1.2 使用aspx进行修改 这里使用到了三层架构 using System; usi ...

  3. 利用JavaScript将页面截图生成图片传给后台的插件:html2canvas

    利用JavaScript将页面截图生成图片传给后台的插件:html2canvas 一.总结 一句话总结: 10 <script type="text/javascript"& ...

  4. ajax往后台传json格式数据报415错误

    问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById(&quo ...

  5. asp.net向后台传参数动态加载图片

    //向后台传参数动态加载图片 $(function() { $("#Button1").click(function() { var stockcode = getUrlParam ...

  6. Thymeleaf在前台下拉列表获取后台传的值

    Thymeleaf在前台下拉列表获取后台传的值 后台添加代码: /** * 新增机构 */ @GetMapping("/add") public String add(ModelM ...

  7. fastTime从后台传过来显示格式的处理

    1.可以在控制台用syso查看 QuestionFeedbackView qfv = on_LineManageService.getBringupHead(projectNo);//qfv是一个内含 ...

  8. Web jsp开发学习——前端后台传参方法

    一.前端传后台: 1.1表单数据的传递   前端的表单里定义名字name   后台通过名字获取输入的值         1.2页面点击了哪个按钮传递 登录注销的另一种方式   点击登录的地方设置参数 ...

  9. 用jQuery.ajaxWebService请求WebMethod,Ajax处理实现局部刷新;及Jquery传参数,并跳转页面 用post传过长参数

    首先在aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性. 如: [WebMethod]  public static string GetUserName()   {  //. ...

随机推荐

  1. 4-24日 collections模块 random模块 time模块 sys模块 os模块

    1, collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdi ...

  2. 【Thymeleaf】Thymeleaf模板对没有结束符的HTML5标签解析出错的解决办法

    解决方案 spring: thymeleaf: mode: LEGACYHTML5 <dependency> <groupId>net.sourceforge.nekohtml ...

  3. python 09

    1.函数进阶: 函数动态参数: 动态位置参数 *args 动态关键字参数 **kwargs 位置 > 动态位置参数 > 默认(关键字)参数 > 动态关键字参数 2.命名空间 局部命名 ...

  4. Android逆向基础----APK文件结构

    参考这个博客 http://www.cnblogs.com/wangtianxj/archive/2010/06/13/1757639.html http://blog.csdn.net/bupt07 ...

  5. 微信小程序获取手机验证码

    一种比较常见的功能获取手机验证码 先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题 直接上代码吧: wxml页面: <view class='changeI ...

  6. 极客时间|AI技术内参

    学习进度: 014 | 精读AlphaGo Zero论文

  7. 安装mysql8.0.12以及修改密码和Navicat的连接

    mysql8.0+与安装其他版本不同一.安装mysql8.0.121.到官网https://www.mysql.com/  下载mysql-8.0.12-winx64.zip(不要.mis),直接解压 ...

  8. Houdini OpenCL

    SOP: simple moveKernel #include "interpolate.h" float lerpConstant( constant float * in, i ...

  9. 【转】python之random模块分析(一)

    [转]python之random模块分析(一) random是python产生伪随机数的模块,随机种子默认为系统时钟.下面分析模块中的方法: 1.random.randint(start,stop): ...

  10. ACM Computer Factory POJ - 3436 网络流拆点+路径还原

    http://poj.org/problem?id=3436 每台电脑有$p$个组成部分,有$n$个工厂加工电脑. 每个工厂对于进入工厂的半成品的每个组成部分都有要求,由$p$个数字描述,0代表这个部 ...