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淡入淡出效果的实现思路
Mar 31 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
JS中的多态实例详解
Oct 15 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 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
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
python中sets模块的用法实例
2014/09/30 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python @property的用法及含义全面解析
2018/02/01 Python
对Django外键关系的描述
2019/07/26 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
python中可以声明变量类型吗
2020/06/18 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
中学教师实习自我鉴定
2013/09/28 职场文书
中学生校园广播稿
2014/01/16 职场文书
《锄禾》教学反思
2014/04/08 职场文书
稽核岗位职责范本
2015/04/13 职场文书
春节晚会开场白
2015/05/29 职场文书
致接力运动员加油稿
2015/07/21 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
vue使用watch监听属性变化
2022/04/30 Vue.js
PHP 时间处理类Carbon
2022/05/20 PHP
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers