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 相关文章推荐
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
Three.js基础学习教程
Nov 16 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 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 判断字符串中是否包含html标签
2014/02/17 PHP
PHP中echo和print的区别
2014/08/28 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
js查找父节点的简单方法
2008/06/28 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
用Python抢过年的火车票附源码
2015/12/07 Python
python分数表示方式和写法
2019/06/26 Python
python简单的三元一次方程求解实例
2020/04/02 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
2015年教师见习期工作总结
2015/05/20 职场文书
2015年小学总务工作总结
2015/07/21 职场文书