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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
Js callBack 返回前一页的js方法
Nov 30 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
详解javascript void(0)
Jul 13 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
php读取mysql的简单实例
2014/01/15 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
PHP 8新特性简介
2020/08/18 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
使用python求解二次规划的问题
2020/02/29 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
携程英文网站:Trip.com
2017/02/07 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
首次购房证明
2015/06/19 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
Python函数中apply、map、applymap的区别
2021/11/27 Python