BootStrap实现树形目录组件代码详解
编程学习 2021-07-04 19:59www.dzhlxh.cn编程入门
这篇文章主要介绍了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 = '<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");
// });
// }
/