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 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
Terran历史背景
2020/03/14 星际争霸
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python去除所有html标签的方法
2015/05/05 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
Servlet方面面试题
2016/09/28 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书