您的位置:首页 > Web前端 > JavaScript

js 根据层次码levelno递归生成树形结构的ul

2013-11-26 00:00 435 查看
javascript递归生成树形结构的ul;根据数组 json数据生成树形结构的ul
<script>
function create_nav_tree(data){
var temp='<ul id="tree_nav_ul" >';
for(i=0;i<data.rows.length;i++){
if(data.rows[i].levelno.length!=3){
continue;
}
temp=temp+'<li><a href="'+G_APP_PATH+'/a/l_'+data.rows[i].id+'.html">'+data.rows[i].name+'</a>';
var treeli=get_nav_treeli(data,i);
temp=temp+treeli;
temp=temp+'</li>';
}
temp=temp+'</ul>'
}

//执行递归函数:递归终止条件索引i = 数组长度 或着 当前对象和下一个索引对象的不是父子关系。

function get_nav_treeli(data,i){

var temp='<ul>';

var n=i+1;

if(n==data.rows.length){

return '';

}

if( data.rows[i].levelno!=data.rows
.levelno.substring(0,data.rows
.levelno.length-3)){

return '';

}else{

temp=temp+'<li><a href="'+G_APP_PATH+'/a/l_'+data.rows[i].id+'.html">'+data.rows
.name+'</a>';

temp=temp+get_nav_treeli(data,n);

temp=temp+'</li>';

}

var k=n+1;

if(k>=data.rows.length){}else{

for(k;k<data.rows.length;k++){

if(data.rows[k-1].levelno.substring(0,data.rows[k-1].levelno.length-3)==data.rows[k].levelno.substring(0,data.rows[k].levelno.length-3)){

temp=temp+'<li><a href="'+G_APP_PATH+'/a/l_'+data.rows[i].id+'.html">'+data.rows[k].name+'</a>';

temp=temp+get_nav_treeli(data,k);

temp=temp+'</li>';

}else{

break;

}

}

}

temp=temp+'</ul>';

return temp;

}

//数据结构模型 :
data={};
data.rows=new Array();
data.rows.push({id:'t1',name:'测试1',levelno:'001'});
data.rows.push({id:'t1-1',name:'测试1-1',levelno:'001001'});
data.rows.push({id:'t1-1-1',name:'测试1-1-1',levelno:'001001001'});
data.rows.push({id:'t2',name:'测试2',levelno:'002'});
data.rows.push({id:'t2-1',name:'测试2-1',levelno:'002001'});

//执行方法 返回树形 ul 的字符串
create_nav_tree(data);
</script>

最终形成类似结构的树形:

<ul id="tree_nav_ul" >
<li>
<a href="#">新闻</a>
<ul>
<li><a href="#">东兴新闻</a></li>
<li><a href="#">越南新闻</a></li>
<li><a href="#">热点新闻</a></li>
</ul>
</li>
</ul>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息