Element的el-tree控件后台数据结构的生成以及方法的抽取

2020-06-16 06:50:21易采站长站整理

最近用到了el-tree控件,主要是数据的格式,按照官网的数据格式来就可以显示节点的树形结构了。
代码参考很多

这里给出一个比较好的链接:https://www.jb51.net/article/181990.htm

代码说明在注释里写的很详细了已经,这里不再叙述说明。至于为什么抽取成这种格式的数据,那是因为ElementUI-tree规定的数据格式,你想要用这个控件,就必须按照他们规定的这个格式 来。
数据格式如下:

Controller代码


@RequestMapping("/cateList")
@ResponseBody
public List<TbCategory> cateList() {

// 整体思路:
// 1、取得所有数据、放入集合List1 (tbCategories)
// 2、将List1所有数据都放入到map(treeMap)中:元素id为键,元素本身对象为值
// 3、取得顶层节点放入集合List2中(resultList)
// 4、遍历List1中的所有数据,通过数据的parentId为键在map中取值
// 1)如果能取到,则说明该元素有父节点
// 1、判断该父节点下的childList中是否有已经子节点
// 1、若无:则创建一个集合,将子节点放入
// 2、若有:则直接将子节点放入即可
// 5、把放好的数据放回到map中
// 6、返回List2(resultList)

// 注意:整个过程将所有数据取出放入list2(resultList),返回的也是 //list2

List<TbCategory> tbCategories = categoryService.cateList();

List<TbCategory> resultList = new ArrayList<TbCategory>(); // 存贮顶层的数据

Map<Object ,Object> treeMap = new HashMap();
Object itemTree;

for(int i = 0;i<tbCategories.size() && !tbCategories.isEmpty();i++){
itemTree = tbCategories.get(i);
treeMap.put(tbCategories.get(i).getNodeId(),tbCategories.get(i));// 把所有的数据都放到map中

}

// 这里也可以用另一种方法,就是拿到集合里的每个元素的父id去数据库中查询,但是,这样与数据库的交互次数就太多了
// 遍历map得到顶层节点(游离节点也算作顶层节点)
for(int i =0;i<tbCategories.size();i++){
// 优点1:整个方法,只查询了一次数据库
// 优点2:不用知道顶层节点的id
if(!treeMap.containsKey(tbCategories.get(i).getParentId())){
// 我们在存储的时候就是将元素的id为键,元素本身为值存入的
// 以元素的父id为键,在map里取值,若取不到则,对应的元素不存在,即没有父节点,为顶层节点或游离节点
// 将顶层节点放入list集合
resultList.add(tbCategories.get(i));
}
}

// 循环数据,将数据放到该节点的父节点的children属性中