Descripción del requisito
Página de adición de productos, debe seleccionar un modelo de automóvil. Aparece a un niño modal en el modal de arranque para usar.
Hay 4 niveles de catálogos en total. Para usar el árbol de directorio.
Luego hay dos tipos: actividad y mercancía, y el componente debe ser llamado por parámetros no transferentes.
Las marcas de modelos de automóviles deben usar la navegación de letras.
Implementación tecnológica
Los datos se transmiten a JSON por el backend, y obtenemos AJAX y luego los operamos.
Dado que hay más de decenas de miles de datos de modelos de vehículos totales, es imposible solicitarlos al mismo tiempo. Aquí usamos un método asincrónico, cada uno haciendo clic en el nodo del directorio, y cargamos su siguiente nivel.
Aquí usamos dos parámetros para controlar la carga diferente de actividades y productos. _ShowPrice y abrió
El primer nivel de datos transmitidos desde el backend es la marca modelo, que tiene los campos con la letra inicial. La inicialización de la navegación de letras es ordenar estos datos con el atributo de FirstWord y luego ignorar otros elementos con la misma letra inicial.
Para el tipo de actividad, el nivel más bajo de datos que se verifica debe devolverse. (Marque Audi y Audi A6, y solo se devuelve el significado de A6), aquí se usa un bucle completo de 4 capas. Sin embargo, se atraviesa en función de si se verifica y la velocidad no es lenta.
/*** Creado por Nuenfeng el 2016/5/23. * Componente de selección del modelo* Parámetros:* showPrice si ingresar el precio (hay cuadros de opciones de la marca que no ingresan el precio, y no hay selección de toda la función)* Params Object Pass Outside* Callback Callback Function*/(function () {var UricarBrand = Global.url.CarBrandList; // Var Uri = Urico abierto; ShowPrice _Callback = Callback; // Establecer el cuadro modal Big $ ('#ZC-Sub-Modal'). AddClass ("BS-EXample-Modal-Lg"); id = "CB _"> <Span> Selección de marca automática </span> '; exitoso.html (str); // $ ("#ResourceId"). Find ("input [type = checkbox]"). Unbind (). Bind ("Click", function () {// if ($ (this) .is (': checked') == true) {// Seleccione todos los nodos superiores y seleccione // // Seleccionado superior // $ (this) .parents ("li"). Cada (función () {////// $ (this) .find ("input [type = checkbox]: primero"). attr ("checked", true) //}); } //}); //} //}); // Mantenga el desplazamiento de la ventana principal después de ocultar la ventana del niño $ ("#zc-sub-modal"). On ("hidden.bs.modal", function () {$ ('body'). AddClass ('modal-open')}); } Cartree.prototype.empty = function () {Opened = false; console.log ('vacío me'); } // Cargue el submenu var loadSubmenu = function (objid, carbrandid, times) {requitparams.brandid = carBrandid; ejecutAraJax (global.url.carbrandList, requestParams, function (data) {// ordenar datos en una manera coquettish data.sort (keySrt ("firstword")); var menúhtml = "<ul>"; para (Var índice en data) {var = data = data [índice]; menuhtml + = '<li id = "cb_' ' +' ' +' +. + menú.carBrandid + '"brand ="' + menú.brand + '">'; // árbol con precio if (_showPrice) {// último nivel, agregue el cuadro de opción if (menú.level> 3) {menuhtml + = '<input type =" checkbox "name =" recurseids "value ="' + menu.carbrandid + '" />';};} '<span>' + menú.name + '</span>'; // último nivel, agregue el cuadro de entrada if (menú /> '; está cargado, inicializa la navegación de caracteres Charnavarr = []; COBJTEMP.TARGETID = 'CB _'+DATOS [I] .CARBRANDID; } // Aquí está la clasificación del objeto de matriz de coqueteo var keySrt = function (proppertyname) {function return (object1, object2) {var value1 = object1 [Propertyname]; var value2 = object2 [PropertyName]; if (value2 <value1) {return 1; } else if (value2> value1) {return -; } else {return; }}} // Guardar el evento var save = function () {// Después de la confirmación, ejecute la función de devolución de llamada if (_showPrice) {var res = getPriceResult (); if (res.status) {_callback (res.data); } else {alert (res.error); devolver; }} else {_callback (getNopriceResult ()); } // devuelve datos y ocultar $ ('#zc-sub-modal'). Modal ('escondite'); } // Establecer la inicialización de navegación de caracteres var initcharnav = function () {var charnavhtml = '<ul id = "charnavbar">'; for (var i en charnavarr) {charnavhtml+= '<li> <a href = "#'+charnavarr [i] .targetid+'">'+charnavarr [i] .firstword+'</a> </li>'; } charnavhtml += '<li> <a> ↑ </a> </li>'; charnavhtml += '<button type = "botón"> guardar </boton>'; charnavhtml += '</ul>'; $ ('#ZC-Sub-Modal'). Append (Charnavhtml); $ ('. ModalGotop'). On ('Click', function (e) {$ ('#ZC-Sub-Modal'). Animate ({scrollTop:},);}); } // Estadísticas Los datos de retorno con el precio var getPricreSult = function () {var result = {status: true, data: [], error: ''}; var litemp; var objtemp; $ ('. TreeView-Gray Input: CheckBox: Checked'). Cada (función (i) {litemp = $ (this) .Parent ('li'); objtemp = {}; objtemp.carbrandid = litemp.attr ('value'); objtemp.brand = litemp.attr ('brand'); objtemp.CeCeR. litemp.find ('span'). text (); objtemp.carbrandName + '! resultado de retorno; } // Estadísticas los datos de retorno sin precio var litemp; var objtemp; var flag1; var flag2; var flag3; var flag4; VAR LevelName; // Traverse 4 capas $ ('#cb _'). Children (). Children ('li'). Children ('Input: CheckBox'). Cada (function (i) {if ($ (this) .is (': checked')) {flag = verdadero;} else {flag = false;} $ (this) .parent (). Children (). {if ($ (this) .is (: checked ')) {flag = false; $ (this) .parent (). Children (). Children ('Li'). Children ('Input: CheckBox'). Cada (función (i3) {if ($ (this) .is (': checked')) {flag1 = false; flag2 = false; flag3 = true;} else {flag3 = false;}; $ (this) .Parent (). Children (). Children ('Li'). Children ('Input: CheckBox'). Cada (función (i4) {if ($ (this) .is (': checked')) {flag1 = false; flag2 = false; flag3 = false; flag4 = true;} else {flag4 = false;} if ((litemp = $ (this). objtemp = {}; litemp.children ('span'). //objtemp.carbrandname = litemp.children ('span'). text (); $ (this) .Parent ('li'); objtemp.carbrandName = objtemp.BRAND + '' + litemp.children ('span'). text (); litemp.attr ('valor'); resultado de retorno; } // Binde el evento de clic $ (documento) .On ('Click', '#ResourceId Li', function (e) {e.stopPropagation (); if ($ (this) .Attr ('Open')) {$ (this) .RemoVeattr ('Open'); $ (this) .frildren ('ul'). 'abierto'); // No se retire al hacer clic en el cuadro multi-check.on ('hacer clic', 'input [type = "CheckBox"]', function (e) {e.StopPropagation ();}); window.cartree = cartree; } ());Método de llamadas:
cartree = new CarTree (false, {}, function (data) {console.log (data);});Lo anterior es el conocimiento relevante de la explicación detallada del código de componente del directorio de árbol de implementación de Bootstrap introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!