• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jQuery动态生成不规则表格(前后端)

jQuery动态生成不规则表格(前后端)

作者:chengkui 字体:[增加 减小] 来源:互联网 时间:2017-05-11

chengkui通过本文主要向大家介绍了jquery动态生成表格,jquery动态添加表格,jquery动态创建表格,jquery动态添加表格行,jquery动态表格等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一、需求:有这么一张表

前四个属性当作联合主键

需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行。类似这种:

二、初解决:先上来把数据库的数据查询出来,以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;
  }
</div>

  然后就jQuery遍历map就好了

以上所述是小编给大家介绍的jQuery动态生成不规则表格(前后端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery实现动态生成表格并为行绑定单击变色动作的方法
  • 利用jQuery实现一个简单的表格上下翻页效果
  • jQuery动态生成不规则表格(前后端)
  • JQuery实现动态操作表格

相关文章

  • 2017-05-11bootstrap为水平排列的表单和内联表单设置可选的图标
  • 2017-05-11原生js实现放大镜特效
  • 2017-05-11js实现鼠标左右移动,图片也跟着移动效果
  • 2017-05-11Django1.7+JQuery+Ajax验证用户注册集成小例子
  • 2017-05-11jQuery动态生成不规则表格(前后端)
  • 2017-05-11javascript 面向对象function详解及实例代码
  • 2017-05-11原生JavaScript实现Tooltip浮动提示框特效
  • 2017-05-11详解Javascript百度地图接口开发文档中的类和方法
  • 2017-05-11jQuery实现限制文本框的输入长度
  • 2017-05-11JS中使用 after 伪类清除浮动实例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 基于JavaScript实现熔岩灯效果导航菜单
    • javascript基础知识之html5轮播图实例讲解(44)
    • 用jQuery实现可输入多选下拉组合框实例代码
    • jQuery使用正则表达式替换dom元素标签用法示例
    • JS仿JQuery选择器功能
    • jQuery插件zTree实现的基本树与节点获取操作示例
    • JavaScript中的toString()和toLocaleString()方法的区别
    • canvas实现流星雨的背景效果
    • 微信小程序实现图片轮播及文件上传
    • jQuery实现图片滑动效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有