<_el-tree 数据结构">
当前位置:   article > 正文

ElementUI 树型组件 el-tree 后台数据结构构建_el-tree 数据结构

el-tree 数据结构

前言

Vue+ElementUI 是目前项目开发中普遍使用的前端技术,我们在开发中肯定会遇到用树形展示数据的需求,比如公司和部门,公司下面有多个部门,部门下面又有多个班组,每个部门或者班组下有相关人员,此时我们就可以使用ElementUI 的 tree 组件来实现,前端根据官网上的例子,需要的数据是这样的:

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

效果是这样的:
在这里插入图片描述
接下来就是后台去构建这样结构的数据,然后提供接口给前端了。


本篇文章的例子最终实现的效果是这样的:
在这里插入图片描述
后台返回的数据是这样的:

{
    "msg":"操作成功",
    "code":200,
    "data":[
        {
            "id":1,
            "label":"停电性质",
            "children":[
                {
                    "id":2,
                    "label":"故障停电",
                    "children":[
                        {
                            "id":6,
                            "label":"短路"
                        }
                    ]
                },
                {
                    "id":3,
                    "label":"预安排停电"
                },
                {
                    "id":4,
                    "label":"临时停电"
                },
                {
                    "id":5,
                    "label":"限电",
                    "children":[
                        {
                            "id":24,
                            "label":"测试"
                        }
                    ]
                }
            ]
        }
    ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

一、数据库表结构设计

create table SYS_NATURE_TREE
(
  nature_tree_id   NUMBER not null,
  nature_tree_name VARCHAR2(50),
  parent_id        NUMBER,
  parent_ids       VARCHAR2(50),
  show_order       NUMBER,
  enable_flag	   NUMBER
)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

其中 nature_tree_id 是主键、nature_tree_name 就是我们要展示的树节点的名称了,parent_id 是当前节点的父级,parent_ids 是当前节点的所有父级,用‘,’隔开。

二、具体实现

1. entity

SYS_NATURE_TREE 对应的实体类:

public class NatureTree {

    private Integer natureTreeId;

    private String natureTreeCode;

    private String natureTreeName;

    private Integer parentId;

    private String parentIds;

    private Integer showOrder;

	private Integer enableFlag;

	/** 子节点 List 集合 */
    private List<NatureTree> children;

	/** 构造器、get set 方法等省略了 **/
	...
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

实体类里加了子节点的 List 集合字段

2. controller

代码如下:

	@GetMapping("/blackoutNatureTreeSelect")
    public BaseApiService blackoutNatureTreeSelect(NatureTree natureTree)
    {
        // 先查出来 SYS_NATURE_TREE 表中的所有数据
        List<NatureTree> natureTrees = blackoutNatureService.selectNatureTreeList(natureTree);
        // 返回构建好的数据
        return BaseApiService .success(blackoutNatureService.buildNatureTreeSelect(natureTrees));
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

思路是先将 sys_nature_tree 表中的数据全部查出来,然后作为参数传入构建数据结构的方法 buildNatureTreeSelect。重点是这个 service 方法 buildNatureTreeSelect

3. service

代码如下:

	@Override
    public List<TreeSelect> buildNatureTreeSelect(List<NatureTree> natureTrees)
    {
        List<NatureTree> listNatureTrees = buildNatureTree(natureTrees);
        return listNatureTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
	@Override
    public List<NatureTree> buildNatureTree(List<NatureTree> natureTrees) {
    	// 初步处理好的数据
        List<NatureTree> returnList = new ArrayList<NatureTree>(); 
        // 所有树 treeId 的 List 集合
        List<Integer> tempList = new ArrayList<Integer>(); 
        for (NatureTree natureTree : natureTrees)
        {
            tempList.add(natureTree.getNatureTreeId());
        }
        // 遍历所有树节点(一个树节点就是数据库中的一条数据)
        for (Iterator<NatureTree> iterator = natureTrees.iterator(); iterator.hasNext();)
        {
            NatureTree natureTree = (NatureTree) iterator.next();
            // 如果是顶级节点, 遍历该父节点的所有子节点
            if (!tempList.contains(natureTree.getParentId()))
            {
            	// 递归处理数据,此处传入的 natureTree 是最顶级节点,没有父节点
                recursionFn(natureTrees, natureTree);
                returnList.add(natureTree);
            }
        }
        if (returnList.isEmpty())
        {
            returnList = natureTrees;
        }
        return returnList;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
	/**
     * 递归列表
     */
    private void recursionFn(List<NatureTree> list, NatureTree t)
    {
        // 获取此节点的子节点列表
        List<NatureTree> childList = getChildList(list, t);
        // 将子节点 List set 进去
        t.setChildren(childList);
        for (NatureTree tChild : childList)
        {
            if (hasChild(list, tChild))
            {
                // 判断是否有子节点
                Iterator<NatureTree> it = childList.iterator();
                while (it.hasNext())
                {
                    NatureTree n = (NatureTree) it.next();
                    // 递归
                    recursionFn(list, n);
                }
            }
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
	/**
     * 获取子节点列表
     */
    private List<NatureTree> getChildList(List<NatureTree> list, NatureTree t)
    {
        List<NatureTree> tlist = new ArrayList<NatureTree>();
        Iterator<NatureTree> it = list.iterator();
        while (it.hasNext())
        {
            NatureTree n = (NatureTree) it.next();
            if (StringUtils.isNotNull(n.getParentId()) && n.getParentId().intValue() == t.getNatureTreeId().intValue())
            {
                tlist.add(n);
            }
        }
        return tlist;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
/**
     * 判断是否有子节点
     */
    private boolean hasChild(List<NatureTree> list, NatureTree t)
    {
        return getChildList(list, t).size() > 0 ? true : false;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
// 经过 buildNatureTree 处理过的 listNatureTrees 中的 NatureTree,children 属性就都有数据了
List<NatureTree> listNatureTrees = buildNatureTree(natureTrees);
// 然后就是将 listNatureTrees 处理成最终格式的数据
listNatureTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
  • 1
  • 2
  • 3
  • 4

TreeSelect 类

/**
 * Treeselect树结构实体类
 * 
 * @author wangpsh
 */
public class TreeSelect implements Serializable
{
    private static final long serialVersionUID = 1L;

    /** 节点ID */
    private Long id;

    /** 节点名称 */
    private String label;

    /** 子节点 */
    @JsonInclude(JsonInclude.Include.NON_EMPTY)
    private List<TreeSelect> children;

    public TreeSelect()
    {

    }

    public TreeSelect(NatureTree natureTree)
    {
        this.id = (long) natureTree.getNatureTreeId();
        this.label = natureTree.getNatureTreeName();
        this.children = natureTree.getChildren().stream().map(TreeSelect::new).collect(Collectors.toList());
    }

    public Long getId()
    {
        return id;
    }

    public void setId(Long id)
    {
        this.id = id;
    }

    public String getLabel()
    {
        return label;
    }

    public void setLabel(String label)
    {
        this.label = label;
    }

    public List<TreeSelect> getChildren()
    {
        return children;
    }

    public void setChildren(List<TreeSelect> children)
    {
        this.children = children;
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

上面贴出了最主要的代码,用到了 java 8 的 stream 流。至此,我们的数据结构就构建完成了

4. 数据初始化

数据库中初始化一些数据,其中的停电性质就是顶级节点
在这里插入图片描述

三、总结

以上树结构的数据是提前在数据库中初始化好的,下一篇会探讨树节点增删改的问题,这个相对来说就比较简单了。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/119241
推荐阅读
相关标签
  

闽ICP备14008679号