การใช้กล่องแบบเลื่อนลงของต้นไม้ตาม JavaScript

ฉันมักจะพบปัญหาเกี่ยวกับโครงสร้างต้นไม้เช่นการแสดงโครงสร้างไดเรกทอรี

ในกรณีส่วนใหญ่พื้นหลังจะส่งคืนข้อมูลดังกล่าวดังนี้:

 [{id: 19, pid: 0, ชื่อ: 'nodejs'}, {id: 20, pid: 19, ชื่อ: 'express'}, {id: 21, pid: 19, ชื่อ: 'mongoDb'}, {id: 60, pid: 20, ชื่อ: 'ejs'} 59, ชื่อ: 'javascript'}, {id: 71, pid: 59, ชื่อ: 'css'}, {id: 72, pid: 59, ชื่อ: 'html'}, {id: 73, pid: 59, ชื่อ: 'bootstrap' 61, ชื่อ: 'การออกแบบเว็บ'},]

โครงสร้างข้อมูลนี้ง่ายต่อการประมวลผลในพื้นหลัง แต่แผนกต้อนรับนั้นยากที่จะประมวลผล คุณต้องแปลงเป็นข้อมูล Tree JSON ก่อนดังนี้:

 [{id: 19, pid: 0, ชื่อ: 'nodejs', เด็ก: [{id: 20, pid: 19, ชื่อ: 'ด่วน', เด็ก: [{id: 60, pid: 20, ชื่อ: 'ejs'}}, {id: 21, pid: 19, ชื่อ: 'mongoDb'} {id: 70, pid: 59, ชื่อ: 'javascript'}, {id: 71, pid: 59, ชื่อ: 'css'}, {id: 72, pid: 59, ชื่อ: 'html'}, {id: 73, pid: 59, ชื่อ: 'bootstrap' การออกแบบ ', เด็ก: [{id: 63, pid: 61, ชื่อ:' การออกแบบเว็บ '}]},]

สิ่งนี้ทำให้สะดวกมากในการใช้ซ้ำเพื่อสร้างส่วนประกอบรูปต้นไม้

เป็นการดีที่สุดถ้าพื้นหลังสามารถส่งคืนโครงสร้างนี้โดยตรงไม่เช่นนั้นแผนกต้อนรับจะต้องทำการแปลง

1. แปลงข้อมูลของโครงสร้างอาร์เรย์รายการเป็นโครงสร้างต้นไม้ json

 // รายการไปยัง tree jsonfunction listtotree (list, pid) {var ret = []; // อาร์เรย์ชั่วคราวสำหรับ (var i ในรายการ) {ถ้า (รายการ [i] .pid == pid) {// ถ้ารหัสหลักของรายการปัจจุบันเท่ากับรายการ ret.push (รายการ [i]); // บันทึกรายการปัจจุบันในอาร์เรย์ชั่วคราว}} return ret; // ส่งคืนผลลัพธ์หลังจากการเรียกซ้ำมากกว่า} tree var = listtotree (รายการ, 0); // เรียกฟังก์ชั่นส่งผ่านรายการอาร์เรย์ที่จะถูกแปลงและ pidconsole.log

2. สร้างกล่องแบบเลื่อนลงตามข้อมูลโครงสร้างต้นไม้ JSON

 // เพิ่มคอนเทนเนอร์แบบเลื่อนลงในเว็บเพจ <select id = "selectbox" name = ""> </select> // js สคริปต์, สร้างซ้ำ // รับวัตถุคอนเทนเนอร์ var selectbox = document.getElementById ("selectbox"); สัญลักษณ์อื่น ๆ สามารถใช้งานได้ที่นี่ฟังก์ชั่น createselectree (d) {var oppect = ""; สำหรับ (var i = 0; i <d.length; i ++) {ถ้า (d [i] .children.length) {// ถ้ามีตัวเลือกชุดย่อย+= "<ตัวเลือกค่า = '"+d [i] .id+">"+j+d [i] j+= "-"; // เพิ่มสัญลักษณ์ของตัวเลือกสัญลักษณ์คำนำหน้า+= creatselectree (d [i] .children); // เรียกชุดย่อย j = j.slice (0, j.length-1); // ทุกครั้ง value = '"+d [i] .id+"'> "+j+d [i] .name+" </petion> "; }} return Option; // ส่งคืนผลลัพธ์ HTML สุดท้าย} // การเรียกใช้ฟังก์ชั่นและการป้อนและออกจากโครงสร้างลงในคอนเทนเนอร์แบบดรอปดาวน์คอนเทนเนอร์ selecbox.innerhtml = creatlectTree (ต้นไม้);

หากคุณยังต้องการเรียนรู้ในเชิงลึกคุณสามารถคลิกที่สรุปเอฟเฟกต์แบบดรอปดาวน์ JQuery และสรุปเอฟเฟกต์แบบดรอปดาวน์ JavaScript เพื่อเรียนรู้

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น