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

需求描述

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

实现思路

跟前端同事讨论过后，把数据格式确定好，如下图展示。

代码贴图

简单说一下我自己的思路，拿到列表后，先把表头筛选出来。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);
                    }
                }
            }

        }

实现效果

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