当前位置:首页 > 日记 > 正文

jQuery动态生成不规则表格 | 前后端

jQuery动态生成不规则表格 | 前后端

一、需求:有这么一张表

前四个属性当作联合主键

需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行。类似这种:

二、初解决:先上来把数据库的数据查询出来,以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动态生成不规则表格(前后端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

React-router v4 路由配置方法小结

React-router v4 路由配置方法小结

方法,路由配置,电脑软件,React,router,本文主要介绍了React-router v4 路由配置方法小结,分享给大家,也给自己留个笔记一. Switch 、Router 、Route三者的区别1、RouteRoute 是建立location 和 ui的最直接联系2、Routerreact-router v4 中,Rou…

详解Vue + Vuex 如何使用 vm.$next

详解Vue + Vuex 如何使用 vm.$next

如何使用,详解,电脑软件,Vue,Vuex,vm.$nextTick简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面…

使用canvas及js简单生成验证码方法

使用canvas及js简单生成验证码方法

方法,验证码,简单,电脑软件,canvas,在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是:1.生成一张画布canvas2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证…

正则表达式字符类加深理解

正则表达式字符类加深理解

字符,正则表达式,电脑软件,正则表达式字符类加深理解:一.基本概念:字符类相对来说是比较简单的,但是也有可能由于理解不够深入或者大意造成一些误区,下面再来做一下介绍。字符类[]能够匹配包含在中括号中的一系列字符中的任意一个,但是匹配的…

Excel表格制作中如何隐藏函数

Excel表格制作中如何隐藏函数

函数,表格,电脑软件,Excel,  在一般的Excel使用中的公式或者函数,是完全能够让浏览者看到的。那么如果有办法将Excel中的公式或函数隐藏起来,只显示运算结果,这样会比较好。以下是小编为您带来的关于Excel隐藏函数,希望对您有所帮助。Excel隐…

Photoshop利用滤镜制作彩色拉丝效

Photoshop利用滤镜制作彩色拉丝效

滤镜,彩色,效果,电脑软件,Photoshop,今天为大家分享Photoshop制作彩色拉丝效果方法,操作很简单的,喜欢的朋友可以参考本文,来看看吧!1、在ps软件中,新建一个800*800的文档,填充黑色,然后在滤镜中添加镜头光晕,如图所示2、再次在滤镜中添加镜头光晕,…

JavaScript数组push方法使用注意事

JavaScript数组push方法使用注意事

方法,数组,注意事项,电脑软件,JavaScript,js 数组的push方法,想必大家都知道是向数组末尾添加元素,但是有一个很关键的点需注意:引自 MDN返回值当调用该方法时,新的 length 属性值将被返回。var sports = ["soccer", "baseball"];var total…

word设置纸张大小的两种方法

word设置纸张大小的两种方法

方法,设置,纸张,大小,两种,  办公经常学要调节纸张大小,虽然常用,但偶尔还是会忘记如何调整纸张大小的方法,那么下面就由小编给大家分享下word设置纸张大小的技巧,希望能帮助到您。word设置纸张大小方法一步骤一:打开word软件,点击桌面快捷图标…

Visual Studio 2017正式版发布 Mac

Visual Studio 2017正式版发布 Mac

新功能,正式版,特性,有哪些,电脑软件, 期待已久的由微软推出的软件开发工具Visual Studio 2017正式版马上要推出了,而Visual Studio 2017 正式版发布时间和Mac版新特性有哪些呢?让我们见证一下Visual Studio 20周年纪念的倾情推荐吧。…

JavaScript基础之this详解

JavaScript基础之this详解

详解,基础,电脑软件,JavaScript,JavaScript的this和Java等面向对象语言中的this大不一样,bind()、call()和apply()函数更是将this的灵活度进一步延伸。为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。如果对…

AI结合c4d设计三维立体文字和图案

AI结合c4d设计三维立体文字和图案

详细教程,文字,图案,三维立体,电脑软件,ai和c4d怎么将平面的文字快速转换成3维的立体效果呢?下面我们就来看看详细的教程,很简单,感兴趣的朋友可以进来参考一下。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:20…

基于javascript中的typeof和类型判

基于javascript中的typeof和类型判

类型,详解,电脑软件,javascript,typeof,typeofECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String。我们都知道可以使用typeof运算符求得一个变量的类型,但是对引用类型变量却只会返回object,也就是说t…