树形插件中,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;}