简单jquery树形插件

最新推荐文章于 2025-01-09 09:59:00 发布

原创最新推荐文章于 2025-01-09 09:59:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#树形插件 #简单树形插件 #js

js 专栏收录该内容

2 篇文章

订阅专栏

树形插件中，ztree 是做得很好的一个树形插件，基本功能都可以实现。仿照ztree ,参考网上的树形html，我也写了一个树形插件。

html

<html lang="en">
	<head>
		<meta charset="gbk">
	</head>
	<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.css" rel="stylesheet">
	
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
	<link href="css/navgitionatree.css" rel="stylesheet">
	<script src="js/jquery.navinit.js"></script>
<script type="text/javascript"><!--	  
		var zNodes =[{ id:1, pId:0, name:'首页',href:'components.html'},
					 { id:2, pId:0, name:'链接',href:'components.html'},
					 { id:3, pId:0, name:'下拉1',href:'null'},
                     { id:4, pId:3, name:'动作',href:'components.html'},
                     { id:5, pId:3, name:'其他动作',href:'components.html'},
                     { id:6, pId:2, name:'超级链接',href:'null'},
					 { id:9, pId:5, name:'ff',href:'null'}];
                
		//alert(zNodes);
		$(document).ready(function(){
			$.fn.tree.init($("#treeWell"),zNodes);
		});
--></script>
<body>
		<div id="treeWell" class="tree well" />
</body>
</html>

jquery.navinit.js

(function($){
		$.fn.tree = {
					init:function(obj,zNodes){
					var id ="id";
					var pId="pId";
					var children="children";
					var tmpmap =[];
					var r =[];
					
					for( i=0;i<zNodes.length;i++){
						tmpmap[zNodes[i][id]]=zNodes[i];
						
					}
					for(i=0;i<zNodes.length;i++){
						if(tmpmap[zNodes[i][pId]]){
							var a = tmpmap[zNodes[i][pId]];
							if(!a.hasOwnProperty('children')){
								tmpmap[zNodes[i][pId]][children]=[];
							}
							tmpmap[zNodes[i][pId]][children].push(zNodes[i]);
						}else{
							r.push(zNodes[i]);
						}					
					}
					/**上面代码将数据变成一颗树。
					 * r[0]=znode[1]
					 * r[1]=znode[2]->znode[2][children][0]=znode[6]
					 * r[2]=znode[3]->znode[3][children][0]=znode[4]
					 * 				-> znode[3][children][1]=znode[5]->znode[5][children][0]=znode[9]
					 */
					data.createhtml(obj,r);//把数变成html
					}
		},
		
		data ={
			createhtml:function(obj,r){	
				 var ul = $("<ul></ul>");
				for(var i=0;i<r.length;i++){
					if(r[i].hasOwnProperty('children')){
						var a =$("<a></a>").text(r[i]['name']);
						a.attr('href',r[i]['href']);
						
						var li = $("<li></li>");
						li.attr('id','tree'+r[i]['id']);
						
						var span=$("<span></span>");
						var objecti = $("<i></i>");

						if(r[i]['pId']=='0'){
							objecti.addClass("glyphicon glyphicon-folder-open");
						}else{
							objecti.addClass("gglyphicon glyphicon-minus-sign");
						}
						
						span.append(objecti);
						span.append(a);
						li.append(span);
						ul.append(li);
						var id = '#tree'+r[i]['pId'];
						var a = obj.find(id);
						if(a.length > 0){
							a.append(ul);
							if(!$(a).hasClass('parent_li')){
								a.addClass('parent_li');
								a.find(' > span').attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign');
								
								a.find(' > span').find(' > i').bind("click", function(){  
										var children = $(this).parent('span').parent('li.parent_li').find(' > ul > li');
									    if (children.is(":visible")) {
									      children.hide('fast');
									      $(this).parent('span').attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
									    } else {
									      children.show('fast');
									      $(this).parent('span').attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
									    }
									   /// e.stopPropagation();
									}); 
							}
						}else{
							obj.append(ul)
						}
						arguments.callee(obj,r[i]['children']);//callee 调用回自己
					}else{
						
						var a =$("<a></a>").text(r[i]['name']);
						a.attr('href',r[i]['href']);
						
						var li = $("<li></li>");
						li.attr('id','tree'+r[i]['id']);
						
						var span=$("<span></span>");
						var objecti = $("<i></i>");
						
						objecti.addClass("glyphicon glyphicon-leaf");
						span.append(objecti);
						span.append(a);
						li.append(span);
						ul.append(li);
						var id = '#tree'+r[i]['pId'];
						var a = obj.find(id);
						if(a.length > 0){
							a.append(ul);
							if(!$(a).hasClass('parent_li')){
								a.addClass('parent_li');
								a.find(' > span').attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign');
								
								a.find(' > span').find(' > i').bind("click", function(){  
										var children = $(this).parent('span').parent('li.parent_li').find(' > ul > li');
									    if (children.is(":visible")) {
									      children.hide('fast');
									      $(this).parent('span').attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
									    } else {
									      children.show('fast');
									      $(this).parent('span').attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
									    }
									    ///e.stopPropagation();
									}); 
							}
						}else{
							obj.append(ul)
						}
						
						
					}
				}
				
				return obj;
			}
		};
})(jQuery);

navitionatree.css

.tree {
  min-height:20px;
  padding:19px;
  margin-bottom:20px;
  background-color:#fbfbfb;
  border:1px solid #999;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
  list-style-type:none;
  margin:0;
  padding:10px 5px 0 5px;
  position:relative
}
.tree li::before, .tree li::after {
  content:'';
  left:-20px;
  position:absolute;
  right:auto
}
.tree li::before {
  border-left:1px solid #999;
  bottom:50px;
  height:100%;
  top:0;
  width:1px
}
.tree li::after {
  border-top:1px solid #999;
  height:20px;
  top:25px;
  width:25px
}
.tree li span {
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border:1px solid #999;
  border-radius:5px;
  display:inline-block;
  padding:3px 8px;
  text-decoration:none
}
.tree li.parent_li>span {
  cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
  border:0
}
.tree li:last-child::before {
  height:25px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
  background:#eee;
  border:1px solid #94a0b4;
  color:#000
}

#treeWell ul {  margin: 0 0 0px 5px;}