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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
Vue渲染函数详解
Sep 15 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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开发负载均衡指南
2010/07/17 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
10条PHP编程习惯
2014/05/26 面试题
Linux的主要特性
2014/10/06 面试题
电话客服专员岗位职责
2014/06/28 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
小石潭记导游词
2015/02/03 职场文书
商超业务员岗位职责
2015/02/13 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
竞选稿之小学班干部
2019/10/31 职场文书