需求描述
产品添加页面,需要选择车型。在bootStrap的modal上弹出子modal来使用。
车型一共有4级目录。要使用目录树。
然后分活动和商品两种,需要能够通过不通参数来调用该组件。
车型品牌要使用字母导航。
技术实现
数据都是后端传json过来,我们ajax获取然后操作。
由于车型总数据有几万条以上,不可能一次性请求过来。这里我们使用异步的方式,每点击一次目录节点,加载它的下一级。
这里我们用两个参数来控制活动和商品的不同加载。_showPrice和opened
后端传过来的第一级数据是车型品牌,其中有首字母的字段。字母导航的初始化,就是把这个数据用firstWord属性来排序,然后忽略掉其他首字母相同的元素。
对于活动类型,需要返回所勾选的最低一级的数据。(勾选奥迪和奥迪A6,则只返回A6的意思),这里用了整整4层循环。不过它是根据是否有checked来遍历的,速度不慢。
/** * Created by nuenfeng on 2016/5/23. * 车型选择组件 * 参数: * showPrice 是否要输入价格(不输入价格的从品牌开始就有选项框,没有全选功能) * params 外部传入的对象 * callback 回调函数 */ (function () { var uriCarBrand = global.url.carBrandList; //var uri = uriCarBrand.url; var opened = false; //当前页面是否打开过本组件 var _callback; //回调函数 var requestParams; //请求时要使用的参数 var _showPrice; //是否要输入价格 var lastShowPrice; //前一次打开状态 var charNavArr; //字母导航数组 function CarTree(showPrice, params, callback) { // 没打开过,初始化; 打开过,直接显示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(); //设置大模态框 $(\'#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 class=\"form-horizontal form-label-left\">\'; str += \'<ul id=\"resourceId\" class=\"treeview-gray\">\' str += \'<li id=\"cb_\"><span>汽车品牌选择</span>\'; str += \"</li>\" str += \'</ul>\' str += \'</form>\'; var objId = \'cb_0\'; var carBrandId = 0; loadSubMenu(objId, carBrandId, 1); //1 表示第一次加载,用于加载成功后判断时候要初始化字母导航 $(\'#zc-sub-modal-body\').html(str); $(\'#zc-sub-modal\').modal({ keyboard: false, show: true }); // 点击保存事件 $(\'#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){//选中 则其上层节点全部展开并选中 // //上级选中 // $(this).parents(\"li\").each(function(){ // $(this).find(\"input[type=checkbox]:first\").attr(\"checked\",true) // }); // } else { // //下级取消选中 // $(this).siblings(\"ul\").find(\"input[type=checkbox]\").each(function(){ // $(this).removeAttr(\"checked\"); // }); // } //}); //隐藏子窗口后 保持父窗口的滚动 $(\"#zc-sub-modal\").on(\"hidden.bs.modal\", function () { $(\'body\').addClass(\'modal-open\') }); } CarTree.prototype.empty = function () { opened = false; console.log(\'empty me\'); } //加载子菜单 var loadSubMenu = function (objId, carBrandId, times) { requestParams.brandId = carBrandId; executeAjax(global.url.carBrandList, requestParams, function (data) { // 给data风骚地排个序 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 + \'\">\'; // 带价格的树 if (_showPrice) { // 最后一级,添加选项框 if (menu.level > 3) { menuHtml += \'<input type=\"checkbox\" name=\"resourceIds\" value=\"\' + menu.carBrandId + \'\" />\'; } menuHtml += \'<span>\' + menu.name + \'</span>\'; // 最后一级,添加输入框 if (menu.level == 4) { menuHtml += \'<input type=\"text\" maxlength=\"\">\'; } } else { // 不带价格的树 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\'); //汽车类型第一级加载完成后,初始化字符导航 charNavArr = []; var fwdLast = \'\'; //上一次的首字母 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(); // 点击保存事件 $(\'.charNavSaveBtn\').unbind().bind(\"click\", function () { save(); }); } }); } // 此处是风骚的数组对象排序 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 save = function(){ // 确认后,执行回调函数 if (_showPrice) { var res = getPriceResult(); if (res.status) { _callback(res.data); } else { alert(res.error); return; } } else { _callback(getNopriceResult()); } //返回数据,然后隐藏 $(\'#zc-sub-modal\').modal(\'hide\'); } // 设置字符导航初始化 var initCharNav = function () { var charNavHtml = \'<ul id=\"charNavBar\" class=\"charNavBar pagination\">\'; for (var i in charNavArr) { charNavHtml += \'<li><a href=\"#\'+charNavArr[i].targetId+\'\">\'+charNavArr[i].firstWord+\'</a></li>\'; } charNavHtml += \'<li><a class=\"modalGoTop\">↑</a></li>\'; charNavHtml += \'<button type=\"button\" class=\"btn btn-primary charNavSaveBtn\">保存</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; $(\'.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(); // 如果价格没有输入,返回保存失败,并返回没有输入的carBrandName if(objTemp.unitPrice == \'\') { result.status = false; result.error = \'请输入 \' + objTemp.carBrandName + \' 的价格!\'; return result; } result.data.push(objTemp); }); return result; } // 统计不带价格的返回数据 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(\'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; } // 获取第二级的名字,给第三级使用 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; } // 给目录树绑定点击事件 $(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\'); //加载过的不执行 if ($(this).attr(\'data-load\')) { return; } loadSubMenu(objId, carBrandId); }); // 点击多选框时候不下拉 $(document).on(\'click\', \'input[type=\"checkbox\"]\', function (e) { e.stopPropagation(); }); window.CarTree = CarTree; }());
调用方法:
carTree = new CarTree(false, {}, function (data) { console.log(data); });
以上所述是小编给大家介绍的BootStrap实现树形目录组件代码详解的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持!
本文地址:https://www.stayed.cn/item/1770
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我