造treeNode数据

造treeNode数据

一、原因

在使用elemntui的级联选择器时，它需要的数据是这样的

options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }] 

而一般我们数据库查出来的数据是一个数组，是这个样子的

[Goods(id=1, name=苹果, type=水果), Goods(id=2, name=香蕉, type=水果), Goods(id=3, name=橘子, type=水果), Goods(id=4, name=娃娃菜, type=蔬菜), Goods(id=5, name=大白菜, type=蔬菜)]

数据不匹配，这要怎么做？

二、解决

主要是要学会分析，他要的是什么样的数据结构，我就给他什么数据结构。

这里是要按类型划分，类型下面就是具体的名字，比如

上面这个数据，在前台的显示是

水果------苹果

​ ------香蕉

​ ------橘子

蔬菜------娃娃菜

​ ------大白菜

要呈现这个样子。。。

从这里就可以发现，前面是一个类型，后面是一个数组，对应着各种该类型下的实例

思路：使用一个map key存放类型 value存放实际类型所对应的具体实物

代码如下

实体类

package com.sugar.domain;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Options {

    private Long id;

    private String value;

    private String label;

    private List<Options> children;

    public Options(Long id, String value) {
        this.id = id;
        this.value = value;
    }
}


package com.sugar.domain;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Goods {

    private Long id;

    private String name;

    private String type;
}

测试类

package com.sugar.test;

import com.sugar.domain.Goods;
import com.sugar.domain.Options;

import java.util.*;

public class TestTreeNode {

    public static void main(String[] args) {
        List<Goods> goodsList = new ArrayList<>();
        goodsList.add(new Goods(1L,"苹果","水果"));
        goodsList.add(new Goods(2L,"香蕉","水果"));
        goodsList.add(new Goods(3L,"橘子","水果"));
        goodsList.add(new Goods(4L,"娃娃菜","蔬菜"));
        goodsList.add(new Goods(5L,"大白菜","蔬菜"));
        System.out.println(goodsList);

        List<Options> optionsList = generateTreeNode(goodsList);
        System.out.println(optionsList);
    }

    private static List<Options> generateTreeNode(List<Goods> goodsList) {
        List<Options> optionsList = new ArrayList<>(); //返回的
        HashMap<String,List<Options>> mapping = new HashMap<>();
        for (Goods goods : goodsList) {
            if(mapping.containsKey(goods.getType())){
                Options options = new Options();
                options.setId(goods.getId());
                options.setValue(goods.getName());
                mapping.get(goods.getType()).add(options);
            }else{
                List<Options> list = new ArrayList<>();
                Options options = new Options();
                options.setId(goods.getId());
                options.setValue(goods.getName());
                list.add(options);
                mapping.put(goods.getType(),list);
            }
        }
        mapping.forEach((type,data)->{
            Options options = new Options();
            options.setValue(type);
            options.setChildren(data);
            optionsList.add(options);
        });
        return optionsList;
    }
}

输出结果

这样前端就可解析，显示

结果：
[Options(id=null, value=蔬菜, label=null, children=[Options(id=4, value=娃娃菜, label=null, children=null), Options(id=5, value=大白菜, label=null, children=null)]), Options(id=null, value=水果, label=null, children=[Options(id=1, value=苹果, label=null, children=null), Options(id=2, value=香蕉, label=null, children=null), Options(id=3, value=橘子, label=null, children=null)])]
原始数据：
[Goods(id=1, name=苹果, type=水果), Goods(id=2, name=香蕉, type=水果), Goods(id=3, name=橘子, type=水果), Goods(id=4, name=娃娃菜, type=蔬菜), Goods(id=5, name=大白菜, type=蔬菜)]

PS

就这个需求，我搞了一下午都没搞出来，只依稀记得以前RBAC模型时，菜单的加载使用过树类型转化，但那个有一个pid，跟我这个又不一样，写了好久，还是没有写出来，这还是后面回到住处，仔细思考，才想出来可以这样做，可能我适合一个安静的环境吧，哈哈！！！

还是对数据结构了解的不够呀，这是我目前想出来的比较好的解决办法。还有更好的，只能等我以后慢慢发现学习，暂时先应付过去。。。