تنفيذ صندوق منسد شجرة على أساس جافا سكريبت

غالبًا ما أواجه مشاكل مع هياكل الأشجار ، مثل عرض هياكل الدليل.

في معظم الحالات ، ستعود الخلفية هذه البيانات ، على النحو التالي:

 [{{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: ' 59 ، الاسم: 'javaScript'} ، {id: 71 ، pid: 59 ، الاسم: 'css'} ، {id: 72 ، pid: 59 ، الاسم: 'html'} ، {id: 73 ، pid: 59 ، الاسم: 'bootstrap'} ، {id: 61 ، pid: 61 ، الاسم: "تصميم الويب"} ،]

من السهل معالجة بنية البيانات هذه في الخلفية ، ولكن من الصعب معالجة مكتب الاستقبال. تحتاج إلى تحويله إلى بيانات شجرة JSON أولاً ، على النحو التالي:

 [{id: 19 ، pid: 0 ، الاسم: 'nodejs' ، الأطفال: [{id: 20 ، pid: 19 ، الاسم: 'Express' ، الأطفال: [{id: 60 ، pid: 20 ، الاسم: 'ejs'}}} ، {id: 21 ، pid: 19 ، name: 'mongodb'}]} ، {id: 59 ، pid: 0 ، {id: 70 ، pid: 59 ، الاسم: 'javaScript'} ، {id: 71 ، pid: 59 ، الاسم: 'css'} ، {id: 72 ، pid: 59 ، name: 'html'} ، {id: 73 ، pid: 59 ، name: 'boottrap'}] التصميم '، الأطفال: [{id: 63 ، pid: 61 ، الاسم:' Web Design '}]} ،]

هذا يجعل من المريح للغاية استخدام متكرر لبناء مكونات على شكل شجرة.

من الأفضل أن تتمكن الخلفية من إرجاع هذا الهيكل مباشرة ، وإلا يحتاج مكتب الاستقبال إلى إجراء تحويل.

1. تحويل بيانات بنية صفيف القائمة إلى بنية شجرة json

 // قائمة بـ tree jsonfunction listtotree (قائمة ، pid) {var ret = [] ؛ // مجموعة مؤقتة لـ (var i in list) {if (list [i] .pid == pid) {// id in the puter of the puter the pare the ide te te the te the the the the the the the served [i] ret.push (قائمة [i]) ؛ // احفظ العنصر الحالي في الصفيف المؤقت}} return ret ؛ // إرجاع النتيجة بعد أن تكون العودة أكثر من شجرة var = listtotree (قائمة ، 0) ؛

2. إنشاء مربعات منسدلة على أساس بيانات بنية الشجرة JSON

 // أضف حاوية مربع القائمة المنسدلة في صفحة الويب <حدد ID = "selectbox" name = "" "> </select> // JS Script ، قم بإنشاء // Get Container Object selectbox = document.getElementByID (" SelectBox ") ؛ // تمتد شجرة القائمة المنسدلة var j ="- يمكن استخدام الرموز الأخرى هنا CreateSelectTree (d) {var orpion = "" ؛ لـ (var i = 0 ؛ i <d.length ؛ i ++) {if (d [i] .Children.length) {// إذا كان هناك خيار مجموعة فرعية+= "<ortive value = '"+d [i] .id+"'>"+j+d [i] J+= "-" ؛ // أضف رمزًا لخيار رمز البادئة+= CreateSeSelectTree (d [i]. value = '"+d [i] .id+"'> "+j+d [i] .Name+" </potion> "؛ }} خيار الإرجاع ؛ // إرجاع نتيجة HTML النهائية} // استدعاء الوظيفة والإدخال والخروج من الهيكل في حاوية مربع المنسدلة selectbox.innerhtml = createSelectTree (شجرة) ؛

إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر فوق ملخص تأثير مربع JQuery وملخص تأثير مربع JavaScript للتعلم.

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.