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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
微信公众号H5支付接口调用方法
Jan 10 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php中session退出登陆问题
2014/02/27 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
使用Apache的rewrite
2021/03/09 Servers
javascript中typeof的使用示例
2013/12/19 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python 上下文管理器使用方法小结
2017/10/10 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
Python grpc超时机制代码示例
2020/09/14 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
经济担保书范文
2014/04/02 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
环保专项行动方案
2014/05/12 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
Go语言编译原理之源码调试
2022/08/05 Golang