需求描述:页面中有两个列表,一个已添加,一个可以添加,进入页面的时候,如果已添加中有数据则显示,没有数据就隐藏,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. Java基础_0311: 数据表与简单Java类映射

    数据表与简单Java类映射 现在假设有如下的关系表,现在要求实现如下的数据关联操作: 一个部门有多个雇员: 一个雇员有一个或零个领导 代码实现 class Dept { private int dep ...

  2. MySql数据库学习笔记(2)

    DELETE 语法:delete from 表名 [where condition] delete from grade; TRUNCATE 用于完全清空表数据,但表结构.索引.约束不变: 语法: t ...

  3. jq的stop

    jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(selector).stop(stop ...

  4. 【python小练习】简单的猜数字游戏

    简单的猜数字游戏 前两天在论坛回答问题时候,看到一个猜数字的游戏,就在原来的基础上改了一下,玩一玩. 此程序,数字范围和尝试次数是事先设定好的,当然可以通过代码修改.经过测试,由于难度过大,我在其中加 ...

  5. Django学习手册 - ORM数据类型

    DOM 字段/参数 配置格式: Module.字段(参数) 常用的字段归纳: 数字 models.AutoField() 自增列(int),必须设置为主键 models.IntegerField() ...

  6. Microsoft SQL - 操作语句

    操作语句(Operation Statement) 操作数据库 创建数据库 关键字:create database 用于创建各种数据库对象(数据库.表.触发器.存储过程等) 格式如:create &l ...

  7. 20165237 2017-2018-2 《Java程序设计》第4周学习总结

    20165237 2017-2018-2 <Java程序设计>第4周学习总结 教材学习内容总结 1.子类只能有一个父类,父类可以有多个子类. 2.子类继承父类的成员变量和方法. 3.开闭原 ...

  8. oracle 索引的创建与使用

    什么是数据库索引 在关系数据库中,索引是一种与表有关的数据库结构,它可以使对应于表的SQL语句执行得更快. 索引的作用相当于图书的目录,可以根据目录中的页码快速找到所需的内容. 对于数据库来说,索引是 ...

  9. 第四节:tensorflow图的基本操作

    基本使用 使用图(graph)来表示计算任务 激活会话(Session)执行图 使用张量(tensor)表示数据 定义变量(Variable) 使用feed可以任意赋值或者从中获取数据,通常与占位符一 ...

  10. 左侧滚动条js

    <script> var left = document.getElementById('main-left'); var right = document.getElementById( ...