无限级级联菜单 树结构

时间:2023-01-10 10:45:55

---------------------------------效果图---------------------------------:

无限级级联菜单 树结构

-----------------------------代码:----------------------------------

<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>