Bagaimana cara menggunakan perpustakaan UI untuk mengesan kembali dari nod terakhir data pokok ke nod akar dan label sambatan?

Jejak kembali ke nod akar dari hujung data pokok dan sambungkan label

Apabila memproses data struktur pokok, ia sering diperlukan untuk membalikkan jejak kembali ke nod akar berdasarkan maklumat nod peringkat terakhir dan menyambungkan semua label nod di jalan. Sebagai contoh, memandangkan data pokok berikut:

 const treedata = [
  {
    Label: "Node 1",
    Nilai: "1",
    Kanak -kanak: [
      {label: "node 1-1", nilai: "1-1"},
      {label: "nod 1-2", nilai: "1-2"},
    ],
  },
  {
    Label: "Node 2",
    Nilai: "2",
    kanak-kanak: [{label: "node 2-1", nilai: "2-1"}],
  },
];

Matlamatnya adalah untuk menyambungkan semua tag dari nod tersebut ke nod akar berdasarkan value nod peringkat terakhir (contohnya, "1-2"), dan hasil yang diharapkan adalah "nod 1/nod 1-2".

Traversal terbalik langsung tidak boleh dilaksanakan kerana struktur data hanya menyediakan jalan dari akar ke daun. Tetapi kita boleh menggunakan komponen pokok dan mekanisme acara mereka yang disediakan oleh perpustakaan UI seperti TDesign atau Element-UI.

Komponen berbentuk pokok perpustakaan ini biasanya menyediakan objek node yang mengandungi maklumat mengenai nod dan nod induk mereka apabila mereka mengklik. Kita boleh menggunakan maklumat ini untuk mengesan ke atas secara rekursif sehingga nod akar.

Dengan mengandaikan bahawa mengklik pada nod value "1-2", komponen pokok TDesign boleh mengembalikan objek node berikut:

 {
  Label: "Node 1-2",
  Nilai: "1-2",
  ibu bapa: {
    Label: "Node 1",
    Nilai: "1",
    Ibu bapa: null,
  },
}

Dengan objek ini, kita boleh mengakses harta parent secara rekursif sehingga parent adalah null (nod root). Dalam proses ini, sambung label setiap nod untuk mendapatkan laluan lengkap.

Berikut adalah fungsi JavaScript berdasarkan idea ini. Ia mengambil data pokok dan value sasaran sebagai input dan mengembalikan laluan label spliced:

 fungsi getPathLabel (Treedata, TargetValue) {
  fungsi melintasi (nod) {
    jika (node.value === TargetValue) {
      biarkan jalan = [];
      Biarkan CurrentNode = Node;
      sementara (currentNode) {
        path.unshift (currentNode.label); // Tambah label ke permulaan array currentNode = currentNode.parent;
      }
      kembali laluan.join ("/");
    }
    jika (node.children) {
      untuk (const child of node.children) {
        Const Result = Traverse (Child);
        jika (hasil) hasil pulangan;
      }
    }
    kembali null;
  }

  untuk (const node treedata) {
    Const Result = Traverse (Node);
    jika (hasil) hasil pulangan;
  }
  kembali null; // nilai sasaran tidak dijumpai}


const Path = getPathLabel (treedata, "1-2");
Console.log (Path); // output: nod 1/nod 1-2

Fungsi ini melintasi data pokok melalui carian mendalam-pertama, mendapati nod sasaran, dan rekursif melintasi ke atas dan memancarkan label. Harus diingat bahawa ini bergantung kepada struktur objek node yang disediakan oleh perpustakaan UI, dan pelaksanaan khusus mungkin berbeza dari perpustakaan ke perpustakaan. Ia perlu diselaraskan mengikut API Perpustakaan UI sebenar.

Atas ialah kandungan terperinci Bagaimana cara menggunakan perpustakaan UI untuk mengesan kembali dari nod terakhir data pokok ke nod akar dan label sambatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!