Описание требования
Страница добавления продукта необходимо выбрать модель автомобиля. Заполните дочерний модал на начальной загрузке Modal для использования.
Всего есть 4 уровня каталогов. Использовать дерево каталогов.
Тогда есть два типа: активность и товары, и компонент должен быть вызван параметрами без передачи.
Автомобильные модельные бренды должны использовать навигацию по буквам.
Технологическая реализация
Данные передаются в JSON по бэкэнд, и мы получаем Ajax, а затем эксплуатируем их.
Поскольку существует более десятков тысяч данных общего модели транспортного средства, невозможно запросить их за один раз. Здесь мы используем асинхронный метод, каждый нажимающий на узле каталога и загружаем его следующий уровень.
Здесь мы используем два параметра для управления различной нагрузкой действий и продуктов. _showprice и открылся
Первым уровнем данных, передаваемых из бэкэнда, является модельный бренд, который имеет поля с начальной буквой. Инициализация навигации по буквам заключается в том, чтобы сортировать эти данные с атрибутом первого слова, а затем игнорировать другие элементы с той же начальной буквой.
Для типа деятельности необходимо возвращать самый низкий уровень проверенных данных. (Tick Audi и Audi A6, и здесь возвращается только значение A6), здесь используется полный 4-слойный цикл. Тем не менее, он проходит в зависимости от того, проверяется ли проверена, и скорость не медленная.
/*** Создан Nuenfeng 2016/5/23. * Компонент выбора модели* Параметры:* Показать, чтобы вводить цену (есть поля с опционами от бренда, которые не вводят цену, и нет выбора всей функции)* объект Params, переданный вне* Функция обратного обратного обращения*/(function () {var urricarbrand = global.url.carbrandlist; // varuperscemance varbrandstemallist; Открыто; ShowPrice; // Установить большую модальную коробку $ ('#zc-sub-modal'). Addclass ("BS-Example-Modal-LG"); ID = "CB _"> <pan> Выбор бренда </span> '; Успешен.html (str); // $ ("#resourceid"). Найти ("input [type = fackbox]"). unbind (). bind ("click", function () {// if ($ (this) .is (': checked') == true) {// select все верхние узлы и select // // supported // $ (это). $ (this) .find ("input [type = fackbox]: First"). ATTR ("проверен", true) //}); } //}); // сохранить родительское окно прокрутка после скрытия окна дочернего окна $ ("#zc-sub-modal"). On ("hidden.bs.modal", function () {$ ('body'). AddClass ('modal-open')}); } Cartree.prototype.empty = function () {opened = false; console.log («опорожните меня»); } // Загрузите подменю var loadsubmenu = function (objid, carbrandid, times) {requestparams.brandid = carbrandid; executeAjax (global.url.carbrandlist, requestparams, function (data) {// Заказ данных в кокетливом манере data.sort (keysrt ("Firstword")); var menuhtml = "<ul>"; для (var index в data) {var menu = data [index]; 'value = "' + menu.carbrandid + '" brand = "' + menu.brand + '">'; // Дерево с ценой if (_showprice) {// Последний уровень, добавьте окно опциона if (menu.level> 3) {menuhtml + = '<input = "name =" namuid "valuid ="' + menu.carbrdid + " /'in value" /' ' + " Menuhtml += '<pan>' +menu.name +'</span>'; menu.carbrandid + '"/>'; menuhtml + = '<pan>' + menu.name + '</span>';} menuhtml + =" </li> ";} menuhtml + =" </ul> "; $ ('#' + objid) .append (menuhtml); 'Загружено'); fwdlast; } // Вот есть флиртовая массива объекта сортировка var keysrt = function (свойство iname) {return function (object1, object2) {var value1 = object1 [properationname]; var value2 = object2 [PropertyName]; if (value2 <value1) {return 1; } else if (value2> value1) {return -; } else {return; }}} // Сохранить событие var save = function () {// после подтверждения, выполните функцию обратного вызова if (_showprice) {var res = getPriceresult (); 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 (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"> save </button>'; charnavhtml += '</ul>'; $ ('#zc-sub-modal'). Append (charnavhtml); $ ('. Modalgotop'). On ('click', function (e) {$ ('#zc-sub-modal'). animate ({scrolltop:},);}); } // Статистика Данные возврата с ценой var getPriceresult = function () {var result = {status: true, data: [], error: '' '}; var litemp; var objtemp; $ ('. LITEMP.FIND ('SPAN'). Text (); + '! результат возврата; } // Статистика возврата данных без цены var getNoPricerESult = function () {var result = []; var litemp; var objtemp; var flag1; var flag2; var flag3; var flag4; var LevelName; // Траверс 4 слои $ ('#cb _'). children (). Дети ('li'). Дети ('Ввод: Флажок'). Каждый (i) {if ($ (this) .is (': checked')) {flag = true;} else {flag = false;} $ (this) .parent (). Дети () function ('). {if ($ (это). $ (this) .parent (). kids (). children ('li'). children ('input: fackbox'). Каждый (function (i3) {if ($ (this) .is (': checked')) {flag1 = false; flag2 = false; flag3 = true;} else {flag3 = false;} $ (this) .parent (). Children (). Children ('li'). Children ('input: fackbox'). Каждый (function (i4) {if ($ (this) .is (': checked')) {flag1 = false; flag2 = false; flag3 = false; flag4 = true;} else {flag4 = false; if (flag4) {litemp = (this $ (this). {}; Result.push (objtemp); Litemp.Children ('SPAN'). Text (); objtemp.carbrandid = litemp.attr ('value'); Result.push (objtemp); LITEMP.CHILDRES ('SPAN'). Text (); результат возврата; } // Связывать событие Click $ (Document) .on ('click', '#resourceid li', function (e) {e.stoppropagation (); if ($ (this) .attr ('open')) {$ (this) .removeattr ('open'); $ (this) .Children ('ul'). 'Opened'); // не тяните вниз при щелчке по Box.on ('click', 'input [type = "]', function (e) {e.stoppropagation ();}); window.cartree = картри; } ());Метод вызова:
Cartree = новый картри (false, {}, function (data) {console.log (data);});Выше приведено соответствующее знание подробного объяснения кода компонента каталога внедрений в реализации Bootstrap, представленного вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!