如何从树中删除项目

Question

我正在尝试删除节点，输入图层，但我会发疯... AGHHH !!

我正在使用一棵树。使用react的组件（rc-tree）。有两种类型的项目：文件夹和图层。

我想在删除文件夹时删除所有项目，当项目是图层，不同的文件夹时，我可以调用其他方法从地图中删除图层。

parent是我放入文件夹中的图层时添加的属性。

这是我树的一个例​​子：

这是我的代码：

removeNodes = (desiredNode) => {
    var parent;
    if (desiredNode.parent === undefined && desiredNode.children) {
        console.log('1');
    } else if (desiredNode.parent !== undefined && desiredNode.children) {
        console.log('2', desiredNode);
    }
    else if (desiredNode.parent !== undefined && !desiredNode.children) {
        console.log('3');
        parent = getNodeByKey(desiredNode.parent, this.treeData);
        parent.children.forEach( (node, index) => {
            if (node.key.localeCompare(desiredNode.key) === 0) {
                if (parent.children[index].type.localeCompare('folder') !== 0) {
                    console.log('remove layer with keyName: ', parent.children[index].keyName);
                }
                parent.children.splice(index, 1);
                this.removeTrashCheckedKeys();
            }
        });
        delete parent.children;
    } 
    else {
        console.log('4')
        var pos = this.treeData.indexOf(desiredNode);
        if (this.treeData[pos].type.localeCompare('folder') !== 0) {
            console.log('remove layer with keyName: ', this.treeData[pos].keyName);
        }
        this.treeData.splice(pos, 1);
        this.removeTrashCheckedKeys();
    }
}

编辑：这是一个更好的实现的想法，但现在我必须管理树有子项时，我必须找到层调用方法removeLayerWithName(tree.keyName);来删除地图中添加的图层。

removeNodes = (tree) => {
    if (tree.children) {
        tree.children.forEach( (node, index) => {
            this.removeNodes(node);
        });
    } else {
        var parent = getNodeByKey(tree.parent, this.treeData);
        if (parent.children) {
            parent.children.forEach( (node, index) => {
                if (node.key.localeCompare(tree.key) === 0) {
                    if (tree.type.localeCompare('folder') !== 0) {
                        // this.removeLayerWithName(tree.keyName);
                        console.log('remove layer with keyName: ', tree.keyName)
                    }
                    parent.children.splice(index,1);
                }
            });
            if (parent.children.length === 0) {
                delete parent.children;
            }
        } else {
            var pos = this.treeData.indexOf(tree);
            if (tree.type.localeCompare('folder') !== 0) {
                // this.removeLayerWithName(tree.keyName);
                console.log('remove layer with keyName: ', tree.keyName);
            }
            this.treeData.splice(pos, 1);
        }
    }
    this.removeTrashCheckedKeys();
}

Answer 1

我在这里做了一个疯狂的猜测，但delete parent.children;是否完全擦除你的收藏，因此对它的任何绑定都会失败？

你修改那个集合，然后删除它，看起来很奇怪。

Answer 2

解决方案：

onDelete = (event, key) => {
    if (!window.confirm('Do you want remove it?')) {
        return;
    } else {
        var node = getNodeByKey(key, this.treeData);
        this.removeNodes(node);
        this.setState({ treeData: this.treeData }, () => {
            var parent = getNodeByKey(node.parent, this.treeData);
            delete parent.children;
            this.props.parentTree(this.treeData);
        });
    }
    this.orderFiles();
    event.stopPropagation();
};

removeNodes = (tree) => {
    if (tree.children) {
        tree.children.forEach( (node, index) => {
            if (!node.children) {
                if (node.type.localeCompare('folder') !== 0) {
                    this.removeLayerWithName(node);
                    var parent = getNodeByKey(node.parent, this.treeData);
                    parent.children.splice(index,1);
                    if (parent.children.length > 0) {
                        this.removeNodes(parent);
                    }
                }
            } else {
                this.removeNodes(node);
            }
        });
    } else {
        var parent = getNodeByKey(tree.parent, this.treeData);
        if (parent.children) {
            parent.children.forEach( (node, index) => {
                if (node.key.localeCompare(tree.key) === 0) {                       
                    if (tree.type.localeCompare('folder') !== 0) {
                        this.removeLayerWithName(tree);
                    }
                    parent.children.splice(index,1);
                }
            });
            if (parent.children.length === 0) {                   
                delete parent.children;
            }
        } else {
            var pos = this.treeData.indexOf(tree);
            if (tree.type.localeCompare('folder') !== 0) {
                this.removeLayerWithName(tree);
            }
            this.treeData.splice(pos, 1);
        }
    }
    this.removeTrashCheckedKeys();
}

更好的实施：

onDelete = (event, key) => {
    if (!window.confirm('¿Estás seguro de eliminarlo?')) {
        return;
    } else {
        var node = getNodeByKey(key, this.treeData);
        this.removeNodes(node);
        this.setState({ treeData: this.treeData }, () => {
            this.props.parentTree(this.treeData);
        });
    }
    this.orderFiles();
    event.stopPropagation();
};

removeNodes = (tree) => {

    this.layersInTree = [];
    this.findLayersInTree(tree);
    if (!tree.parent) {
        delete tree.children;
        var pos = this.treeData.indexOf(tree);
        this.treeData.splice(pos, 1);
    } else {
        var parentNode = getNodeByKey(tree.parent, this.treeData);
        delete parentNode.children;
    }
}

findLayersInTree = (tree) => {
    if (tree.children) {
        tree.children.forEach( (node, index) => {
            if (!node.children && node.type.localeCompare('folder') !== 0 ) {
                this.removeLayerWithName(node); 
            } else {
                this.findLayersInTree(node);
            } 
        });
    } else {
        if (tree.type.localeCompare('folder') !== 0) {
            this.removeLayerWithName(tree);
        }
    }
}

removeLayerWithName = (nodeLayer) => {
    var nodeLayerKeyName = String(nodeLayer.keyName);
    this.map.getLayers().forEach( (layer) => {
        if (layer !== undefined) {
            var layerKeyName = String(layer.getProperties().keyName);
            if (layerKeyName.localeCompare(nodeLayerKeyName) === 0) {
                this.map.removeLayer(layer);
            }
        }
    });
}