Saya butuh bantuan tentang cara menghapus item dari TreeView (ini adalah proyek Vue.js), TreeView dibangun berdasarkan elemen seperti itu:

[
    {
        "id": 1,
        "name": "COMERCIALIZAÇÃO",
        "idp": "",
        "children": [
            {
                "id": 5,
                "name": "Pasta 1",
                "idp": 1,
                "children": [
                    {
                        "id": 6,
                        "name": "Pasta 1 2",
                        "idp": 5,
                        "children": [
                            {
                                "id": 7,
                                "name": "NO.FT.DRC.01.00.001.pdf",
                                "file": "pdf",
                                "idp": 6
                            },
                            {
                                "id": 8,
                                "name": "PR.FT.DRC.01.00.003.pdf",
                                "file": "pdf",
                                "idp": 6
                            }
                        ]
                    },
                    {
                        "id": 9,
                        "name": "imprimir p luiza.pdf",
                        "file": "pdf",
                        "idp": 5
                    },
                    {
                        "id": 66,
                        "name": "Pasta 1 3",
                        "idp": 5,
                        "children": [
                            {
                                "id": 77,
                                "name": "NO.FT.DRC.01.00.001.pdf",
                                "file": "pdf",
                                "idp": 66
                            },
                            {
                                "id": 88,
                                "name": "PR.FT.DRC.01.00.003.pdf",
                                "file": "pdf",
                                "idp": 66
                            }
                        ]
                    }
                ]
            },
            {
                "id": 10,
                "name": "Backend.docx",
                "file": "pdf",
                "idp": 1
            },
            {
                "id": 0,
                "name": "DT.DC.RPI.03.03.1235_V2.docx",
                "file": "pdf",
                "idp": 1
            }
        ]
    },
    {
        "id": 2,
        "name": "DISTRIBUIÇÃO",
        "idp": "",
        "children": [
            {
                "id": 11,
                "name": "Pasta 2",
                "idp": 2,
                "children": [
                    {
                        "id": 12,
                        "name": "pasta 2 1",
                        "idp": 11,
                        "children": [
                            {
                                "id": 13,
                                "name": "script.sql",
                                "file": "pdf",
                                "idp": 12
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "id": 3,
        "name": "GERAÇÃO",
        "idp": "",
        "children": [
            {
                "id": 14,
                "name": "Pasta 3",
                "idp": 3
            }
        ]
    },
    {
        "id": 4,
        "name": "SERVIÇOS",
        "idp": "",
        "children": [
            {
                "id": 5,
                "name": "teste",
                "idp": 4
            }
        ]
    }
]

Saya tidak yakin, tetapi saya pikir cara terbaik untuk menggambarkan elemen itu adalah: array array mutidimensional, bukan?

Saya telah membuat CodePen untuk menunjukkan yang paling dekat yang saya dapatkan saat menggunakan rekursi, tetapi tentu saja milik saya bukan solusi terbaik karena tidak berfungsi pada setiap penghapusan. Lihat kode saya: https://codepen.io/luizarusso/pen/zYxLOPb ?editor=1010

for (let i = 0; i < items.length; i++) {
    if (items[i].id == item.id) {
        //se achou o cara que vai ser removido, chama a função de remover
        return this.removeItem(i);
    } else {
        if (items[i].children) {
            if (items[i].idp == "") {
                this.caminho = [];
            }
            this.caminho.push(i);
            this.delFile(item, items[i].children);
        } else {
            if (items.length == 1 + i) {
                this.caminho.pop();
            }
        }
    }
}

Ada ide? Jangan ragu untuk mengoptimalkan kode saya langsung di CodePen jika Anda mau :)

EDIT: Hanya untuk memperjelas, masalah saya di sini adalah tentang cara menghapus elemen dengan id. Ketika pengguna mengklik ikon bin, saya tahu elemen apa yang perlu saya hapus, tetapi saya tidak tahu bagaimana cara melepaskannya dari array. Peta, Filter, dan fungsi JS asli lainnya tidak dapat melakukan itu pada array array/JSON, jadi saya berpikir tentang menggunakan rekursif atau sesuatu yang lain untuk membuatnya berfungsi.

0
LuízaRusso 14 Januari 2020, 14:11

2 jawaban

Jawaban Terbaik

Masalahnya adalah di mana saya menempatkan this.caminho.pop()

Saya hanya harus melakukan itu di "lain" dari kondisi yang membandingkan id item saat ini dengan id item yang saya cari.

delFile(item, items) {
    for (let i = 0; i < items.length; i++) {
        if (items[i].id == item.id) {
            //if the current item has the same id as the item I'm looking for
            //it means I found the guy and I call the function to remove it
            return this.removeItem(i);
        } else {
            //otherwise, I keep on searching
            if (items[i].children) {
                //if the item on the actual index have children, I'll search among them
                if (items[i].idp == "") {
                    //if the items doesn't have a parent, I clean the "caminho" (path) var. That var traces the route till the item I'm looking for
                    this.caminho = [];
                }
                //I push the index to the var that traces the route
                this.caminho.push(i);
                //I call the function back again, now with the child items
                this.delFile(item, items[i].children);
            }
            if (items.length == 1 + i) {
                //if the item's lenght has been completely coursed, I pop the index out of the var that holds the route, because at this point I know the item I'm looking for is not among them
                this.caminho.pop()
            }
        }
    }
},

Inilah solusinya: https://codepen.io/luizarusso/pen/zYxLOPb Bekerja dengan tampilan pohon dengan kedalaman apa pun

0
LuízaRusso 17 Januari 2020, 14:39

Anda perlu melihat objek, bukan hanya array. Biarkan saya merekomendasikan contoh perpustakaan. https://github.com/leezng/vue-json-pretty.

Jika pertanyaan Anda tentang iterasi dan proses array multidimensi, saya pikir Anda harus bertanya tentang javascript dan/atau tag algoritma. Saya harap jawaban ini akan membantu Anda.

0
isik_hi 14 Januari 2020, 11:40