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 offset函数应用实例
Nov 14 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
全面理解闭包机制
Jul 11 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
js实现橱窗展示效果
Jan 11 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来自动调用不同服务器上的flash
2006/10/09 PHP
聊天室php&amp;mysql(六)
2006/10/09 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
python使用cookielib库示例分享
2014/03/03 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python如何实现的二分查找算法
2020/05/27 Python
python实现简单的五子棋游戏
2020/09/01 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
教师师德承诺书
2014/03/26 职场文书
法制宣传标语集锦
2014/06/25 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
主要领导对照检查材料
2014/08/26 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
对照检查剖析材料
2014/09/30 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android