bootStrap树形目录组件
Posted 暖风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootStrap树形目录组件相关的知识，希望对你有一定的参考价值。
需求描述
产品添加页面，需要选择车型。在bootStrap的modal上弹出子modal来使用。
车型一共有4级目录。要使用目录树。
然后分活动和商品两种，需要能够通过不通参数来调用该组件。
车型品牌要使用字母导航。
技术实现
数据都是后端传json过来，我们ajax获取然后操作。
由于车型总数据有几万条以上，不可能一次性请求过来。这里我们使用异步的方式，每点击一次目录节点，加载它的下一级。
这里我们用两个参数来控制活动和商品的不同加载。_showPrice和opened
后端传过来的第一级数据是车型品牌，其中有首字母的字段。字母导航的初始化，就是把这个数据用firstWord属性来排序，然后忽略掉其他首字母相同的元素。
对于活动类型，需要返回所勾选的最低一级的数据。（勾选奥迪和奥迪A6，则只返回A6的意思），这里用了整整4层循环。不过它是根据是否有checked来遍历的，速度不慢。
1 /** 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 return function (object1, object2) { 153 var value1 = object1[propertyName]; 154 var value2 = object2[propertyName]; 155 if (value2 < value1) { 156 return 1; 157 } 158 else if (value2 > value1) { 159 return -1; 160 } 161 else { 162 return 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 return; 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 // 如果价格没有输入，返回保存失败，并返回没有输入的carBrandName 220 if(objTemp.unitPrice == \'\') { 221 result.status = false; 222 result.error = \'请输入 \' + objTemp.carBrandName + \' 的价格！\'; 223 return result; 224 } 225 result.data.push(objTemp); 226 }); 227 return 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 return 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 return; 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); });
以上是关于bootStrap树形目录组件的主要内容，如果未能解决你的问题，请参考以下文章