无限级级联菜单 树结构
---------------------------------效果图---------------------------------:
-----------------------------代码:----------------------------------
<script>
var arr = [
{name:'lalalal菜单',code:'1',parentcode:'12'},
{name:'lalalal菜单',code:'2',parentcode:'14'},
{name:'lalalal菜单',code:'3',parentcode:'14'},
{name:'lalalal菜单',code:'4',parentcode:'13'},
{name:'lalalal菜单',code:'5',parentcode:'14'},
{name:'lalalal菜单',code:'6',parentcode:'14'},
{name:'lalalal菜单',code:'7',parentcode:'13'},
{name:'lalalal菜单',code:'8',parentcode:'14'},
{name:'lalalal菜单',code:'9',parentcode:'13'},
{name:'lalalal菜单',code:'10',parentcode:'14'},
{name:'lalalal菜单',code:'11',parentcode:''},
{name:'lalalal菜单',code:'12',parentcode:''},
{name:'lalalal菜单',code:'13',parentcode:''},
{name:'lalalal菜单',code:'14',parentcode:''},
{name:'lalalal菜单',code:'15',parentcode:''},
{name:'lalalal菜单',code:'16',parentcode:'11'},
{name:'lalalal菜单',code:'17',parentcode:'11'},
{name:'lalalal菜单',code:'18',parentcode:'11'},
{name:'lalalal菜单',code:'19',parentcode:'11'},
{name:'lalalal菜单',code:'20',parentcode:'12'},
{name:'lalalal菜单',code:'21',parentcode:'19'},
{name:'lalalal菜单',code:'22',parentcode:'19'},
{name:'lalalal菜单',code:'23',parentcode:'19'},
{name:'lalalal菜单',code:'24',parentcode:'21'},
{name:'lalalal菜单',code:'25',parentcode:'21'},
{name:'lalalal菜单',code:'26',parentcode:'21'},
];
var firstMenu = '<ul>',
len = arr.length;
function tree(arr){
for(var i=0;i<len;i++){
if(arr[i].parentcode == ''){
firstMenu += '<li>'+"<b>"+arr[i].code+"</b>"+arr[i].name;
second(arr, arr[i]);
}
}
firstMenu += '</li></ul>';
// console.log($(".tree").html());
$(".tree").append($(firstMenu));
}
function second(arr, father){
var isFirst = true,
sec = '';
for(var i=0;i<len;i++){
if(arr[i].parentcode == father.code){
if(sec == ''){
sec = "<ul>"
firstMenu += sec;
};
sec = "<li>"+"<b>"+arr[i].code+"</b>"+arr[i].name+arr[i].parentcode;
firstMenu += sec;
second(arr, arr[i]);
}
}
if(sec != '') firstMenu+="</ul></li>";
}
$(function(){
tree(arr);
})
</script>