jQuery动态生成不规则表格前后端
一、需求:有这么一张表

前四个属性当作联合主键
需要把该表所有的行在前端以表格形式显示出来,要求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;
}
然后就jQuery遍历map就好了
四、总结:不会要多问
jQuery动态生成不规则表格前后端的更多相关文章
- jQuery动态生成Bootstrap表格
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- jQuery动态生成<select>下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...
- Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库
利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值 并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...
- Jquery解析Json字符串,并且动态生成数据表格Table
//ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...
- jquery 动态生成html后click事件不触发原因
转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<spa ...
- 毕业设计---jQuery动态生成的a标签的事件绑定
这几天在毕业设计的前端设计阶段,准备放弃使用jsp,完全通过html+ajax+SSH进行网站的编写,在前端的页面显示我准备使用jQuery来实现数据的动态绑定.但是遇到动态添加的a标签无法直接通过$ ...
- jquery动态生成html代码绑定事件
今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...
- jquery动态生成二维码添加自定义logo
动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...
- VUE动态生成table表格(element-ui)(新增/删除)
(直接复制即可测试) 结构(红色部分 data/prop/v-model 数据绑定): <template> <el-table size="small" :da ...
随机推荐
- stm32 DMA数据搬运 [操作寄存器+库函数](转)
源:stm32 DMA数据搬运 [操作寄存器+库函数] DMA(Direct Memory Access)常译为“存储器直接存取”.早在Intel的8086平台上就有了DMA应用了. ...
- Maven项目中pom文件分析
pom英文全称: project object model 1.概述 pom.xml文件描述了maven项目的基本信息,比如groupId,artifactId,version等.也可以对maven项 ...
- SQLite高级:一库建多表,封装类
package eoe.database; import android.content.Context; import android.database.sqlite.SQLiteDatabase; ...
- access 随机选取数据
access随机读取数时 用order by rnd(id) 发现每次获取的数据顺序都是一致的,必须要加上随机数才可以,如下: Random r = new Random(); ...
- Iphone安装铃声
PP助手 应用列表中打开铃声多多文档. 5点击铃声下载,找到下载的铃声,按下图所示步骤导出至电脑. 6在PP助手界面内,找到"视频音乐"标签,然后进入视频音乐分类下的铃声分类,点击 ...
- gridview属性
1.列头充满:AutoSizeColumnsMode, Fill. 2.列内容居中:ColumnHeadersDefaultCellStyle, MiddleCenter. 3.行内容居中:RowsD ...
- Mybatis中常见的SQL DML
1.sql select 查询 <select id="query" resultType="CfCurrbusilogEntity" > sele ...
- APP IM 之 XMPP和Jabber及选择方案
1. 概述 IM ,InstantMessaging,即时通信. 现在,市面上有一批提供即时通信功能的公司.如:全时.云之讯(IM无语音和视频).容联云通讯(支持点对点音视频,按照消息的存储空间收费) ...
- iOS 之 二维码生成与扫描(LBXScan)
参考:https://github.com/MxABC/LBXScan 步骤如下: 1. 下载 通过参考网址进行下载. 2. 导入 导入整个LBXScan文件夹 3. 配置 在pch中加入 #impo ...
- 译者序(Core Data 应用开发实践指南)
Core Data 是数据管理框架. 该书用Grocery Dude 购物管理程序来贯穿整个学习过程. 本书共分三个部分: 前7章为基础篇.从基础知识.迁移方式及扩展方式来讲解托管对象模型.怎么用图形 ...