요구 사항 설명
제품 추가 페이지, 자동차 모델을 선택해야합니다. 부트 스트랩 모달에 어린이 모달을 팝업하여 사용할 수 있습니다.
총 4 레벨의 카탈로그가 있습니다. 디렉토리 트리를 사용합니다.
그런 다음 활동과 상품의 두 가지 유형이 있으며, 트랜스퍼 매개 변수에 의해 구성 요소를 호출해야합니다.
자동차 모델 브랜드는 문자 탐색을 사용해야합니다.
기술 구현
데이터는 백엔드에 의해 JSON으로 전송되며 Ajax를 얻은 다음 작동합니다.
수만 건의 총 차량 모델 데이터가 있기 때문에 한 번에 요청하는 것은 불가능합니다. 여기서 우리는 비동기 메소드를 사용하고, 디렉토리 노드를 클릭하고 다음 레벨을로드합니다.
여기서는 두 가지 매개 변수를 사용하여 다양한 활동과 제품을 제어합니다. _showprice 및 열렸습니다
백엔드에서 전송 된 첫 번째 수준의 데이터는 모델 브랜드이며, 초기 문자가있는 필드가 있습니다. 문자 탐색의 초기화는이 데이터를 FirstWord 속성으로 정렬 한 다음 동일한 초기 문자로 다른 요소를 무시하는 것입니다.
활동 유형의 경우 확인 된 가장 낮은 수준의 데이터를 반환해야합니다. (진드기 아우디와 아우디 A6, 그리고 A6의 의미 만 반환) 여기에는 전체 4 층 루프가 사용됩니다. 그러나 점검이 있는지에 따라 가로 지르며 속도는 느리지 않습니다.
/*** Nuenfeng이 2016/5/23에 만들었습니다. * 모델 선택 구성 요소* 매개 변수 :* ShowPrice 가격을 입력할지 여부 (가격을 입력하지 않는 브랜드의 옵션 상자가 있고 모든 기능이 없습니다)* 콜백 콜백 함수* () // var var var var var var var charnavarr; _ 콜백; Modal Box $ ( '#zc-sub-modal'). AddClass ( "bs-example-modal-lg"); id = "CB _"> <span> </li> "str += '</폼>'; 성공. html ( '#zc-sub-modal'). modal ({keyboard : show : true}); // $ ( "#resourceId"). find ( "input [type = checkbox]"). unbind (). bind ( "click", function () {// if ($ (this) .is ( ': checked') == true) {// 모든 상단 노드를 선택하고 select // // superior selected // $ (this) .parents ( "li"). $ (this) .find ( "입력 [type = checkbox] : first"). attr ( "checked", true) //} else {// // unchecked // $ (this). //} //}); // 어린이 창을 숨긴 후 부모 창을 스크롤 상태로 유지하십시오. } cartree.prototype.empty = function () {Opened = false; Console.log ( '빈 나를'); } // 하위 메뉴 var loadsubmenu = function (objid, carbrandid, times) {requestparams.brandid = carbrandid; executeAjax (global.url.carbrandlist, requestparams, function (data) {// coquettish monne data.sort에서 데이터를 주문합니다. menu.carbrandid + ' "brand ="' + menu.brand + ' ">'; 메뉴 + '< /span>'; // 입력 상자를 추가하십시오. Menuhhtml + = '</li> "; 캐릭터 탐색 charnavarr = []; 'cb _'. CARNAVARR.PUSH; } // 여기에 Flirting Array 객체 분류 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; }}} // 이벤트 저장 var var save = function () {// 확인 후 콜백 함수를 실행합니다. if (res.status) {_callback (res.data); } else {alert (res.error); 반품; }} else {_callback (getNopricerEsult ()); } // 데이터를 반환하고 $ ( '#zc-sub-modal'). modal ( 'hide'); } // 문자 탐색 초기화 설정 var initcharnav = function () {var charnavhtml = '<ul id = "charnavbar">'; for (charnavarr의 var i) {charnavhtml+= '<li> <a href = "#'+charnavarr [i] .targetid+'">'+charnavarr [i] .firstword+'</a>'; } charnavhtml += '<li> <a> ↑ </a> </li>'; charnavhtml += '<버튼 유형 = "버튼"> 저장 </button>'; charnavhtml += '</ul>'; $ ( '##zc-sub-modal'). Append (charnavhtml); $ ( '. modalgotop'). on ( 'click', function (e) {$ ( '##zc-sub-modal'). 애니메이션 ({scrolltop :},);}); } // 가격으로 반환 데이터를 가격으로 var getPricerEsult = function () {var result = {status : true : [], error : ''}; var litemp; var objtemp; $ ( '. TreeView-Gray Input : Checkbox : Checked'). 각 (함수 (i) {litemp = $ (this) .parent ( 'li'); objtemp = {}; objtemp.carbrandid = letemp.attr ( 'value'); objtemp.brand = remptr ( 'brand'); carbrandname =. LETEMP.FIND ( 'Span'). Text (); unitPrice = litemp.Find ( 'input : val () objtemp.carbrandname + '; 반환 결과; } // 가격이없는 반환 데이터를 통계하기 var getNopricerEsult = function () {var result = []; var litemp; var objtemp; var flag1; var flag2; var flag3; var flag4; var levelName; // 4 계층 $ ( '#cb _'). children (). children ( 'li'). children ( 'li'). children ( 'input : checkbox'). (i) {$ (this). $ (this) .parent (). children () children ( 'li'). children ( 'input : checkbox'). 각 (함수 (i3) {if (if ($ (this) .is ( ': checked'))) {flag2 = false; flag3 = true;} else {flag3 = false;} $ (이) = {{objtemp.carbrandid = litemp.attr ( 'value'); 결과. objtemp.carbrandname + '' + levelname + '' + litemp.children (). objtemp.brand. attr ( 'brand'); litemper ( 'li'); 반환 결과; } // 클릭 이벤트 $ (document) .on ( 'click', '#ResourceId li', function (e) {e.StopPropagation (); if ($ (this) .attr ( 'Open')) {$ (this)); $ (this) .children ( 'ul') '). // Multi-Check Box.on ( 'click', 'input [type = "checkbox"]', function (e) {e.StopPropAgation ();})을 클릭 할 때 당기지 마십시오. Window.cartree = Cartree; } ());통화 방법 :
cartree = new cartree (false, {}, function (data) {console.log (data);});위는 편집기가 소개 한 부트 스트랩 구현 트리 디렉토리 구성 요소 코드에 대한 자세한 설명에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!