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 相关文章推荐
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
vue实现单选和多选功能
Aug 11 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
小程序实现搜索框
Jun 19 Javascript
js实现带箭头的进度流程
Mar 26 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循环获取GET和POST值的代码
2008/04/09 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python中自定义函数的教程
2015/04/27 Python
python在不同层级目录import模块的方法
2016/01/31 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python实现广度优先搜索过程解析
2019/10/19 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
数学教育专业求职信
2014/07/22 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
三八节活动简报
2015/07/20 职场文书
作文之亲情600字
2019/09/23 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis