jQuery动态生成不规则表格(前后端)


Posted in Javascript onFebruary 21, 2017

一、需求:有这么一张表

jQuery动态生成不规则表格(前后端)

前四个属性当作联合主键

需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行。类似这种:

jQuery动态生成不规则表格(前后端)

二、初解决:先上来把数据库的数据查询出来,以List<Activity> activities保存,再存到json对象中传回页面。像这样json.put("activities",activities);

到js页面了,然后就开始蒙蔽了。本来jqeury就小白,遇到这种情况就更没办法了。

三、问大牛:大牛给我提供了两种思路:我的理解是遇到这种情况可以先把数据在后台封装成你需要的数据结构,在传到前台,就会很好处理。

第一种:构造Map:Map<String,Map<String,List<Activity>>>

第二中:构造List:这种需要封装出新的java对象.形如:List<ActivityCode>.

对象ActivityCode有List<ActivityVersion>这个属性,对象ActivityVersion有属性List<Activity>

我用的是第一种:首先转换数据结构:

public static Map<String, Map<String, List<Activity>>> listToMap(
      List<Activity> activities) {
    Map<String, Map<String, List<Activity>>> map = new HashMap<String, Map<String, List<Activity>>>();
    for (Activity detail : activities) {
      if (!map.containsKey(detail.getActivityCode())) {
        Map<String, List<Activity>> mapValue = new HashMap<String, List<Activity>>();
        List<Activity> listValue = new ArrayList<Activity>();
        listValue.add(detail);
        mapValue.put(detail.getActivityVersion(), listValue);
        map.put(detail.getActivityCode(), mapValue);
      } else {
        Map<String, List<Activity>> mapValue = map.get(detail
            .getActivityCode());
        if (!mapValue.containsKey(detail.getActivityVersion())) {
          List<Activity> listValue = new ArrayList<Activity>();
          listValue.add(detail);
          mapValue.put(detail.getActivityVersion(), listValue);
        } else {
          List<Activity> mapValueList = mapValue.get(detail
              .getActivityVersion());
          mapValueList.add(detail);
          mapValue.put(detail.getActivityVersion(), mapValueList);
        }
      }
    }
    return map;
  }

然后就jQuery遍历map就好了

以上所述是小编给大家介绍的jQuery动态生成不规则表格(前后端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
node+multer实现图片上传的示例代码
Feb 18 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 #Javascript
JavaScript中 this 指向问题深度解析
Feb 21 #Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 #Javascript
从零学习node.js之模块规范(一)
Feb 21 #Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 #Javascript
JS中实现函数return多个返回值的实例
Feb 21 #Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 #Javascript
You might like
利用php绘制饼状图的实现代码
2013/06/07 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
Javascript----文件操作
2007/01/18 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JS交换变量的方法
2015/01/21 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
python实现简单的计时器功能函数
2015/03/14 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python打开windows应用程序的实例
2019/06/28 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
团日活动总结怎么写
2014/06/25 职场文书
企业法人授权委托书
2014/09/25 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android