介紹:簡單樹形結構 可動態修改數據 實現點擊事件 只選擇葉子結點 以及多選框 等事件
使用規則如下:
onlyLeaf屬性 |
葉子結點--值為true時:只能選擇葉子結點..值為false時:都可選擇 默認為false |
onlyIcon屬性 |
圖標屬性--當為true時:點擊圖標才可顯示下一級節點..值為false時 :點擊文字也可顯示下一級節點 |
checkBox屬性 |
復選框屬性--當為true時:出現節點復選框..值為false時 :不顯示 默認false |
1.引入樣式表文件
<style type="text/css">
ul{list-style: none;margin: 0px;padding: 0px; } li{list-style: none;margin-top: 3px;padding: 0px; } i{width:16px; height:16px; margin-right:5px; float:left;} input{width:14px; height:14px; margin:0px;float:left;} i{background:url(img/add.png) no-repeat 0 0;} ul i.unfold {background:url(img/reduce.png) no-repeat 0 0;} a{ text-decoration: none; color:#666; opacity: 0.9;} .fold{ display:none;} </style>
2. 引入:jquery-1.9.1.min.js
3.默認 樹形容器div
<div id="tree" onlyLeaf="false" onlyIcon="false" checkBox="false" style="border: 1px solid #69d1cb;margin: 0px; padding: 0px;width: 250px;height:500px;overflow: auto; "> </div>
4.js代碼如下:
(對於ids里面的json數據 格式如下 可根據需要添加其他屬性,添加后即可 最后都會添加到標簽內)
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:'2017年行政中心財務報告'}, {id:123,pid:12,name:'2017年行政中心財務報告'}, {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:'研發中心明細'} ]; init(ids); function init(data){ var dul=document.createElement("ul"); dul.marginLeft="0px"; document.getElementById("tree").appendChild(dul); for (var i=0;i<data.length;i++) { var li=document.createElement("li"); var ul=document.createElement("ul"); var a=document.createElement("a"); var div=document.getElementById("tree"); var check=false,box=null; $(a).attr("href","javascript:void(0)"); var that=data[i]; $(a).text(that.name); $(a).attr("leaf","true");//默認都是葉子結點 //遍歷數據 添加屬性 for(var pro in that){ if(pro!="id") $(a).attr(pro,that[pro]) } $(li).append(a); $(li).attr("id",that.id); li.style.marginLeft="21px";//默認 if($(div).attr("checkBox")=="true"){ check=true; } if(check){ box=document.createElement("input"); box.setAttribute("type","checkbox"); $(box).attr("name",that.pid); $(a).append(box); } //添加節點 var parentId=document.getElementById(that.pid); if(parentId){ var ibiao=parentId.getElementsByTagName("i"); //添加標簽圖標 if(ibiao.length<1){ ibiao=document.createElement("i"); //父元素的子元素 :a標簽 在開頭添加元素 $(parentId).find("a").prepend(ibiao); $(ibiao).addClass("item"); //非葉子節點 $(ibiao).parent().attr("leaf","false"); //含有子元素 修改為不是葉子結點 parentId.style.marginLeft="0px";//默認 } // alert(parentId.parentNode.style.marginLeft); ul.appendChild(li); ul.style.marginLeft=14+"px"; ul.className="fold ul-"+that.pid; parentId.appendChild(ul); }else{ li.style.marginLeft="21px";//默認 $("#tree").children(0).append(li); } } //i圖標標簽添加點擊事件 $(".item").click(function(){ show(this,1); }) // 節點懸浮事件 $("#tree a").hover(function(){ this.style.backgroundColor="rgb(179,231,255)" },function(){ this.style.backgroundColor="white" }) //節點點擊事件 $("#tree a").click(function(){ var a=$(this); var div=document.getElementById("tree"); //只能點擊圖標 才展開 if($(div).attr("onlyIcon")=="false"){ var ibiao=a.find("i");show(ibiao); } //只能選取葉子結點 if($(div).attr("onlyLeaf")=="true"){ var leaf=a.attr("leaf"); if(leaf=="true"){ if(typeof(nodeClick)=="function"){ nodeClick(a); } } return; } if(typeof(nodeClick)=="function"){ nodeClick(a); } }) //checkbox點擊事件 $("#tree input[type=checkbox]").click(function(){ //點擊父元素 子元素全部選上 var inputs=this.parentElement.parentElement.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ if($(this).is(":checked")) $(inputs[i]).prop("checked",true);//推薦使用prop else $(inputs[i]).prop("checked",false); } }) } function show(sender,flag){ var div=document.getElementById("tree"); //只能點擊圖標 才展開 if($(div).attr("onlyIcon")=="false"){ if(flag==1) return; } var ibiao=$(sender); var par=$(sender).parent().parent();//li標簽 var id=par.attr("id"); //alert(id) par.find(".ul-"+id).slideToggle(300);//ul元素可見 ibiao.toggleClass("unfold");//切換圖標 } function nodeClick(sender){//點擊事件 var val=$(sender).text(); var id=$(sender).attr("id"); var pid=$(sender).attr("pid"); $("#textDiv").html("你當前選擇的節點是:"+val+" pid:"+pid) }
普通效果:
多選框效果:
//點擊事件 可自己添加nodeClick(sender)事件 其中sender 為當前點擊對象
效果如下:
