Requirement description
Product addition page, you need to select a car model. Pop up a child modal on the bootStrap modal to use.
There are 4 levels of catalogues in total. To use the directory tree.
Then there are two types: activity and commodity, and the component needs to be called by non-transfer parameters.
Car model brands should use letter navigation.
Technology implementation
The data is transmitted to JSON by the backend, and we get ajax and then operate it.
Since there are more than tens of thousands of total vehicle model data, it is impossible to request it at one time. Here we use an asynchronous method, each click on the directory node, and load its next level.
Here we use two parameters to control the different loading of activities and products. _showPrice and opened
The first level of data transmitted from the backend is the model brand, which has the fields with the initial letter. The initialization of letter navigation is to sort this data with the firstWord attribute, and then ignore other elements with the same initial letter.
For the activity type, the lowest level of data that is checked needs to be returned. (Tick Audi and Audi A6, and only the meaning of A6 is returned), a full 4-layer loop is used here. However, it is traversed based on whether there is checked, and the speed is not slow.
/** * Created by nuenfeng on 2016/5/23. * Model selection component* Parameters: * showPrice Whether to enter the price (there are options boxes from the brand that do not enter the price, and there is no selection all function) * params Object passed outside* callback callback function*/ (function () { var uriCarBrand = global.url.carBrandList; //var uri = uriCarBrand.url; var opened = false; //Is this component var _callback opened; //Callback function var requestParams; //The parameter to be used when requesting var _showPrice; //Whether to enter the price var lastShowPrice; //The previous status var is opened var charNavArr; //Letter navigation array function CarTree(showPrice, params, callback) { // Not opened, initialized; Opened, directly display modal requestParams = params; _showPrice = showPrice; _callback = callback; if (!opened || lastShowPrice != showPrice) { this.init(); opened = true; lastShowPrice = showPrice; } else { $('#zc-sub-modal').modal('show'); } } CarTree.prototype.init = function () { msjcTools.addSubModal(); //Set the big modal box $('#zc-sub-modal').addClass("bs-example-modal-lg"); $('#zc-sub-modal .modal-dialog').addClass("modal-lg"); var str = '<form id="info-form" data-parsley-validate>'; str += '<ul id="resourceId">' str += '<li id="cb_"><span>Auto brand selection</span>'; str += "</li>" str += '</ul>' str += '</form>'; var objId = 'cb_0'; var carBrandId = 0;loadSubMenu(objId, carBrandId, 1); //1 indicates the first load, which is used to initialize the letter navigation when the load is successful after the load is successful.html(str); $('#zc-sub-modal').modal({ keyboard: false, show: true }); // Click to save the event $('#zc-sub-modal .modal-footer .btn.btn-primary').unbind().bind("click", function () { save(); }); //$("#resourceId").find("input[type=checkbox]").unbind().bind("click",function(){ // if($(this).is(':checked')==true){// Select all the upper nodes and select // // Superior selected // $(this).parents("li").each(function(){ // $(this).find("input[type=checkbox]:first").attr("checked",true) // }); // } else { // // // Unchecked // $(this).siblings("ul").find("input[type=checkbox]").each(function(){ // $(this).removeAttr("checked"); // }); // } //}); // } //}); // Keep the parent window scrolling after hiding the child window$("#zc-sub-modal").on("hidden.bs.modal", function () { $('body').addClass('modal-open') }); } CarTree.prototype.empty = function () { opened = false; console.log('empty me'); } //Load the submenu var loadSubMenu = function (objId, carBrandId, times) { requestParams.brandId = carBrandId; executeAjax(global.url.carBrandList, requestParams, function (data) { // Order data in a coquettish manner data.sort(keysrt("firstWord")); var menuHtml = "<ul>"; for (var index in data) { var menu = data[index]; menuHtml += '<li id="cb_' + menu.carBrandId + '" value="' + menu.carBrandId + '" brand="' + menu.brand + '">'; // Tree with price if (_showPrice) { // Last level, add the option box if (menu.level > 3) { menuHtml += '<input type="checkbox" name="resourceIds" value="' + menu.carBrandId + '" />'; } menuHtml += '<span>' + menu.name + '</span>'; // Last level, add the input box if (menu.level == 4) { menuHtml += '<input type="text" maxlength="">'; } } else { // Tree without price menuHtml += '<input type="checkbox" name="resourceIds" value="' + menu.carBrandId + '" />'; menuHtml += '<span>' + menu.name + '</span>'; } menuHtml += "</li>"; } menuHtml += "</ul>"; $('#' + objId).append(menuHtml); $('#' + objId).attr('data-load', 'loaded'); //After the first level of the car type is loaded, initialize the character navigation charNavArr = []; var fwdLast = ''; //The last initial letter for (var i in data) { var cobjTemp = {}; if (fwdLast != data[i].firstWord) { fwdLast = data[i].firstWord; cobjTemp.firstWord = fwdLast; cobjTemp.targetId = 'cb_'+data[i].carBrandId; charNavArr.push(cobjTemp); } } if (times == 1) { initCharNav(); // Click to save event $('.charNavSaveBtn').unbind().bind("click", function () { save(); }); } }); } // Here is the flirting array object sorting 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 ; } } } // Save the event var save = function(){ // After confirmation, execute the callback function if (_showPrice) { var res = getPriceResult(); if (res.status) { _callback(res.data); } else { alert(res.error); return; } } else { _callback(getNopriceResult()); } // Return data, and hide $('#zc-sub-modal').modal('hide'); } // Set character navigation initialization 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: }, ); }); } // Statistics the return data with price var getPriceResult = function () { var result = { status : true, data : [], error : '' }; var liTemp; var objTemp; $('.treeview-gray input:checkbox:checked').each(function (i) { liTemp = $(this).parent('li'); objTemp = {}; objTemp.carBrandId = liTemp.attr('value'); objTemp.brand = liTemp.attr('brand'); objTemp.carBrandName = liTemp.find('span').text(); objTemp.unitPrice = liTemp.find('input:text').val(); // If the price is not entered, the save fails and the carBrandName without input is returned if(objTemp.unitPrice == '') { result.status = false; result.error = 'Please enter the price of ' + objTemp.carBrandName + '! '; return result; } result.data.push(objTemp); }); return result; } // Statistics the return data without price var getNopriceResult = function () { var result = []; var liTemp; var objTemp; var flag1; var flag2; var flag3; var flag4; var levelName; // traverse 4 layers $('#cb_').children().children('li').children('input:checkbox').each(function (i) { if ($(this).is(':checked')) { flag = true; } else { flag = false; } $(this).parent().children().children('li').children('input:checkbox').each(function (i) { if ($(this).is(':checked')) { flag = false; flag = true; } else { flag = false; } // Get the name of the second level and use liTemp = $(this).parent('li'); level2Name = liTemp.children('span').text(); $(this).parent().children().children('li').children('input:checkbox').each(function (i3) { if ($(this).is(':checked')) { flag1 = false; flag2 = false; flag3 = true; } else { flag3 = false; } $(this).parent().children().children('li').children('input:checkbox').each(function (i4) { if ($(this).is(':checked')) { flag1 = false; flag2 = false; flag3 = false; flag4 = true; } else { flag4 = false; } if (flag4) { liTemp = $(this).parent('li'); objTemp = {}; objTemp.carBrandId = liTemp.attr('value'); objTemp.brand = liTemp.attr('brand'); //objTemp.carBrandName = liTemp.children('span').text(); objTemp.carBrandName = objTemp.brand + ' ' + liTemp.children('span').text(); result.push(objTemp); } }); if (flag) { liTemp = $(this).parent('li'); objTemp = {}; objTemp.carBrandId = liTemp.attr('value'); objTemp.brand = liTemp.attr('brand'); //objTemp.carBrandName = liTemp.children('span').text(); objTemp.carBrandName = objTemp.brand + ' ' + levelName + ' ' + liTemp.children('span').text(); result.push(objTemp); } });if (flag2) { //liTemp = $(this).parent('li'); objTemp = {}; objTemp.carBrandId = liTemp.attr('value'); objTemp.brand = liTemp.attr('brand'); //objTemp.carBrandName = objTemp.brand + liTemp.children('span').text(); objTemp.carBrandName = objTemp.brand + ' ' + liTemp.children('span').text(); result.push(objTemp); } }); if (flag1) { liTemp = $(this).parent('li'); objTemp = {}; objTemp.carBrandId = liTemp.attr('value'); objTemp.brand = liTemp.attr('brand'); objTemp.carBrandName = liTemp.children('span').text(); result.push(objTemp); } }); return result; } // Bind the click event $(document).on('click', '#resourceId li', function (e) { e.stopPropagation(); if ($(this).attr('open')) { $(this).removeAttr('open'); $(this).children('ul').hide(); } else { $(this).attr('open', 'opened'); $(this).children('ul').show(); } var objId = $(this).attr('id'); var carBrandId = $(this).attr('value'); //Loaded does not execute if ($(this).attr('data-load')) { return; } loadSubMenu(objId, carBrandId); }); // Do not pull down when clicking the multi-check box.on('click', 'input[type="checkbox"]', function (e) { e.stopPropagation(); }); window.CarTree = CarTree; }());Calling method:
carTree = new CarTree(false, {}, function (data) {console.log(data);});The above is the relevant knowledge of the detailed explanation of the BootStrap implementation tree directory component code introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!