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给多个不同元素添加class样式的方法
Mar 26 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
微信小程序实现留言板
Oct 31 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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/12/06 PHP
php array_walk() 数组函数
2011/07/12 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
微信API接口大全
2015/04/15 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python常用列表数据结构小结
2014/08/06 Python
Python中有趣在__call__函数
2015/06/21 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python+tkinter实现学生管理系统
2019/08/20 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
计算机通信专业推荐信
2014/02/22 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
感谢信格式范文
2015/01/22 职场文书
继承权公证书范本
2015/01/23 职场文书
公务员政审个人总结
2015/02/12 职场文书
记者节感言
2015/08/03 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python