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 dom 基本操作小结
Apr 11 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
vue如何搭建多页面多系统应用
Jun 17 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
解析php常用image图像函数集
2013/06/24 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
JavaScript实现连连看连线算法
2019/01/05 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
PHP面试题附答案
2015/11/28 面试题
电子商务专业毕业生自荐书
2014/06/22 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
关于学习的决心书
2015/02/05 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
redis哨兵常用命令和监控示例详解
2021/05/27 Redis