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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
js异常捕获方法介绍
Apr 10 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
js的with语句使用方法
2007/09/21 Javascript
js一组验证函数
2008/12/20 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
javascript回到顶部特效
2016/07/30 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
如何设置Java的运行环境
2013/04/05 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
酒店个人求职信范文
2014/01/25 职场文书
初三政治教学反思
2014/01/30 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
代理词怎么写
2015/05/25 职场文书
师范生教育见习总结
2015/06/23 职场文书
运动会致辞稿
2015/07/29 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
python中对列表的删除和添加方法详解
2022/02/24 Python