無限級級聯菜單 樹結構


---------------------------------效果圖---------------------------------:

-----------------------------代碼:----------------------------------

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM