Saya sering mengalami masalah dengan struktur pohon, seperti menampilkan struktur direktori.
Dalam kebanyakan kasus, latar belakang akan mengembalikan data tersebut, sebagai berikut:
[{ id: 19, pid: 0, name: 'nodejs' },{ id: 20, pid: 19, name: 'express' },{ id: 21, pid: 19, name: 'mongodb' },{ id: 60, pid: 20, name: 'ejs' },{ id: 59, pid: 0, name: 'front-end development' },{ id: 70, pid: 59, Nama: 'JavaScript'}, {id: 71, pid: 59, nama: 'css'}, {id: 72, pid: 59, name: 'html'}, {id: 73, pid: 59, nama: 'Bootstrap'}, {id: 61, pid: 0. 59, name: 'Bootstrap'}, {id: 61, pid: 0 61, Nama: 'Desain Web'},]Struktur data ini mudah diproses di latar belakang, tetapi meja depan sulit diproses. Anda perlu mengubahnya menjadi data JSON pohon terlebih dahulu, sebagai berikut:
[{id: 19, pid: 0, nama: 'nodeJs', anak-anak: [{{id: 20, pid: 19, name: 'express', anak-anak: [{id: 60, pid: 20, nama: 'ejs'}]}, {id: 21, pid: 19, nama: 'Mongodb'}}, {Id: 21, name: 'MongoDB'}} {{Id: 09, {ID: 09, {ID: 09, {ID: PID: 5, {id: 70, pid: 59, name: 'javascript'}, {id: 71, pid: 59, name: 'css'}, {id: 72, pid: 59, name: 'html'}, {id: 73, pid: 59, nama: 'bootstrap'}}}, 61, pid: 59, name: 'bootstrap'}}}, 61, pid: 59, nama: 'bootstrap'}}}, 61, pid: 59, name: 'bootstrap'}}}, 61, pid: 59, name: 'bootstrap'}}} {61, 61, {61} {ID: 59, 59, 59 {ID: 59, 59, Design ', Children: [{ID: 63, PID: 61, Nama:' Desain Web '}]},]Ini membuatnya sangat nyaman untuk menggunakan secara rekursif untuk membangun komponen berbentuk pohon.
Yang terbaik adalah jika latar belakang dapat secara langsung mengembalikan struktur ini, jika tidak meja depan perlu melakukan konversi.
1. Konversi data struktur array daftar menjadi struktur pohon json
// Daftar ke pohon jsonFunction listToTree (daftar, pid) {var ret = []; // array sementara untuk (var i dalam daftar) {if (daftar [i] .pid == pid) {// jika ID induk dari item saat ini sama dengan ID induk yang akan dicari, daftar rekursif [i] .Children = ListToTer. ret.push (daftar [i]); // simpan item saat ini di array sementara}} return ret; // kembalikan hasilnya setelah rekursi sudah lebih dari} var tree = listTotree (daftar, 0); // panggil fungsi, lewati array daftar untuk dikonversi, dan pidconsole.log (pohon);2. Hasilkan kotak drop-down berdasarkan data struktur pohon JSON
// Tambahkan wadah kotak drop-down di halaman web <pilih id = "selectbox" name = ""> </ pilih> // js skrip, secara rekursif menghasilkan // dapatkan objek container var selectbox = document.geteLementById ("selectbox"); // menu drop-down spanning var j = "-"; // Simbol awalan digunakan untuk menampilkan hubungan orang tua-child. Simbol lain dapat digunakan di sini fungsi createselecttree (d) {var option = ""; untuk (var i = 0; i <d.length; i ++) {if (d [i] .children.length) {// Jika ada opsi subset+= "<nilai opsi = '"+d [i] .id+">"+j+d [i] .name+"</option>"; j+= "-"; // Tambahkan simbol opsi simbol awalan+= createSelecttree (d [i] .Children); // Subset secara rekursif j. value = '"+d [i] .id+"'> "+j+d [i] .name+" </tipt> "; }} opsi pengembalian; // Kembalikan hasil html akhir} // Memanggil fungsi dan memasuki dan keluar dari struktur ke dalam wadah drop-down container selectbox.innerhtml = createSelecttree (pohon);Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik ringkasan efek kotak drop-down jQuery dan ringkasan efek kotak drop-down JavaScript untuk dipelajari.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.