zoukankan      html  css  js  c++  java
  • 无限级级联菜单 树结构

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

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

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

  • 相关阅读:
    [TJOI2015]棋盘
    [FJOI2017]矩阵填数——容斥
    [ZJOI2016]小星星
    [HEOI2013]SAO ——计数问题
    ZJOI2008 骑士
    莫队算法——暴力出奇迹
    可持久化线段树
    dij与prim算法
    LCA 最近公共祖先
    Linux 设置交换分区
  • 原文地址:https://www.cnblogs.com/youzhuxiaoyao/p/5799343.html
Copyright © 2011-2022 走看看