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 相关文章推荐
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
Canvas三种动态画圆实现方法说明(小结)
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
example2.php
2006/10/09 PHP
php中的时间处理
2006/10/09 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
自己封装的常用javascript函数分享
2015/01/07 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
详解node.js 事件循环
2020/07/22 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python中bisect的用法及示例详解
2020/07/20 Python
公司保密承诺书
2014/03/27 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
三潭印月的导游词
2015/02/12 职场文书
2015年党建工作总结
2015/03/30 职场文书
如何写辞职信
2015/05/13 职场文书
2016年会开场白台词
2015/06/01 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
女性励志书籍推荐
2019/08/19 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
Django与数据库交互的实现
2021/06/03 Python