jq 实现tree

sodakii

已于 2023-04-23 13:43:11 修改

阅读量533

点赞数 1

文章标签： html javascript 前端

于 2023-04-23 13:42:54 首次发布

本文链接：https://blog.csdn.net/sodakii/article/details/130318793

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #treedemo {
            width: 25%;
        }
        #treedemo ul{
            margin: 0;
            padding: 0;
        }
        .tree ul li{
            list-style-type:none;
        }
        .tree a{
            cursor:pointer;
        }
        .tree span{
            cursor:pointer;
        }
        .none{
            display: none;
        }
        .active{
            background-color: #ccc;
        }
        .ul-item{
            cursor:pointer;
        }
        .ul-item:hover{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id='treedemo' class='tree'>
        
    </div>
    <script>
    var data = [
        {
            id:1,
            city:'湖北省',
            child:[
                {
                    id:2,
                    city:'武汉市',
                    child:[
                        {id:3,city:'武昌区',child:[]},
                        {id:4,city:'汉口区',child:[]},
                        {id:5,city:'青山区',child:[]},
                    ]                              
                },
                {
                    id:6,
                    city:'荆州市',
                    child:[
                        {id:7,city:'荆州城区',child:[
                            {id:16,city:'沙市区',child:[]},
                        ]},
                    ]                              
                },
            ]
        },
        {
            id:9,
            city:'贵州省',
            child:[
                {
                    id:10,
                    city:'贵阳市',
                    child:[
                        {id:11,city:'南明区',child:[]},
                        {id:12,city:'云岩区',child:[]},
                    ]
                },
                {
                    id:13,
                    city:'六盘水',
                    child:[
                        {id:14,city:'钟山区',child:[]},
                        {id:15,city:'六枝特区',child:[]},
                    ]
                },
                 
            ]
        }
    ];
    
    $('#treedemo').html(createTree(data));
    $('#treedemo').on('click',function(e){
        var targetNode = $(e.target);
        var nodeName = targetNode.get(0).tagName.toLowerCase();
        if(nodeName == "div"){
            if($(e.target).children("span").html() == ' + '){
                $(e.target).children("span").html(' - ')
            }else{
                $(e.target).children("span").html(' + ')
            }
            // 移除其他选中样式
            if($('.active').length>0)$('.active').toggleClass('active')
            targetNode.toggleClass('active')
            $(e.target).parent().children("ul").toggle()
            onclickTreeItem($(e.target).data('id'))
        }
    });
    function createTree(data, num=0){
        var content = '<ul>';
            data.forEach((item,index) => {
                content += '<li><div class="ul-item" style=" padding-left:'+ (25 *num) +'px" data-id="' +  (item.child.length>0?null:item.id) + ' "><span '+ (item.child.length>0?'':'class="none"') +'> + </span>'+ item.city + '</div>';
                if(item.child.length>0) content += createTree(item.child,num+1);
                content += '</li>';
            });
        content += '</ul>';
        return content;
    }
    function onclickTreeItem(id){
        console.log(id);
    }
    </script>
</body>
</html>