Question

当用户删除文件时，我试图在JSTree中重新创建文件夹结构。假设用户删除文件路径为“ A \ B \ X.X”和“ A \ C \ Y.Y”的文件，我想在jstree中创建名称分别为A，B和C的节点。

到目前为止，如果节点不存在，我可以添加它们。如果该节点存在，则无法找到现有节点。在上面的示例中，我可以为A和B创建节点。但是第二次找不到节点“ A”。

下面是我到目前为止编写的代码。

 var folderList = path.split("/");
for (var i = 0; i < folderList.length - 1; i++) { //-1 to remove the file name from the folder name list
    var existingNodeID = '';
    //Check if node already exists
    var childrens = $("#js-tree").jstree("get_children_dom", parent);
    for (var j = 0; j < childrens.length; j++) {
        if (childrens[j].innerText == folderList[i]) {
            existingNodeID = childrens[j].id;
        }
    }
    //if node exists, select it as parent for the next loop
    if (!(existingNodeID === '')) {
        $('#js-tree').jstree().select_node(existingNodeID);
        parent = $("#js-tree").jstree('get_selected', true)[0].original;
    }
    else {
        //create a new node if there is no existing one
        var newNode = {
            id: generateUUID(),
            text: folderList[i],
            state: "open"
        };
        //Add node to jstree
        var sel = $("#js-tree").jstree().create_node(parent, newNode);
        //Select this node as parent for the next loop.
        parent = newNode.id;
    }

我基本上是在拆分文件路径并为每个条目创建节点。在所有文件的另一个循环中调用此代码。

for (var i = 0; i < files.length; i++) {
        //Add folder to JS Tree if it is not added
        createTreeNodeFromFilePath(files[i].fullPath, parent);
}

parent是树中的根节点。下面是查找现有同级的代码。

var childrens = $("#js-tree").jstree("get_children_dom", parent);
        for (var j = 0; j < childrens.length; j++) {
            if (childrens[j].innerText == folderList[i]) {
                existingNodeID = childrens[j].id;
            }
        }

显然，这永远找不到任何兄弟姐妹。说，我已经有一个节点“ A”，并且我有“ A”的父代的ID，那么此代码应该能够使我获得节点“ A”的ID。

编辑：

更新了代码。以下是快速的TL; DR。

如果节点“ A”具有子节点“ B”和“ C”，我想遍历那些“ A”子节点并根据名称选择节点。

Answer 1

最后提出了一个警告。

//get list of all children of current parent node. returns an array of ids. 
    var childrens = $("#js-tree").jstree("get_node", parent).children_d;
    //check if childrens exist
    if (childrens) {
        //loop through the children list to find the existing child node with same name
        for (var j = 0; j < childrens.length; j++) {
            if ($("#js-tree").jstree("get_node", childrens[j]).text == folderList[i]) {
                existingNodeID = childrens[j];
            }
        }

children_d给了我所有子节点的ID列表。然后在循环内部，我再次使用get_node来获取实际的节点引用。这工作正常，并允许我遍历所有子节点以查看它们是否存在。该问题的其余代码未更改。

现在警告。该children_d属性也返回子节点的所有子节点。因此，如果我有1 \ 2 \ 3 \ 4作为树，则节点1的children_d将返回[2,3,4]。基本上，不仅是子节点，它遍历整个子树，就像在子节点的子节点中一样。

这不是一个大问题，因为它只是不必要的循环。但是，如果文件夹中有一个同名的文件夹，那么我会创建额外的节点。因此，1 \ 2 \ 1 \ x.x有效。但是1 \ 1 \ 2 \ 1 \ x.x将不起作用。

无论如何，这是一个完全不同的问题，我现在可以推迟。

以编程方式在JSTree中创建文件夹结构

1 个答案: