คำอธิบายข้อกำหนด
หน้าเพิ่มผลิตภัณฑ์คุณต้องเลือกรุ่นรถยนต์ ปรากฏขึ้นเป็นโมดัลเด็กบน Bootstrap Modal เพื่อใช้
มีแคตตาล็อกทั้งหมด 4 ระดับ เพื่อใช้ต้นไม้ไดเรกทอรี
จากนั้นมีสองประเภท: กิจกรรมและสินค้าโภคภัณฑ์และส่วนประกอบจะต้องถูกเรียกโดยพารามิเตอร์ที่ไม่ใช่การถ่ายโอน
แบรนด์รุ่นรถยนต์ควรใช้การนำทางจดหมาย
การใช้เทคโนโลยี
ข้อมูลจะถูกส่งไปยัง JSON โดยแบ็กเอนด์และเราได้รับ Ajax แล้วใช้งาน
เนื่องจากมีข้อมูลรุ่นยานพาหนะทั้งหมดมากกว่าหมื่นรายการจึงเป็นไปไม่ได้ที่จะขอมันในครั้งเดียว ที่นี่เราใช้วิธีการแบบอะซิงโครนัสแต่ละครั้งคลิกที่โหนดไดเรกทอรีและโหลดระดับถัดไป
ที่นี่เราใช้พารามิเตอร์สองตัวเพื่อควบคุมการโหลดกิจกรรมและผลิตภัณฑ์ที่แตกต่างกัน _showPrice และเปิด
ระดับแรกของข้อมูลที่ส่งจากแบ็กเอนด์คือแบรนด์โมเดลซึ่งมีฟิลด์ที่มีตัวอักษรเริ่มต้น การเริ่มต้นของการนำทางจดหมายคือการเรียงลำดับข้อมูลนี้ด้วยแอตทริบิวต์คำแรกจากนั้นละเว้นองค์ประกอบอื่น ๆ ด้วยตัวอักษรเริ่มต้นเดียวกัน
สำหรับประเภทกิจกรรมระดับข้อมูลต่ำสุดที่ต้องตรวจสอบจะต้องส่งคืน (ติ๊ก Audi และ Audi A6 และมีเพียงความหมายของ A6 เท่านั้นที่ถูกส่งคืน) จะใช้วง 4 ชั้นเต็มที่นี่ อย่างไรก็ตามมันถูกสำรวจโดยขึ้นอยู่กับว่ามีการตรวจสอบหรือไม่และความเร็วไม่ช้า
/*** สร้างโดย Nuenfeng เมื่อวันที่ 2016/5/23 * ส่วนประกอบการเลือกแบบจำลอง* พารามิเตอร์:* showprice ไม่ว่าจะป้อนราคา (มีกล่องตัวเลือกจากแบรนด์ที่ไม่ป้อนราคาและไม่มีการเลือกฟังก์ชันทั้งหมด)* วัตถุพารามิเตอร์ที่ส่งออกไปด้านนอก เปิดตัว; _callback = การโทรกลับ; Modal Box $ ('#ZC-SUB-MODAL') ADDCLASS ("BS-Example-Modal-LG"); id = "cb _"> <span> การเลือกแบรนด์อัตโนมัติ </span> '; ประสบความสำเร็จ html (str); // $ ("#resourceId") ค้นหา ("อินพุต [type = boxbox]"). unbind (). bind ("คลิก", function () {// ถ้า ($ (นี้). is (': ตรวจสอบ') == จริง) {// เลือกโหนดด้านบนทั้งหมด $ (นี่) .find ("อินพุต [ประเภท = ช่องทำเครื่องหมาย]: ครั้งแรก"). attr ("ตรวจสอบ", จริง) //}); - // ให้การเลื่อนหน้าต่างพาเรนต์หลังจากซ่อนหน้าต่างลูก $ ("#ZC-SUB-MODAL") บน ("hidden.bs.modal", function () {$ ('body'). addclass ('modal-open')}); } cartree.prototype.empty = function () {open = false; console.log ('ว่างฉัน'); } // โหลด submenu var loadsubmenu = function (objid, carbrandid, times) {requestparams.brandid = carbrandid; Executeajax (global.url.carbrandlist, requestparams, ฟังก์ชั่น (ข้อมูล) {// ข้อมูลการสั่งซื้อในรูปแบบ coquettish data.sort (keysrt ("คำแรก")); var menuhtml = "<ul>" สำหรับ (ดัชนี var ในข้อมูล) value = " + menu.carbrandid + '" brand = "' + menu.brand + '">'; '<span>' + เมนูชื่อ + '</span>'; menuhtml + = '<pan>' + เมนู name + '</span>'} menuhtml + = "</li>"; เริ่มต้นการนำทาง charnavarr = []; = 'cb _'+ข้อมูล [i] .carbrandid; } // นี่คือการจัดเรียงอาร์เรย์อาร์เรย์การเรียงลำดับ var keysrt = function (propertyName) {return function (Object1, Object2) {var value1 = Object1 [PropertyName]; var value2 = object2 [propertyName]; if (value2 <ค่า 1) {return 1; } อื่นถ้า (value2> value1) {return -; } else {return; }}} // บันทึกเหตุการณ์ var save = function () {// หลังจากการยืนยันให้ดำเนินการฟังก์ชันการโทรกลับถ้า (_showPrice) {var res = getPricerEsult (); if (res.status) {_callback (res.data); } else {Alert (res.error); กลับ; }} else {_callback (getNopriceresult ()); } // ส่งคืนข้อมูลและซ่อน $ ('#zc-sub-modal'). modal ('ซ่อน'); } // ตั้งค่าการกำหนดค่าเริ่มต้นอักขระ var initcharnav = function () {var charnavhtml = '<ul id = "charnavbar">'; สำหรับ (var i ใน charnavarr) {charnavhtml+= '<li> <a href = "#'+charnavarr [i] .targetid+'">'+charnavarr [i] .firstword+'</a> </li>'; } charnavhtml += '<li> <a> ↑ </a> </li>'; charnavhtml += '<button type = "ปุ่ม"> บันทึก </button>'; charnavhtml += '</ul>'; $ ('#ZC-SUB-MODAL') ผนวก (charnavhtml); $ ('. modalgotop'). on ('คลิก', ฟังก์ชั่น (e) {$ ('#zc-sub-modal'). animate ({scrolltop:},);}); } // สถิติข้อมูลการส่งคืนด้วยราคา var getPricerEsult = function () {var result = {สถานะ: จริง, ข้อมูล: [], ข้อผิดพลาด: ''}; var litemp; var objtemp; $ ('. อินพุต treeview-gray: ช่องทำเครื่องหมาย: ตรวจสอบ'). แต่ละ (ฟังก์ชั่น (i) {litemp = $ (นี่) .parent ('li'); objtemp = {}; objtemp.carbrandid = litemp.attr ('value'); objtemp.brand = litemp.attr litemp.find ('span'). text (); objtemp.carbrandname + '! ผลการกลับมา; } // สถิติข้อมูลการส่งคืนโดยไม่มีราคา var getNopriceresult = function () {var result = []; var litemp; var objtemp; var flag1; var flag2; var flag3; var flag4; var levelname; // traverse 4 layers $ ('#cb _') เด็ก (). เด็ก ๆ ('li'). เด็ก ๆ ('อินพุต: ช่องทำเครื่องหมาย') แต่ละ (ฟังก์ชั่น (i) {ถ้า ($ (นี้). is (': ตรวจสอบ') {flag = true; {ถ้า $ (นี่). is (': ตรวจสอบ')) {flag = false; $ (นี่) .parent (). เด็ก ๆ (). เด็ก ๆ ('li') เด็ก ('อินพุต: ช่องทำเครื่องหมาย'). แต่ละ (ฟังก์ชั่น (i3) {ถ้า ($ (นี่). is (': ตรวจสอบ')) {flag1 = false; flag2 = false; $ (นี่) .parent (). เด็ก ๆ (). เด็ก ๆ ('li') เด็ก ('อินพุต: ช่องทำเครื่องหมาย'). แต่ละ (ฟังก์ชั่น (i4) {ถ้า ($ (นี้). is (': ตรวจสอบ')) {flag1 = false; flag2 = false; flag3 = false; flag; objtemp = {}; ; //objtemp.carbrandname = litemp.children ('span'). text (); $ (นี้) .parent ('li'); objtemp.carbrandname = objtemp.brand + '' + litemp.children ('span'). text (); litemp.attr ('ค่า'); ผลการกลับมา; } // ผูกเหตุการณ์คลิก $ (เอกสาร) .on ('คลิก', '#ResourceId li', ฟังก์ชั่น (e) {E.StopPropagation (); ถ้า ($ (นี่) .attr ('เปิด')) {$ (นี่) $ (นี้). เด็ก ('ul'). show (); // อย่าดึงลงเมื่อคลิกหลายกล่องตรวจสอบ ('คลิก', 'อินพุต [type = "ช่องทำเครื่องหมาย"]', ฟังก์ชั่น (e) {e.stoppropagation ();}); window.cartree = Cartree; -วิธีการโทร:
Cartree = ใหม่ Cartree (false, {}, ฟังก์ชั่น (ข้อมูล) {console.log (data);});ข้างต้นเป็นความรู้ที่เกี่ยวข้องของคำอธิบายโดยละเอียดของรหัสองค์ประกอบการใช้งาน Bootstrap Tree Directory Code ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!