Description des exigences
Page d'addition de produit, vous devez sélectionner un modèle de voiture. Faites apparaître un enfant modal sur le modal bootstrap à utiliser.
Il y a 4 niveaux de catalogues au total. Pour utiliser l'arbre d'annuaire.
Ensuite, il existe deux types: l'activité et la marchandise, et le composant doit être appelé par des paramètres non transférés.
Les marques de modèles de voitures doivent utiliser la navigation par lettres.
Mise en œuvre de la technologie
Les données sont transmises à JSON par le backend, et nous obtenons Ajax puis les faisons fonctionner.
Puisqu'il y a plus de dizaines de milliers de données totales sur les modèles de véhicules, il est impossible de le demander à la fois. Ici, nous utilisons une méthode asynchrone, chacune cliquez sur le nœud du répertoire et chargez son niveau suivant.
Ici, nous utilisons deux paramètres pour contrôler la charge différente des activités et des produits. _showprice et ouvert
Le premier niveau de données transmis par le backend est la marque modèle, qui a les champs avec la lettre initiale. L'initialisation de la navigation sur les lettres consiste à trier ces données avec l'attribut Firstword, puis à ignorer d'autres éléments avec la même lettre initiale.
Pour le type d'activité, le niveau de données le plus bas qui est vérifié doit être retourné. (Cochez Audi et Audi A6, et seule la signification de A6 est retournée), une boucle complète de 4 couches est utilisée ici. Cependant, il est traversé selon qu'il est vérifié, et la vitesse n'est pas lente.
/ ** * Créé par NuenFeng le 2016/5/23. * Composant de sélection de modèle * Paramètres: * ShowPrice s'il faut saisir le prix (il existe des boîtes d'options de la marque qui n'entrent pas le prix, et il n'y a pas de sélection toutes les fonctions) * Params objet passé à l'extérieur * Fonction de rappel * / (fonction () {var uricarbrand = global.url.carbrandlist; // var uri = uricarbrand.url; Fonction de rappel VarAd; ShowPrice; _Callback = Callback; // Définit la grande boîte modale $ ('# zc-sub-modal'). AddClass ("bs-exemple-modal-lg"); id = "CB _"> <pan> Sélection de la marque Auto </span> '; réussi.html (str); $ ('# zc-sub-mod'). Modal ({clavier: false, show: true}); // $ ("# ResourceID"). Rechercher ("Input [Type = Checkbox]"). Unstind (). bind ("click", function () {// if ($ (this) .is (': checked') == true) {// sélectionnez tous les nœuds supérieurs et select // // superrior sélectionné // $ (this) .parents ("li"). chaque (fonction (fonction) {// $ (this) .find ("input [type = checkbox]: d'abord"). att ("vérifié", true) //}); } //}); // Gardez la fenêtre parent à faire défiler après avoir caché la fenêtre de l'enfant $ ("# zc-sub-modal"). On ("Hidden.bs.modal", function () {$ ('body'). AddClass ('modal-open')}); } Cartree.prototype.empty = function () {opened = false; console.log («Me vide»); } // Chargez le sous-menu Var LoadSubMenu = fonction (objid, carbrandid, fois) {requestParams.brandid = carbrandid; Executeajax (global.url.carbrandlist, requestParams, fonction (data) {// commander des données de manière coquette data.sort (keysrt ("premierword")); var menuhtml = "<ul>"; for (var index in data) {var menu = data [index]; menuhtml + = '<li id = "cb_' + menu.carbrand. Menu.Carbrandid + '"Brand ="' + menu.brand + '">'; // arborescence avec prix if (_showprice) {// dernier niveau, ajoutez la boîte d'option if (menu.level> 3) {menuhtml + = '<entrée type =" Checkbox "name =" Resourceids "Value ="' + Menu.Carbrandid + '"/>';; Menu.name + '</ span>'; + '<span>' + menu.name + '</ span>';} menuhtml + "</li>"; Navigation Charnavarr = []; 'cb _' + data [i] .carbrandid; Charnavarr.push (cobjtemp); } // voici le tri de flirt objet Tri var keysrt = function (propriétéName) {return function (object1, object2) {var value1 = object1 [propriétéName]; var value2 = object2 [propriétéName]; if (value2 <value1) {return 1; } else if (value2> value1) {return -; } else {return; }}} // Enregistrer l'événement var sauf = function () {// Après confirmation, exécutez la fonction de rappel if (_showPrice) {var res = getPriceResult (); if (res.status) {_Callback (res.data); } else {alert (res.error); retour; }} else {_Callback (getNoPriceResult ()); } // retourne les données et masquer $ ('# zc-sub-modal'). Modal ('masquer'); } // Définir l'initialisation de navigation des caractères var initchAnV = function () {var charnavhtml = '<ul id = "charnavbar">'; for (var i in Charnavarr) {Charnavhtml + = '<li> <a href = "#' + charnavarr [i] .targetId + '">' + charnavarr [i] .firstword + '</a> </li>'; } charnavhtml + = '<li> <a> ↑ </a> </li>'; charnavhtml + = '<bouton type = "Button"> Enregistrer </fontificateur>'; charnavhtml + = '</ul>'; $ ('# zc-sub-modal'). APPEND (charnavhtml); $ ('. Modalgotop'). sur ('cliquez', fonction (e) {$ ('# zc-sub-modal'). animate ({scrolltop:},);}); } // Statistiques Les données de retour avec le prix var getPriceResult = fonction () {var result = {status: true, data: [], error: ''}; var litemp; var objTemp; $ ('. TreeView-Gray Entrée: BOID BOX: VÉROCIÉ'). Chaque (fonction (i) {litemp = $ (this) .parent ('li'); objTemp = {}; objtemp.carbrandId = litemp.attr ('value'); objtemp.carrand = litemp.attr ('brand'); objTemp.carbrand = litemp.find ('span'). text (); objTemp.carbrandName + '! Résultat de retour; } // Statistiques Les données de retour sans prix var getNopriceResult = function () {var result = []; var litemp; var objTemp; var flag1; var flag2; var flag3; var Flag4; var niveauName; // Traverse 4 couches $ ('# cb _'). enfants (). enfants ('li'). enfants ('entrée: checkbox'). Chaque (fonction (i) {if ($ (ceci) .is (': vérifié')) {flag = true;} else {Flag = false;} $ (this) .parent (). {if (this) .is (': checked')) {Flag = false; $ (this) .parent (). Enfants (). Enfants ('li'). enfants ('input: checkbox'). Chaque (fonction (i3) {if ($ (this) .is (': checked')) {flag1 = false; flag2 = false; flag3 = true;} else {flag3 = false;} $ (this) .parent (). Enfants (). Enfants ('li'). Enfants ('Entrée: Checkbox'). Chaque (fonction (i4) {if ($ (this) .is (': vérifié')) {Flag1 = false; Flag2 = faux; Flag3 = false; Flag4 = True;} else). Objtemp = {}; litemp.children (Span '). Text (); //objtemp.carbrandName = litemp.children ('span'). text (); $ (this) .parent ('li'); objtemp.carbrandName = objTemp.brand + '' + litemp.children ('span'). Text (); litemp.attr ('value'); Résultat de retour; } // lier l'événement de clic $ (document) .on ('cliquez', '#resourceid li', fonction (e) {e.stoppropagation (); if ($ (this) .attr ('open')) {$ (this) .removeattr ('open'); $ (this) .children ('ul'). Hide ();} else {$ (this). $ (ceci) .children (ul '). // Ne pas extraire lorsque vous cliquez sur le Box Multi-Check.on ('Click', 'Input [Type = "Checkbox"]', fonction (e) {e.stoppropagation ();}); window.cartree = cartree; } ());Méthode d'appel:
cartree = new CARTREE (false, {}, fonction (data) {console.log (data);});Ce qui précède est la connaissance pertinente de l'explication détaillée du code composant du répertoire d'arbre d'implémentation bootstrap qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!