如何在Angular UI Tree的树形数组中通过递归函数选中父节点

实现方案 #

你需要修改TreeDirective.js中node指令的控制器逻辑，新增父节点状态同步逻辑即可满足需求，核心修改点是在原有子节点勾选逻辑之后，新增向上递归校验父节点所有子节点勾选状态的逻辑。

修改后的TreeDirective.js的node指令控制器代码如下：

controller: ["$scope", function ($scope) {
    // 切换子节点可见性
    $scope.toggleVisibility = function (node) {
        if (node.children) {
            node.childrenVisibility = !node.childrenVisibility;
        }
    };
    // 节点勾选逻辑
    $scope.checkNode = function (node) {
        node.checked = !node.checked;
        // 向下递归更新所有子节点勾选状态
        function checkChildren(c) {
            angular.forEach(c.children, function (child) {
                child.checked = c.checked;
                // 绑定父节点引用，方便向上遍历
                child.parent = c;
                checkChildren(child);
            });
        }
        checkChildren(node);
        // 向上递归更新所有父节点勾选状态
        function checkParent(parentNode) {
            if (!parentNode) return;
            let allChecked = true;
            angular.forEach(parentNode.children, function(child) {
                if (!child.checked) {
                    allChecked = false;
                }
            });
            parentNode.checked = allChecked;
            checkParent(parentNode.parent);
        }
        checkParent(node.parent);
    };
}]

逻辑说明：

• 勾选/取消勾选节点时，先向下递归更新所有子节点的勾选状态，同时给每个子节点绑定父节点引用，用于后续向上遍历
• 子节点状态更新完成后，向上递归遍历所有父节点，校验父节点下的所有子节点是否全部处于勾选状态，自动同步父节点的勾选状态
• 该逻辑同时支持两种场景：勾选父节点自动全选子节点、全选子节点自动勾选父节点，取消任意一个子节点勾选时父节点也会同步取消勾选

内容的提问来源于stack exchange，提问作者jyoti