Java递归遍历element-ui树节点

该博客主要介绍了如何使用Java实现递归遍历数据集,将查询到的数据库记录转换为树形结构。数据包含parent_code来标识父节点,area_type表示节点等级。通过getAllNodes()和getChildNodes()方法,将List<Trees>对象转换为树型结构,方便前端渲染。Trees对象包括id、parentCode、label、areaType和children属性。
摘要由CSDN通过智能技术生成

递归遍历树节点

返回的数据结构符合element次级下拉选和树形控件: 

 

数据库数据示例:parent_code指向父节点,area_type为节点等级

 

将查询到的结果集以List<Trees>格式查出调用getAllNodes()方法,Trees对象属性见下

    /**
     *
     * @param allList 将要遍历成树型结构的集合以Trees对象的形式传入
     * @return 返回封装好的List<Trees> 集合方便前端取出渲染
     */
    public static List<Trees> getAllNodes(List<Trees> allList) {
        List<Trees> parentList = new ArrayList<>();
        for (int i = 0; i < allList.size(); i++) {
            if("0".equals(allList.get(i).getParentCode())) {
                parentList.add(allList.get(i));
                allList.remove(i);
                i--;
            }
        }
        return getChildNodes(allList, parentList);
    }


    public static List<Trees> getChildNodes(List<Trees> allList, List<Trees> parentList) {
        for (int i = 0; i < parentList.size(); i++) {
            List<Trees> nodes = new ArrayList<>();
            for (int j = 0; j < allList.size(); j++) {
                if(parentList.get(i).getId().equals(allList.get(j).getParentCode())) {
                    nodes.add(allList.get(j));
                    allList.remove(j);
                    j--;
                }
            }
            if(nodes.size() > 0) {
                parentList.get(i).setChildren(nodes);
                getChildNodes(allList, nodes);
            }
        }
        return parentList;
    }

Trees对象结构

    // 编码
    private String id;

    // 父节点code
    private String parentCode;

    // 当前节点名称
    private String label;

    // 区域节点类型|节点等级
    private String areaType;

    // 子节点
    private List<Trees> children;

el-tree 是基于 Element UI 实现的形组件,你可以通过以下方式实现遍历到最后一层并且每个节点都加上 `disabled` 属性: 1. 首先,你需要获取 el-tree 的根节点。 2. 然后,你可以使用递归的方式遍历形结构,对于每个节点,都添加 `disabled` 属性。 3. 最后,你需要调用 el-tree 的 `updateKeyChildren` 方法来更新节点状态,使其生效。 以下是示例代码: ```javascript // 获取 el-tree 的根节点 const root = this.$refs.tree.store.rootNode; // 遍历形结构 function traverse(node) { if (!node) { return; } // 如果节点没有子节点,说明是最后一层节点,添加 disabled 属性 if (!node.childNodes || node.childNodes.length === 0) { node.data.disabled = true; } // 遍历节点 if (node.childNodes) { node.childNodes.forEach(childNode => traverse(childNode)); } } // 遍历节点 traverse(root); // 更新节点状态 this.$refs.tree.store.updateKeyChildren(root.key, root.childNodes); ``` 在这个示例代码中,我们首先通过 `this.$refs.tree.store.rootNode` 获取了 el-tree 的根节点。然后,我们定义了 `traverse` 函数,使用递归的方式遍历形结构,对于每个节点,都添加 `disabled` 属性。最后,我们调用了 `this.$refs.tree.store.updateKeyChildren` 方法来更新节点状态,使其生效。 请注意,`updateKeyChildren` 方法需要传入根节点的 `key` 和子节点数组,因此我们需要使用 `root.key` 和 `root.childNodes` 来调用该方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值