BootStrap实现树形目录组件代码详解


Posted in Javascript onJune 21, 2016

需求描述

产品添加页面,需要选择车型。在bootStrap的modal上弹出子modal来使用。

车型一共有4级目录。要使用目录树。

然后分活动和商品两种,需要能够通过不通参数来调用该组件。

车型品牌要使用字母导航。

BootStrap实现树形目录组件代码详解

技术实现

数据都是后端传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实现树形目录组件代码详解的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
vue.js 实现输入框动态添加功能
Jun 25 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
JS array数组检测方式解析
May 19 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 #Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 #Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 #Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 #Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 #Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 #Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
Python中property函数用法实例分析
2018/06/04 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python初步实现word2vec操作
2020/06/09 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
如何进行Linux分区优化
2016/09/13 面试题
银行实习的自我鉴定
2013/12/10 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
初级会计求职信范文
2014/02/15 职场文书
职称评定自我鉴定
2014/03/18 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
煤矿安全承诺书
2014/05/22 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2014年标准化工作总结
2014/12/17 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS