2023年7月9日发(作者：)

jquery点击⽂本框弹出多功能树形⽬录插件上篇写了⼀个树形⽬录的制作,平时还会遇到⼀种点击⽂本框在下⽅弹出⼀个树形⽬录的结构,于是结合上篇实现了了⼀个类似下拉列表的功能插件使⽤起来便捷简单,只需要引⼊对应的js和css⽂件如下⽂两个⽂本框:必填属性:class="simpleTree"

引⼊js⽂件: 在body内引⼊ Css样式⽂件默认与同⼀路径即可;若要修改在js中找到 loadCss()修改即可 注意:该css⽂件不需要引⼊到页⾯body{ margin: 0px; padding: 0px;}div{ background-color: white;margin: 0px;padding: 0px;}ul{list-style: none;margin: 0px;padding: 0px; }li{list-style: none;margin-top: 3px;padding: 0px; }

input{width:14px; height:14px; margin:0px;float:left;}

ul li i{width:16px; height:16px; margin-right:5px; float:left;background:url("img/") no-repeat 0 0;}ul li {background:url("./img/") no-repeat 0 0;}a{ text-decoration: none; color:#666; opacity: 0.9;}.fold{ display:none;}

加载数据⽅法:调⽤setData()⽅法 传⼊ids格式数据(id,pid,name三项必填,其余可⾃⾏添加)若要取得其余属性的值 可在js中找到nodeClick()修改即可 var ids=[ {id:1,pid:0,name:'⾏政档案'}, {id:2,pid:0,name:'财务档案'}, {id:3,pid:0,name:'研发档案'}, {id:4,pid:0,name:'运营档案'}, {id:12,pid:1,name:'⾏政中⼼明细'}, {id:121,pid:12,name:'2015年⾏政中⼼财务报告'}, {id:123,pid:12,name:'2016年⾏政中⼼财务报告'}, {id:122,pid:12,name:'2017年⾏政中⼼财务报告'}, {id:1221,pid:122,name:'2017年⾏政中⼼报告明细'}, {id:13,pid:1,name:'统计⼯作'}, {id:131,pid:13,name:'2017年统计⼯作统计报告'}, {id:21,pid:2,name:'财务中⼼明细'}, {id:31,pid:3,name:'研发中⼼明细'} ]; var ids2=[ {id:1,pid:0,name:'⾏政档案'}, {id:2,pid:0,name:'财务档案'}, {id:31,pid:2,name:'研发档案'}, {id:11,pid:1,name:'研发档案'}, {id:41,pid:0,name:'运营档案'} ]; $("#test").setData(ids) $("#test2").setData(ids2)

源码如下:(function($){ $.({ selTree:function(options,sender){

var tree= SimpleTree(options,sender,$(this).attr("id"));

}, setData:function(data){ var arr="[" for (var i=0;i<;i++) { arr+=ify(data[i])+","; } if(arr!="[") arr=(0,-1) arr+="]"

$(this).attr("data",arr); } }) var defaults={ onlyLeaf:false, onlyIcon:false, checkBox:false, data:[], div:null, frameDiv:null, divID:'', inpID:null//input id } var SimpleTree=function(options,sender,inpID){ var opt={};

=options; iv=sender; =odes[0]; =$().attr("id"); af=$().attr("onlyLeaf"); on=$().attr("onlyIcon"); ox=$().attr("checkBox"); =inpID; defaults=$.extend({},defaults,opt); init(defaults); addListner(defaults); } var addListner=function(opt){

var divId=;

//i图标标签添加点击事件 $(mentById(divId)).find(".item").click(function(){

show(this,1,opt);

}) // 节点悬浮事件 $(mentById(divId)).find("a").hover(function(){ oundColor="rgb(179,231,255)" },function(){ oundColor="white"

})

//节点点击事件 $(mentById(divId)).find("a").click(function(){ var a=$(this);

var onlyIcon=on; var onlyLeaf=af;

//只能点击图标 才展开 if(onlyIcon=="false"){

var ibiao=("i"); show(ibiao,0,opt); } //只能选取叶⼦结点 if(onlyLeaf=="true"){

var leaf=("leaf"); if(leaf=="true"){ if(typeof(nodeClick)=="function"){ nodeClick(a,opt); }

} return; }

if(typeof(nodeClick)=="function"){ nodeClick(a,opt); }

})

//checkbox点击事件 $(mentById(divId)).find("input[type=checkbox]").click(function(){

//点击⽗元素 ⼦元素全部选上 var inputs=mentsByTagName("input"); for(var i=0;i<;i++){ if($(this).is(":checked")) $(inputs[i]).prop("checked",true);//推荐使⽤prop else $(inputs[i]).prop("checked",false); } })

} var init=function(opt){ var div=; var dul=Element("ul"); Left="0px"; Child(dul); for (var i=0;i<;i++) { var li=Element("li"); var ul=Element("ul"); var a=Element("a");

var check=false,box=null;

$(a).attr("href","javascript:void(0)"); var that=[i]; $(a).text(); $(a).attr("leaf","true");//默认都是叶⼦结点 //遍历数据 添加属性 for(var pro in that){ if(pro!="id") $(a).attr(pro,that[pro]) } $(li).append(a); $(li).attr("id",); Left="21px";//默认 if($(div).attr("checkBox")=="true"){ check=true; } if(check){ box=Element("input");

ribute("type","checkbox"); $(box).attr("name",); $(a).append(box); }

//添加节点 var parentId=mentById();

if(parentId){ var ibiao=mentsByTagName("i");

//添加标签图标 if(<1){ ibiao=Element("i");

//⽗元素的⼦元素 :a标签 在开头添加元素 $(parentId).find("a").prepend(ibiao); $(ibiao).addClass("item"); //⾮叶⼦节点 $(ibiao).parent().attr("leaf","false"); //含有⼦元素 修改为不是叶⼦结点 Left="0px";//默认

} // alert(Left);

Child(li); Left=14+"px"; ame="fold ul-"+; Child(ul);

}else{ Left="21px";//默认 $(div).children(0).append(li); } }

}

var show=function(sender,flag,opt){

var icon=on; //只能点击图标 才展开 if(icon=="false"){ if(flag==1) return; }

var ibiao=$(sender); var par=$(sender).parent().parent();//li标签 var id=("id"); //alert(id) (".ul-"+id).slideToggle(300);//ul元素可见 Class("unfold");//切换图标 } var nodeClick= function (a,opt){ var val=$(a).text(); var id=$(a).attr("id"); var pid=$(a).attr("pid"); var inpID= ; var inp=mentById(inpID) $(inp).val(val) } $(".simpleTree").click(function(){ var mTop=$(this).offset().top; var mleft=$(this).offset().left; var cHeight=Height; if(!$(this).attr("id")){ $(this).attr("id","inp"+createID()) } var id=$(this).attr("id")+"-1"; var frameDiv=mentById(id);

if(!frameDiv){ frameDiv=Element("iframe"); ribute("frameborder","0") ribute("id",id); ribute("name",id);

y="none"; ="1px solid #69d1cb"; ="0px"; g="0px"; on="absolute";

=Width+"px"; $(frameDiv).css("left",mleft); $(frameDiv).css("top",cHeight+mTop+5); var isFirefox=rCase().indexOf("FIREFOX");//是否是⽕狐浏览器 var isIE=rCase().indexOf("MSIE");//ie if(isFirefox>=0){ $(frameDiv).attr("src","#")//⽕狐浏览器不加src属性 渲染较慢 ⽆法获得frame的document 导致添加元素失败 //chrome浏览器 360急速模式 默认# 为⾃⾝页⾯ } Child(frameDiv); var Frame= mentById(id).nt; //Frame= mentById(id).contentDocument;// //加载样式表 loadCss(Frame,"") var divf=Element("div") ribute("id",id+"div") if($(this).attr("onlyLeaf")=="true") $(divf).attr("onlyLeaf","true"); else $(divf).attr("onlyLeaf","false"); if($(this).attr("onlyIcon")=="true") $(divf).attr("onlyIcon","true"); else $(divf).attr("onlyIcon","false"); if($(this).attr("checkBox")=="true") $(divf).attr("checkBox","true"); else $(divf).attr("checkBox","false"); $(divf).html(""); if(){ $().append(divf); } var data=$(this).attr("data"); data= $.parseJSON(data) $(this).selTree(data,Frame); } $(frameDiv).slideToggle();

})

var loadCss =function (ele, url ){

var link = Element("link");

= "text/css";

= "stylesheet";

= url;

var heads= mentsByTagName("head"); if(heads){ try{ heads[0].appendChild( link );

} catch(e){ // Child(link) } } }var createID= function (){ var g = "xxxx"; //g⾥⾯包含x while (/x/.test(g))

g = e(/x/, "abcdef".substr(parseInt(() * 16), 1)); return g; }})(jQuery)效果如图: