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

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

需求描述

产品添加页面，需要选择车型。在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 = '

str += '

str += '

str += "

str += '

str += '

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 = "

for (var index in data) {

var menu = data[index];

menuHtml += '

// 带价格的树

if (_showPrice) {

// 最后一级，添加选项框

if (menu.level > 3) {

menuHtml += '';

}

menuHtml += '' + menu.name + '';

// 最后一级，添加输入框

if (menu.level == 4) {

menuHtml += '';

}

} else { // 不带价格的树

menuHtml += '';

menuHtml += '' + menu.name + '';

}

menuHtml += "

}

menuHtml += "

$('#' + 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 = '

for (var i in charNavArr) {

charNavHtml += '

}

charNavHtml += '

charNavHtml += '保存';

charNavHtml += '

$('#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实现树形目录组件代码详解的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。