【爱吃肉的阿C】纵向分页的设计与实现

文章描述了一种实现纵向分页效果的后台处理方法。首先确定数据格式,然后通过遍历和比较数据列表,动态构建HashMap存储结构,确保每个特征的数据能正确对应。在处理过程中,通过判断现有HashMap的大小来决定是否需要创建新的Map,以避免空指针异常。最终,该方法成功实现了预期的分页展示效果,并强调了前端在呈现此类复杂布局中的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求描述

不同于平时的分页横向展示,这次的需求所要呈现的效果为纵向分页,如下图。需要将需求涉及到的特征横向多列展示,一列为一个特征下的多个数据。
需求展示

实现思路

跟前端同事讨论过后,把数据格式确定好,如下图展示。
纵向分页数据格式

代码贴图

简单说一下我自己的思路,拿到列表后,先把表头筛选出来。col字段就可以确定了,之后再确认data中的值。data可以理解为是一个hashmap的list,其中每一个hashmap都是以key:id,value:值的关系。打比方来说,如果有两组数据,第一组是id为1,数据分别为A、B。第二组id为2,数据为C和D,因为数据格式已经定好了,最后呈现的结果一定是,{1:A,2 : C },或者是{1:A,2:D}。所以我们不妨循环1时,在空的list中,先把id为1的全部插入进去,再把id为2的加到id为1的map中,这样在后续如果有id为3的情况发生时,可以先对前者进行一个判断,如果id为3的数据有4条,也可以新增新的map,不会造成空指针的情况。这样是最简单的办法。(在我的理解中)

		//最后展示的列表
		ArrayList<HashMap> hashMaps = new ArrayList<>();
		//collect中是要转换的数据 Long 是表头的id 后面的list 是展示的数据
		Iterator<Map.Entry<Long, List<VsfRebackAnalyse>>> it = collect.entrySet().iterator();
        while(it.hasNext()){
            Map.Entry<Long, List<VsfRebackAnalyse>> next = it.next();
            if (hashMaps.size() == 0){
                //如果返回的集合不是空,那么就是第一次循环
                //第一次循环是我们在上面时说到的,将id为1的数据全部插入到list中,
                List<VsfRebackAnalyse> analyses = collect.get(next.getKey());
                for (VsfRebackAnalyse analyse : analyses){
                    HashMap<Long, Object> longObjectHashMap = new HashMap<>();
                    longObjectHashMap.put(next.getKey(),analyse.getRunData());
                    hashMaps.add(longObjectHashMap);
                }
            }else{
                //如果size不为空 说明是第二次插入,我们需要把当前要插入的数据和已经插入的数据做对比,要插入id为2的数据前,先要判断id为1的数据数量是否小于。
                List<VsfRebackAnalyse> analyses = collect.get(next.getKey());
                //如果小于或等于,说明我们不需要额外生成新的map来储存id为2的数据
                if (analyses.size() <= hashMaps.size()){
                    for (int i = 0 ; i < analyses.size() ; i ++){
                        hashMaps.get(i).put(next.getKey(),analyses.get(i).getRunData());
                    }
                }
                //如果大于,说明存在空值。我们需要新建新的map来储存id为2的数据
                if (analyses.size() > hashMaps.size()){
                    //如果大于则说明上一个变量的值将在这里置为空
                    int value = analyses.size() - hashMaps.size();
                    for (int i = 0 ; i < hashMaps.size() ; i ++){
                        hashMaps.get(i).put(next.getKey(),analyses.get(i).getRunData());
                    }
                    for (int i = value ; i < analyses.size() ; i ++){
                        HashMap<Long, Object> longObjectHashMap = new HashMap<>();
                        longObjectHashMap.put(next.getKey(),analyses.get(i).getRunData());
                        hashMaps.add(longObjectHashMap);
                    }
                }
            }

        }

实现效果

对比于产品原型图,总体还是实现了当前的需求,再次感叹,一个优秀前端的重要性!实现效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值