如何用原生js和jquery书写一个结构树

川长思鸟来 2023-03-13 09:19 9阅读 0赞

结构树的样式效果如下：样式是临时加进来的，可以微调  
![在这里插入图片描述][20210603145416475.png]

html代码如下：

new Vue({ 
    	el:'#elem',
    	data:function(){ 
    		return{ 
    			
    		}
    	}
    })

css样式如下：

.nav_lists, .content { 
            background-color: #fff;
        }
    
        .content { 
            display: none;
        }
    
        .content, ul { 
            font-size: 16px;
            padding: 21px;
            box-sizing: border-box;
        }
    
        .nav_li > ul { 
            display: none;
            padding: 0 0 0 18px;
    
        }
    
        .nav_li, .sub_li { 
            background-repeat: no-repeat;
            /*text-indent: 49px;*/
            background-size: 20px;
            min-height: 40px;
            line-height: 40px;
        }
    
        li.li-tree.sub_li { 
            padding-left: 20px;
        }
    
        .xia { 
            background-image: url();/*引入我们的图标*/
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: top center;
            width: 13px;
            height: 8px;
            display: inline-block;
            margin-right: 10px;
        }
    
        .nav_lists > ul > .li-tree > ul { 
            display: block;
        }
    
        .dis-none { 
            display: none;
        }
    
        .dis-block { 
            display: inline-block;
        }
    
        li.li-tree.sub_li input[type=checkbox] { 
            top: 13px;
        }

注意：[复选框的样式参考：][Link 1]

主要的js代码如下：

var lists = $(".nav_lists");
    build(lists, data);//加载结构树
    $('.xia').on('click', function (event) { //导航收缩
            $(this).siblings('ul').slideToggle(300);
        })
        $(":checkbox").click(function () { 
            $(".li-tree").find("input[type='checkbox']").prop("checked", false);/*为了实现单选，就先把所有的选中都取消*/
            $(this)[0].checked = true;//选中当前点击的
            //下面是获取id和对应的名称
            var str = $(this)[0].id;
            var arr = str.split('---**');
            window.parent.vm.treeName = arr[1];
            var arr1 = arr[0].split(" ");
            window.parent.vm.treeId=arr1[1];
        })

// 加载树形导航

如果在需求中要求加载树的最后一级的第一个数据，可以使用如下代码（递归）

//查询结构树的最后一级
    function getChild(t, arr) { //t是我们的Vue实例，arr是data数组
        var child1 = [];
        if (child1.length > 0) { 
            return
        } else { 
            if (arr.length > 0) { 
                for (var i = 0; i < arr.length; i++) { 
                    if (arr[i].child) { 
                        if (arr[i].child.length > 0) { 
                            var ch = arr[i].child;
                            if (ch.length > 0) { 
                                for (var j = 0; j < ch.length; j++) { 
                                    arr = [];
                                    getChild(t, ch)
                                }
                            }
                        }
                    } else { 
                        child1.push({ 
                            name: arr[i].name,
                            id: arr[i].id
                        })
                       
                        t.$forceUpdate()
                      
                        return child1
                    }
                }
            }
        }
    
    }

说了半天，我们要的数据格式是什么尼？当然我们也可以自定义名称的，记住加载结构树的地方把名称修改了

data: [{ 
                id:'01',
                name: '客服部门一组',
                child: [
                    { 
                        id:'001',
                        name: '客服部门成员',
                        child: [
                            { 
                                id:'0001',
                                name: 'a11',
                                child: [
                                    { 
                                        id:'00001',
                                        name: '组长1'
                                    },
                                    { 
                                        id:'00002',
                                        name: '组长2'
                                    }
                                ]
                            },
                            { 
                                id:'0002',
                                name: 'a12'
                            }
                        ]
                    },
                    { 
                        id:'002',name: 'a2' }
                ]
            },
                { 
                    id:'02',
                    name: '客服部门二组',
                    child: [
                        { 
                            id:'003',
                            name: '组长'
                        },
                        { 
                            id:'004',
                            name: '组员'
                        }
                    ]
                },
                { 
                    id:'03',
                    name: '客服部门三组',
                    child: [
                        { 
                            id:'005',
                            name: 'c1'
                        },
                        { 
                            id:'006',
                            name: 'c2'
                        }
                    ]
                }]

[20210603145416475.png]: /images/20230312/50f87de3b4724c0d940b88d7718d41a1.png
[Link 1]: https://blog.csdn.net/lyx9611/article/details/106084863