Anforderung Beschreibung
Produktzusatzseite, Sie müssen ein Automodell auswählen. Geben Sie ein Kindermodal auf dem zu verwendenden Bootstrap -Modal auf.
Insgesamt gibt es 4 Kataloge. Den Verzeichnisbaum verwenden.
Dann gibt es zwei Typen: Aktivität und Ware, und die Komponente muss durch Nicht-Transfer-Parameter aufgerufen werden.
Automodellmarken sollten Briefnavigation verwenden.
Technologie -Implementierung
Die Daten werden vom Backend an JSON übertragen, und wir erhalten Ajax und bedienen sie dann.
Da es mehr als Zehntausende von Total -Fahrzeugmodelldaten gibt, ist es unmöglich, sie gleichzeitig anzufordern. Hier verwenden wir eine asynchrone Methode, klicken Sie auf den Verzeichnisknoten und laden die nächste Stufe.
Hier verwenden wir zwei Parameter, um die unterschiedliche Belastung von Aktivitäten und Produkten zu steuern. _Showprice und geöffnet
Die erste aus dem Backend übertragene Datenstufe ist die Modellmarke, die die Felder mit dem Anfangsbuchstaben enthält. Die Initialisierung der Briefnavigation besteht darin, diese Daten mit dem FirstWord -Attribut zu sortieren und dann andere Elemente mit demselben Anfangsbuchstaben zu ignorieren.
Für den Aktivitätstyp muss die niedrigste Datenebene, die überprüft wird, zurückgegeben werden. (Tick Audi und Audi A6, und nur die Bedeutung von A6 wird zurückgegeben.) Hier wird eine vollständige 4-Schicht-Schleife verwendet. Es wird jedoch basierend darauf durchquert, ob es überprüft wird und die Geschwindigkeit nicht langsam ist.
/*** Erstellt von Nuenfeng am 2016/5/23. * Modellauswahlkomponente* Parameter:* showPrice, ob der Preis eingeben soll (es gibt Optionsboxen von der Marke, die den Preis nicht eingeben, und es gibt keine Auswahl. Alle Funktionen sind nicht ausgewählt)* Params -Objekt, die außerhalb von Outside teuret wurden geöffnet; showPrice; // Big Modal Box $ ('#ZC-Sub-Modal'). '<li id = "cb _"> <Pan> automatische Marke </span>'; Die Last ist erfolgreich.html (str); // $ ("#ressourceId"). find ("input [type = checkBox]"). Unbind (). Bind ("Click", function () {// if ($ (this) .is (': checked') == true) {// Wählen Sie alle oberen Knoten und select // // überlegen ausgewählt // $ (this) .Parents ("li"). $ (this) .find ("input [type = checkbox]: zuerst"). attr ("geprüft", true) //}); //}); // das übergeordnete Fenster scrollen, nachdem das untergeordnete Fenster $ ("#ZC-Sub-Modal"). On ("Hidden.bs.modal", function () {$ ('Body'). } Catree.prototype.eMpty = function () {opened = false; console.log ('leer mich'); } // Laden Sie die Untermenü var loadSubMenu = function (objid, carbandid, times) {requestparams.brandid = carbandid; executeajax (global.url.carbrandlist, requestparams, function (data) {// Daten in coquettish -Weise data.sort (keysrt ("FirstWord"); var musemenhtml = "<ul>"; für (var index in data) {var ms mseu = data [Index]; + Menü.CARBRANDID + '"Brand ="' + Menü '<span>' + Menü.Name + '</span>'; /> '; ist geladen, die Charakternavigation charnavarr = [] var fwdlast = ''; COBJTEMP.TARGED = 'CB _'+data [i] .Carbandid; } // Hier ist die Flirt -Array -Objektsortierung var keysrt = function (PropertyName) {return function (Object1, Object2) {var value1 = Object1 [PropertyName]; var value2 = Object2 [PropertyName]; if (value2 <value1) {return 1; } else if (value2> value1) {return -; } else {return; }}} // Speichern Sie das Ereignis var Save = function () {// Nach der Bestätigung die Rückruffunktion if (_showprice) {var res = getPriceresult (); if (res.status) {_callback (res.data); } else {alert (res.Error); zurückkehren; }} else {_callback (getNoPriceresult ()); } // Daten zurückgeben und $ ('#zc-sub-modal'). Modal ('hide'); } // Zeichennavigationsinitialisierung var initcharnav = function () {var charnavhtml = '<ul id = "charnavbar">'; für (var i in charnavarr) {charnavhtml+= '<li> <a href = "#'+charnavarr [i] .targetId+'">'+charnavarr [i] .Firstword+'</a> </li>'; } charnavhtml += '<li> <a> ↑ </a> </li>'; charnavhtml += '<button type = "button"> speichern </button>'; charnavhtml += '</ul>'; $ ('#zc-sub-modal'). append (charnavhtml); $ ('. modalgotop'). on ('click', function (e) {$ ('#zc-sub-modal'). Animate ({scrolltop:},);}); } // Statistik Die Rückgabedaten mit Preis var getPriceresult = function () {var result = {Status: true, data: [], Fehler: ''}; var litemp; var objtemp; $ ('. TreeView-Grau-Eingabe: Kontrollkästchen: Checked'). Jede (Funktion (i) {litemp = $ (this) .Parent ('li'); objtemp = {}; objtemp.carbrandid = litemp.attr ('value'); objtemp.brand = litemp.attr ('brandtr (' brandtr ('brandtr (' brandtr ('brandtr (' brandtr ('brandtr (' brandtr ('brandtr (' brandtr ('); litemp.find ('span'). text (); objtemp.CarbrandName + '! Rückgabeergebnis; } // Statistik Die Rückgabedaten ohne Preis var Getnopriceresult = function () {var result = []; var litemp; var objtemp; var flag1; var flag2; var flag3; var flag4; var LevelName; // Traverse 4 Layers $ ('#cb _'). Kinder (). Kinder ('li'). Kinder ('Eingabe: Kontrollkästchen'). Jede Funktion (i) {if ($ (this) .is (': geprüft') {flag = true;} else {Flag = false;} $ (this). {if ($ (this) .is (': checked') {flag = false; $ (this) .Parent (). Kinder (). Kinder ('li'). Kinder ('Input: Kontrollkästchen'). Jede (Funktion (i3) {if ($ ($ (this) .is (': checked') {flag1 = false; Flag2 = false; Flag3 = true;} else {flag3 = false;} false;} false;}; $ (this) .Parent (). Kinder (). Kinder ('li'). Kinder ('Input: Kontrollkästchen'). Jede (Funktion (i4) {if ($ ($ (this)) .is (': geprüft') {Flag1 = false; Flag2 = false; flag3 = false; fLAD; objtemp = {}; litemp.Children ('span'). text (); //objtemp.carbrandname = litemp.children ('span'). text (); $ (this) .Parent ('li'); objtemp.CarbrandName = objtemp.brand + '' + litemp.children ('span') litemp.attr ('value'); Rückgabeergebnis; } // Binden Sie das Klickenereignis $ (document) .on ('klick', '#resourceid li', function (e) {e.stoppropagation (); if ($ (this) .attr ('offen') {$ (this) .removeattr ('Open'; 'geöffnet'); // Ziehen Sie nicht nach unten, wenn Sie auf das Feld Multi-Check-Feld klicken. window.cartree = catree; } ());Aufrufmethode:
catree = new catree (false, {}, function (data) {console.log (data);});Das obige ist die relevante Kenntnis der detaillierten Erklärung des Codestrap -Implementierungsbaumverzeichniskomponentencodes, das Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!