产品添加页面，需要选择车型。在bootStrap的modal上弹出子modal来使用。
车型一共有4级目录。要使用目录树。
然后分活动和商品两种，需要能够通过不通参数来调用该组件。
车型品牌要使用字母导航。
技术实现
数据都是后端传json过来，我们ajax获取然后操作。
由于车型总数据有几万条以上，不可能一次性请求过来。这里我们使用异步的方式，每点击一次目录节点，加载它的下一级。
这里我们用两个参数来控制活动和商品的不同加载。_showPrice和opened
后端传过来的第一级数据是车型品牌，其中有首字母的字段。字母导航的初始化，就是把这个数据用firstWord属性来排序，然后忽略掉其他首字母相同的元素。
对于活动类型，需要返回所勾选的最低一级的数据。（勾选奥迪和奥迪A6，则只返回A6的意思），这里用了整整4层循环。不过它是根据是否有checked来遍历的，速度不慢。
/**
*Createdbynuenfengon2016/5/23.
*车型选择组件
*参数：
*showPrice是否要输入价格（不输入价格的从品牌开始就有选项框，没有全选功能）
*params外部传入的对象
*callback回调函数
*/
(function(){
varuriCarBrand=global.url.carBrandList;
//varuri=uriCarBrand.url;
varopened=false;//当前页面是否打开过本组件
var_callback;//回调函数
varrequestParams;//请求时要使用的参数
var_showPrice;//是否要输入价格
varlastShowPrice;//前一次打开状态
varcharNavArr;//字母导航数组
functionCarTree(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");
varstr='
str+='
str+="
varobjId='cb_0';
varcarBrandId=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('emptyme');
//加载子菜单
varloadSubMenu=function(objId,carBrandId,times){
requestParams.brandId=carBrandId;
executeAjax(global.url.carBrandList,requestParams,function(data){
//给data风骚地排个序
data.sort(keysrt("firstWord"));
varmenuHtml="
for(varindexindata){
varmenu=data[index];
menuHtml+='
//带价格的树
if(_showPrice){
//最后一级，添加选项框
if(menu.level>3){
menuHtml+='';
menuHtml+=''+menu.name+'';
//最后一级，添加输入框
if(menu.level==4){
}else{//不带价格的树
menuHtml+="
$('#'+objId).append(menuHtml);
$('#'+objId).attr('data-load','loaded');
//汽车类型第一级加载完成后，初始化字符导航
charNavArr=[];
varfwdLast='';//上一次的首字母
for(variindata){
varcobjTemp={};
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(){
//此处是风骚的数组对象排序
varkeysrt=function(propertyName){
returnfunction(object1,object2){
varvalue1=object1[propertyName];
varvalue2=object2[propertyName];
if(value2 return1; elseif(value2>value1){ return-; else{ return; //保存事件 varsave=function(){ //确认后，执行回调函数 varres=getPriceResult(); if(res.status){ _callback(res.data); alert(res.error); _callback(getNopriceResult()); //返回数据，然后隐藏 $('#zc-sub-modal').modal('hide'); //设置字符导航初始化 varinitCharNav=function(){ varcharNavHtml=' for(variincharNavArr){ charNavHtml+=' charNavHtml+='保存'; $('#zc-sub-modal').append(charNavHtml); $('.modalGoTop').on('click',function(e){ $('#zc-sub-modal').animate({scrollTop:},); //统计带价格的返回数据 vargetPriceResult=function(){ varresult={ status:true, data:[], error:'' }; varliTemp; varobjTemp; $('.treeview-grayinput: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+'的价格！'; returnresult; result.data.push(objTemp); //统计不带价格的返回数据 vargetNopriceResult=function(){ varresult=[]; varflag1; varflag2; varflag3; varflag4; varlevelName; //遍历4层 $('#cb_').children().children('li').children('input:checkbox').each(function(i){ if($(this).is(':checked')){ flag=true; flag=false; $(this).parent().children().children('li').children('input:checkbox').each(function(i){ //获取第二级的名字，给第三级使用 level2Name=liTemp.children('span').text(); $(this).parent().children().children('li').children('input:checkbox').each(function(i3){ flag1=false; flag2=false; flag3=true; flag3=false; $(this).parent().children().children('li').children('input:checkbox').each(function(i4){ flag4=true; flag4=false; if(flag4){ //objTemp.carBrandName=liTemp.children('span').text(); objTemp.carBrandName=objTemp.brand+''+liTemp.children('span').text(); result.push(objTemp); if(flag){ objTemp.carBrandName=objTemp.brand+''+levelName+''+liTemp.children('span').text(); if(flag2){ //liTemp=$(this).parent('li'); //objTemp.carBrandName=objTemp.brand+liTemp.children('span').text(); if(flag1){ objTemp.carBrandName=liTemp.children('span').text(); //给目录树绑定点击事件 $(document).on('click','#resourceIdli',function(e){ e.stopPropagation(); if($(this).attr('open')){ $(this).removeAttr('open'); $(this).children('ul').hide(); $(this).attr('open','opened'); $(this).children('ul').show(); varobjId=$(this).attr('id'); varcarBrandId=$(this).attr('value'); //加载过的不执行 if($(this).attr('data-load')){ loadSubMenu(objId,carBrandId); //点击多选框时候不下拉 $(document).on('click','input[type="checkbox"]',function(e){