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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
mock.js模拟前后台交互
Jul 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分页函数代码(简单实用型)
2010/12/02 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
微信分享调用jssdk实例
2017/06/08 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
浅谈python 线程池threadpool之实现
2017/11/17 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
大学生实习自我鉴定
2013/12/11 职场文书
自我鉴定四大框架
2014/01/17 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
高考励志标语
2014/06/05 职场文书
单位考核鉴定意见
2015/06/05 职场文书
周一问候语大全
2015/11/10 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL