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

js 如何将无限级分类展示出来

2015-11-05 10:23 731 查看
这个需要运用递归。

案例:将数据以 ul li ul li形式展现在div中。

<div id="div"></div>

数据格式为json:

var data=[
{id:1, name:"信息1",
children :[{id:1, name:"信息1-1-1"},{id:1, name:"信息1-1-2",
children :[{id:1, name:"信息1-2-1"},{id:1, name:"信息1-2-2",
children :[{id:1, name:"信息1-3-1"},{id:1, name:"信息1-3-2"}]
}]
}]
},
{id:1, name:"信息2",
children :[{id:1, name:"信息2-1-1"},{id:1, name:"信息2-1-2",
children :[{id:1, name:"信息2-2-1"},{id:1, name:"信息2-2-2"}]
}]
}
];

函数:

function nodeHtml(data){
if(data.length > 0){
var _html = '<ul>';
for(var key in data) {
_html += '<li id="'+ data[key]['id'] +'">'+ data[key]['name'] +'</li>';
if(data[key]['children'] != undefined){
_html += nodeHtml(data[key]['children']);
}
}
_html += '</ul>';
return _html;
}
}

最后:

var html = nodeHtml(data);
$('#div').html(html);

显示样式:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: