bootStrap树形目录组件

需求描述

产品添加页面，需要选择车型。在bootStrap的modal上弹出子modal来使用。
车型一共有4级目录。要使用目录树。
然后分活动和商品两种，需要能够通过不通参数来调用该组件。
车型品牌要使用字母导航。

 

技术实现

数据都是后端传json过来，我们ajax获取然后操作。
由于车型总数据有几万条以上，不可能一次性请求过来。这里我们使用异步的方式，每点击一次目录节点，加载它的下一级。
这里我们用两个参数来控制活动和商品的不同加载。_showPrice和opened
后端传过来的第一级数据是车型品牌，其中有首字母的字段。字母导航的初始化，就是把这个数据用firstWord属性来排序，然后忽略掉其他首字母相同的元素。
对于活动类型，需要返回所勾选的最低一级的数据。（勾选奥迪和奥迪A6，则只返回A6的意思），这里用了整整4层循环。不过它是根据是否有checked来遍历的，速度不慢。

 

/**  2  * Created by nuenfeng on 2016/5/23.  3  * 车型选择组件  4  * 参数：  5  * showPrice 是否要输入价格（不输入价格的从品牌开始就有选项框，没有全选功能）  6  * params 外部传入的对象  7  * callback 回调函数  8  */  9 (function () { 10 var uriCarBrand = global.url.carBrandList; 11 //var uri = uriCarBrand.url; 12 var opened = false; //当前页面是否打开过本组件 13 var _callback;  //回调函数 14 var requestParams;  //请求时要使用的参数 15 var _showPrice; //是否要输入价格 16 var lastShowPrice;  //前一次打开状态 17 var charNavArr; //字母导航数组 18  19 function CarTree(showPrice, params, callback) { 20 // 没打开过，初始化； 打开过，直接显示modal 21 requestParams = params; 22 _showPrice = showPrice; 23 _callback = callback; 24  25 if (!opened || lastShowPrice != showPrice) { 26 this.init(); 27 opened = true; 28 lastShowPrice = showPrice; 29 } else { 30 $('#zc-sub-modal').modal('show'); 31 } 32 } 33  34 CarTree.prototype.init = function () { 35  36 msjcTools.addSubModal(); 37 //设置大模态框 38 $('#zc-sub-modal').addClass("bs-example-modal-lg"); 39 $('#zc-sub-modal .modal-dialog').addClass("modal-lg"); 40  41 var str = '<form id="info-form" data-parsley-validate class="form-horizontal form-label-left">'; 42 str += '<ul id="resourceId" class="treeview-gray">' 43 str += '<li id="cb_0"><span>汽车品牌选择</span>'; 44 str += "</li>" 45 str += '</ul>' 46 str += '</form>'; 47  48 var objId = 'cb_0'; 49 var carBrandId = 0; 50 loadSubMenu(objId, carBrandId, 1);  //1 表示第一次加载，用于加载成功后判断时候要初始化字母导航 51  52 $('#zc-sub-modal-body').html(str); 53 $('#zc-sub-modal').modal({ 54 keyboard: false, 55 show: true 56 }); 57  58 // 点击保存事件 59 $('#zc-sub-modal .modal-footer .btn.btn-primary').unbind().bind("click", function () { 60 save(); 61 }); 62  63  64 //$("#resourceId").find("input[type=checkbox]").unbind().bind("click",function(){ 65 //if($(this).is(':checked')==true){//选中 则其上层节点全部展开并选中 66 ////上级选中 67 //$(this).parents("li").each(function(){ 68 //$(this).find("input[type=checkbox]:first").attr("checked",true) 69 //}); 70 //} else { 71 ////下级取消选中 72 //$(this).siblings("ul").find("input[type=checkbox]").each(function(){ 73 //$(this).removeAttr("checked"); 74 //}); 75 //} 76 //}); 77  78  79 //隐藏子窗口后 保持父窗口的滚动 80 $("#zc-sub-modal").on("hidden.bs.modal", function () { 81 $('body').addClass('modal-open') 82 }); 83 } 84  85 CarTree.prototype.empty = function () { 86 opened = false; 87 console.log('empty me'); 88 } 89  90 //加载子菜单 91 var loadSubMenu = function (objId, carBrandId, times) { 92  93 requestParams.brandId = carBrandId; 94 executeAjax(global.url.carBrandList, requestParams, function (data) { 95 // 给data风骚地排个序 96 data.sort(keysrt("firstWord")); 97  98 var menuHtml = "<ul>"; 99 for (var index in data) {100 var menu = data[index];101 menuHtml += '<li id="cb_' + menu.carBrandId + '" value="' + menu.carBrandId + '" brand="' + menu.brand + '">';102 103 // 带价格的树104 if (_showPrice) {105 // 最后一级，添加选项框106 if (menu.level > 3) {107 menuHtml += '<input type="checkbox" name="resourceIds" value="' + menu.carBrandId + '" />';108 }109 menuHtml += '<span>' + menu.name + '</span>';110 111 // 最后一级，添加输入框112 if (menu.level == 4) {113 menuHtml += '<input type="text" maxlength="9">';114 }115 } else { // 不带价格的树116 menuHtml += '<input type="checkbox" name="resourceIds" value="' + menu.carBrandId + '" />';117 menuHtml += '<span>' + menu.name + '</span>';118 }119 120 menuHtml += "</li>";121 }122 menuHtml += "</ul>";123 $('#' + objId).append(menuHtml);124 $('#' + objId).attr('data-load', 'loaded');125 126 //汽车类型第一级加载完成后，初始化字符导航127 charNavArr = [];128 var fwdLast = '';//上一次的首字母129 130 for (var i in data) {131 var cobjTemp = {};132 if (fwdLast != data[i].firstWord) {133 fwdLast = data[i].firstWord;134 cobjTemp.firstWord = fwdLast;135 cobjTemp.targetId = 'cb_'+data[i].carBrandId;136 charNavArr.push(cobjTemp);137 }138 }139 if (times == 1) {140 initCharNav();141 // 点击保存事件142 $('.charNavSaveBtn').unbind().bind("click", function () {143 save();144 });145 }146 });147 148 }149 150 // 此处是风骚的数组对象排序151 var keysrt = function (propertyName) {152 retu function (object1, object2) {153 var value1 = object1[propertyName];154 var value2 = object2[propertyName];155 if (value2 < value1) {156 retu 1;157 }158 else if (value2 > value1) {159 retu -1;160 }161 else {162 retu 0;163 }164 }165 }166 167 // 保存事件168 var save = function(){169 // 确认后，执行回调函数170 if (_showPrice) {171 var res = getPriceResult();172 if (res.status) {173 _callback(res.data);174 } else {175 alert(res.error);176 retu;177 }178 } else {179 _callback(getNopriceResult());180 }181 //返回数据，然后隐藏182 $('#zc-sub-modal').modal('hide');183 }184 185 // 设置字符导航初始化186 var initCharNav = function () {187 var charNavHtml = '<ul id="charNavBar" class="charNavBar pagination">';188 for (var i in charNavArr) {189 charNavHtml += '<li><a href="#'+charNavArr[i].targetId+'">'+charNavArr[i].firstWord+'</a></li>';190 }191 charNavHtml += '<li><a class="modalGoTop">↑</a></li>';192 charNavHtml += '<button type="button" class="btn btn-primary charNavSaveBtn">保存</button>';193 charNavHtml += '</ul>';194 195 $('#zc-sub-modal').append(charNavHtml);196 197 $('.modalGoTop').on('click', function(e){198 $('#zc-sub-modal').animate({scrollTop: 0}, 500);199 });200 }201 202 // 统计带价格的返回数据203 var getPriceResult = function () {204 var result = {205 status : true,206 data : [],207 error : ''208 };209 var liTemp;210 var objTemp;211 $('.treeview-gray input:checkbox:checked').each(function (i) {212 liTemp = $(this).parent('li');213 objTemp = {};214 objTemp.carBrandId = liTemp.attr('value');215 objTemp.brand = liTemp.attr('brand');216 objTemp.carBrandName = liTemp.find('span').text();217 objTemp.unitPrice = liTemp.find('input:text').val();218 219 // 如果价格没有输入，返回保存失败，并返回没有输入的carBrandName220 if(objTemp.unitPrice == '') {221 result.status = false;222 result.error = '请输入 ' + objTemp.carBrandName + ' 的价格！';223 retu result;224 }225 result.data.push(objTemp);226 });227 retu result;228 }229 230 // 统计不带价格的返回数据231 var getNopriceResult = function () {232 var result = [];233 var liTemp;234 var objTemp;235 var flag1;236 var flag2;237 var flag3;238 var flag4;239 var level2Name;240 241 // 遍历4层242 $('#cb_0').children().children('li').children('input:checkbox').each(function (i1) {243 if ($(this).is(':checked')) {244 flag1 = true;245 } else {246 flag1 = false;247 }248 $(this).parent().children().children('li').children('input:checkbox').each(function (i2) {249 if ($(this).is(':checked')) {250 flag1 = false;251 flag2 = true;252 } else {253 flag2 = false;254 }255 // 获取第二级的名字，给第三级使用256 liTemp = $(this).parent('li');257 level2Name = liTemp.children('span').text();258 $(this).parent().children().children('li').children('input:checkbox').each(function (i3) {259 if ($(this).is(':checked')) {260 flag1 = false;261 flag2 = false;262 flag3 = true;263 } else {264 flag3 = false;265 }266 $(this).parent().children().children('li').children('input:checkbox').each(function (i4) {267 if ($(this).is(':checked')) {268 flag1 = false;269 flag2 = false;270 flag3 = false;271 flag4 = true;272 } else {273 flag4 = false;274 }275 if (flag4) {276 liTemp = $(this).parent('li');277 objTemp = {};278 objTemp.carBrandId = liTemp.attr('value');279 objTemp.brand = liTemp.attr('brand');280 //objTemp.carBrandName = liTemp.children('span').text();281 objTemp.carBrandName = objTemp.brand + ' ' + liTemp.children('span').text();282 result.push(objTemp);283 }284 });285 if (flag3) {286 liTemp = $(this).parent('li');287 objTemp = {};288 objTemp.carBrandId = liTemp.attr('value');289 objTemp.brand = liTemp.attr('brand');290 //objTemp.carBrandName = liTemp.children('span').text();291 objTemp.carBrandName = objTemp.brand + ' ' + level2Name + ' ' + liTemp.children('span').text();292 result.push(objTemp);293 }294 });295 if (flag2) {296 //liTemp = $(this).parent('li');297 objTemp = {};298 objTemp.carBrandId = liTemp.attr('value');299 objTemp.brand = liTemp.attr('brand');300 //objTemp.carBrandName = objTemp.brand + liTemp.children('span').text();301 objTemp.carBrandName = objTemp.brand + ' ' + liTemp.children('span').text();302 result.push(objTemp);303 }304 });305 if (flag1) {306 liTemp = $(this).parent('li');307 objTemp = {};308 objTemp.carBrandId = liTemp.attr('value');309 objTemp.brand = liTemp.attr('brand');310 objTemp.carBrandName = liTemp.children('span').text();311 result.push(objTemp);312 }313 });314 315 retu result;316 }317 318 319 // 给目录树绑定点击事件320 $(document).on('click', '#resourceId li', function (e) {321 322 323 e.stopPropagation();324 325 if ($(this).attr('open')) {326 $(this).removeAttr('open');327 $(this).children('ul').hide();328 } else {329 $(this).attr('open', 'opened');330 $(this).children('ul').show();331 }332 var objId = $(this).attr('id');333 var carBrandId = $(this).attr('value');334 //加载过的不执行335 if ($(this).attr('data-load')) {336 retu;337 }338 loadSubMenu(objId, carBrandId);339 });340 341 // 点击多选框时候不下拉342 $(document).on('click', 'input[type="checkbox"]', function (e) {343 e.stopPropagation();344 });345 346 window.CarTree = CarTree;347 }());

 

调用方法：

carTree = new CarTree(false, {}, function (data) {console.log(data); });