Descrição do requisito
Página de adição de produto, você precisa selecionar um modelo de carro. Popa um modal infantil no modal de bootstrap para usar.
Existem 4 níveis de catálogos no total. Para usar a árvore do diretório.
Depois, existem dois tipos: atividade e mercadoria, e o componente precisa ser chamado por parâmetros não transferidos.
As marcas de modelo de carro devem usar a navegação por letras.
Implementação de tecnologia
Os dados são transmitidos ao JSON pelo back -end, e obtemos Ajax e o operamos.
Como existem mais de dezenas de milhares de dados totais do modelo de veículo, é impossível solicitá -los ao mesmo tempo. Aqui usamos um método assíncrono, cada um clique no nó do diretório e carregamos seu próximo nível.
Aqui, usamos dois parâmetros para controlar a carga diferente de atividades e produtos. _SOWPRICE e aberto
O primeiro nível de dados transmitidos do back -end é a marca modelo, que possui os campos com a letra inicial. A inicialização da navegação por letra é classificar esses dados com o atributo de primeira palavra e ignorar outros elementos com a mesma letra inicial.
Para o tipo de atividade, o nível mais baixo de dados que é verificado precisa ser retornado. (Marque Audi e Audi A6, e apenas o significado de A6 é retornado), um loop completo de 4 camadas é usado aqui. No entanto, é atravessado com base no fato de serem verificados e a velocidade não é lenta.
/*** Criado por Nuenfeng em 2016/5/23. * Componente de seleção do modelo* Parâmetros:* ShowPrice Se você deve inserir o preço (existem caixas de opções da marca que não inserem o preço e não há seleção todas as funções)* Params objeto passado para fora* Função de retorno de chamada*/(function) {var uRicarbrand = global.url.Carbrandlist; // varri = urriRicarbrand.urbrand.url.urbrandlist; Função de chamadas de chamada // // SHOPPRICE; // Defina a caixa grande modal $ ('#ZC-Sub-Modal'). Addclass ("BS-Exemplo-Modal-LG"); id = "CB _" bem-sucedido.html (str); // $ ("#ResourceId"). Find ("input [type = caixa de seleção]"). Unpind (). bind ("clique", function () {// if ($ (this) .is (': checked') == true) {// selecione todos os nós superiores e selecione ////1///15) ==) {// "li). isto) .Find ("input [type = caixa de seleção]: primeiro"). att ("verificado", true) //}); } //}); // Mantenha a janela dos pais rolando após ocultar a janela da criança $ ("#zc-sub-modal"). } Cartree.prototype.empty = function () {aberto = false; console.log ('me esvaziar'); } // Carregar o submenu var loadSubmenu = function (objid, carbrandid, times) {requestParams.brandid = carbrandid; executionajax (global.url.carbrandlist, requestParams, function (dados) {// encomendar dados em uma maneira coquete Data.sort (keysrt ("Firstword")); var menuhtml = "<ul>"; para (var índice em dados) {var data [index]; + MENU.CARBRANDID + '"BRAND ="' + MENU.BRAND + '">'; // Árvore com preço se (_showPrice) {// Último nível, adicione a caixa de opções se (menu.level> 3) {menuhtml + = '<input Type =" caixa de seleção "Nome =" Resourceids "'; 'Span>' + menu.name + '</span>'; /> '; é carregado, inicialize a navegação de caracteres Charnavarr = []; Cobjtemp.TargetId = 'Cb _' Dados [i] .CarbrandId; } // Aqui está o objeto de flerte de flerte de classificação 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; }}} // Salvar o evento var save = function () {// Após a confirmação, execute a função de retorno de chamada se (_showPrice) {var res = getPriCeResult (); if (res.status) {_callback (res.data); } else {alert (res.error); retornar; }} else {_Callback (getNoPriCerSult ()); } // retorna dados e ocultar $ ('#zc-sub-modal'). Modal ('hide'); } // Defina a inicialização da navegação de caracteres var initcharnAV = function () {var charnavhtml = '<ul id = "charnavbar">'; para (var i em charnavarr) {charnavhtml+= '<li> <a href = "#'+charnavarr [i] .targetid+'">'+charnavarr [i] .firstword+'</a> </li>'; } charnavhtml += '<li> <a> ↑ </a> </li>'; charnavhtml += '<button type = "button"> salvar </butut>'; charnavhtml += '</ul>'; $ ('#ZC-Sub-Modal'). Append (Charnavhtml); $ ('. modalgotop'). on ('clique', função (e) {$ ('#zc-sub-modal'). Animate ({scrolltop:},);}); } // Estatísticas Os dados de retorno com preço var getPriCereSult = function () {var resultado = {status: true, dados: [], erro: ''}; var litemp; var objTemp; $ ('. TreeView-Gray Entrada: Caixa de seleção: verificada'). Cada (função (i) {litemp = $ (this) .parent ('li'); objTemp = {}; objTemp.CarbrandId = litemp.attr ('value); objTemp.brand = litemp.attr (Brandn); litemp.find ('span'). text (); objtemp.carbrandname + '! resultado de retorno; } // Estatísticas Os dados de retorno sem preço var getNoPresuSult = function () {var result = []; var litemp; var objTemp; var flag1; var flag2; var flag3; var flag4; var niverename; // travesse 4 camadas $ ('#cb _'). crianças (). crianças ('li'). crianças ('entrada: caixa de seleção'). cada (função (i) {if ($ (this) .is (': checked')) {flag = true;} else {flag = false;} $ (this).)). (i) {if ($ (this) .is (': checked')) {sinalizador = false; $ (this) .parent (). Children (). crianças ('li'). crianças ('entrada: caixa de seleção'). Cada (função (i3) {if ($ (this) .is (': checked')) {sinaliza 1 = false; flag2 = false; flag3 = true;} else {sinaliza 3 = false;} $ (this) .Parent (). Children (). Children ('li'). Crianças ('entrada: caixa de seleção'). cada (função (i4) {if ($ (this) .is (': checked')) {flag1 = false; flag2 = false; flag3 = false; flag4 = {} el) {(flag4 = false; if (4; objtemp = {}; LitEmp.Children (Span '). //objtemp.carbrandname = litemp.children ('span'). text (); $ (este) .parent ('li'); objtemp.brand + '' + litemp.children ('span') litemp.attr ('valor'); resultado de retorno; } // vincular o evento de clique em $ (document) .on ('clique', '#resourceid li', function (e) {e.stopPropagation (); if ($ (this) .attr ('open')) {$ (this) .removeat ('open); $ (this). 'Abra'); // Não puxe para baixo ao clicar na caixa de verificação múltipla.on ('clique', 'input [type = "caixa de seleção"], function (e) {e.stopPropagation ();}); window.cartree = cartree; } ());Método de chamada:
Cartree = New Cartree (false, {}, function (dados) {console.log (dados);});O exposto acima é o conhecimento relevante da explicação detalhada do código do componente de diretório de diretório de implementação do Bootstrap, introduzido a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!