IE9+的树状下拉菜单，支持多选

//JS核心代码
function treeBox(Config){var el=eval(Config.el);var w=Config.width;var h=Config.height;var data=Config.data;var topData=Config.topData;var sl=Config.selectedNum;if(w==null){var wLv1=160;var wLv2=160;var wLv3=160;var wSelectde=200;}else{var wLv1=w.lv1;var wLv2=w.lv2;var wLv3=w.lv3;var wSelectde=w.selected;}
if(h==null){h=280}
if(sl==null){sl=3}
var wBox=wLv1+wLv2+wLv3+wSelectde;var lv_1='';var lv_2_parent='';var lv_3_parent='';var lv_0='';for(var k in data){lv_1+=''+data[k].name+'';lv_2_parent+='
'
for(var i in data[k].children){lv_3_parent+='
'}}
var html='';html+='
';if(topData==null){}else{for(var k in topData){lv_0+=''+topData[k].name+''}
html+='
常用工种类型
'+lv_0+'
';}
html+='';html+='';html+='';html+='';html+='';html+='
'+lv_1+'
'+lv_2_parent+'
'+lv_3_parent+'
';html+='
已选择 ( 0 )清空
';html+='
';html+='
关闭确定
';html+='
';$("#treeBox").append(html);var n=0;for(var k in data){var lv_2_son='';for(var i in data[k].children){n++;lv_2_son+=''+data[k].children[i].name+'';var lv_3_son='';for(var j in data[k].children[i].children){var v=data[k].children[i].children[j].id;var name=data[k].children[i].children[j].name;var uid=data[k].children[i].children[j].uid;lv_3_son+=''+name+''}
$(".lv3-parent").eq(n-1).append(lv_3_son);}
$(".lv2-parent").eq(k).append(lv_2_son)}
$(".lv2-parent").eq(0).addClass("tree-show");$(".lv3-parent").eq(0).addClass("tree-show");$(".lv1").eq(0).addClass("tree-active");$(".lv2").eq(0).addClass("tree-active");$(".lv1").on('click',function(){var v=$(this).data('id');$(".lv2-parent").each(function(index){if($(this).data('parent')==v){$(".lv2-parent").removeClass("tree-show");$(".lv2-parent").eq(index).addClass("tree-show");$(".lv2-parent").eq(index).children().eq(0).click();}});$(".lv1").removeClass("tree-active");$(this).addClass("tree-active");$(".tree").scrollTop(0);})
$(".lv2").on('click',function(){var v=$(this).data('id');$(".lv3-parent").each(function(index){if($(this).data('parent')==v){$(".lv3-parent").removeClass("tree-show");$(".lv3-parent").eq(index).addClass("tree-show")}});$(".lv2").removeClass("tree-active");$(this).addClass("tree-active");$(".tree").scrollTop(0);});var max=sl-1;$(".lv3").on('change',function(){var v=$(this).val();var name=$(this).data('name');var uid=$(this).data('uid');var l=$(".tree-selected-item").length;if($(this).prop('checked')){if(lvar item='
'+name+'
'
$(".tree-selected").append(item);}else if(l==max){var item='
'+name+'
'
$(".tree-selected").append(item);$(".lv3:not(:checked)").prop("disabled",true);}
$(".selectedNum").text(l+1);}else{$(".tree-selected-item").each(function(index){if($(this).data('id')==v){$(".tree-selected-item").eq(index).remove()}});$(".tree-top-item").each(function(index){if($(this).data('id')==v){$(this).attr("tree-top-selected",false);$(this).removeClass('tree-active');}});$(".lv3:not(:checked)").prop("disabled",false);$(".selectedNum").text(l-1);}});$(".tree-top-item").on('click',function(){var v=$(this).data('id');var uid=$(this).data('uid');var name=$(this).text();var l=$(".tree-selected-item").length;var top_s=$(this).attr('tree-top-selected');if(top_s=='true'){return false}else{if(lthis).attr('tree-top-selected',true);$(this).addClass('tree-active');var item='
'+name+'
'
$(".tree-selected").append(item);$(".lv3").each(function(index){if($(this).val()==v){$(this).prop("checked",true)}});$(".selectedNum").text(l+1);}else if(l==max){$(this).attr('tree-top-selected',true);$(this).addClass('tree-active');var item='
'+name+'
'
$(".tree-selected").append(item);$(".lv3").each(function(index){if($(this).val()==v){$(this).prop("checked",true)}});$(".lv3:not(:checked)").prop("disabled",true);$(".selectedNum").text(l+1);}}})
$(".tree-del-all").on('click',function(){$(".lv3").prop("checked",false);$(".lv3:not(:checked)").prop("disabled",false);$(".selectedNum").text(0);$(".tree-selected").empty();$(".tree-top-item").attr('tree-top-selected',false);$(".tree-top-item").removeClass('tree-active');});$("body").on('click','.tree-del-this',function(){var v=$(this).parent().data('id');var l=$(".tree-selected-item").length;$(".lv3").each(function(index){if($(this).val()==v){$(this).prop("checked",false)}});$(".tree-top-item").each(function(index){if($(this).data('id')==v){$(this).attr("tree-top-selected",false);$(this).removeClass('tree-active');}});$(this).parent().remove();$(".lv3:not(:checked)").prop("disabled",false);$(".selectedNum").text(l-1);});var off=true;if(el.is("input")){el.focus(function(){$(".treeBox").css({'display':'block'})});}else{el.on('click',function(){if(off){$(".treeBox").css({'display':'block'});off=false}else{$(".treeBox").css({'display':'none'});off=true}})}
$(".tree-close").on('click',function(){$(".treeBox").css({'display':'none'});$(".lv3").prop("checked",false);$(".lv3:not(:checked)").prop("disabled",false);$(".selectedNum").text(0);$(".tree-selected").empty();$(".tree-top-item").attr('tree-top-selected',false);$(".tree-top-item").removeClass('tree-active');off=true;});var selected=[];var strSelected='';$(".tree-confirm").on('click',function(){selected=[];strSelected='';$(".tree-selected-item").each(function(){var name=$(this).data('name');var v=$(this).data('id');var uid=$(this).data('uid');selected.push({name:name,value:v,uid:uid});strSelected+=name+'&';});strSelected=strSelected.substring(0,strSelected.length-1);if(el.is("input")){el.val(strSelected)}else{if(strSelected==''){el.text('全部')}else{el.text(strSelected)}}
Config.confirm(selected);off=true;$(".treeBox").css({'display':'none'})})}

这里只贴出JS代码 demo地址：https://github.com/CNbozi/Treeview/     

转载于:https://www.cnblogs.com/Desmondexperience/p/10919287.html