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 自动转到命名锚记
Jan 10 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
javascript实现左右缓动动画函数
Nov 25 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个人网站架设连环讲(三)
2006/10/09 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
单链表反转python实现代码示例
2018/02/08 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL