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 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
js作用域及作用域链工作引擎
Jul 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
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
tensorflow的计算图总结
2020/01/12 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
C#公司笔试题
2014/03/28 面试题
中文系学生自荐信范文
2013/11/13 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
爱与责任演讲稿
2014/05/20 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
就业意向协议书
2015/01/29 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
Python基础之条件语句详解
2021/06/16 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技