html 原生js手写树 仿照antd 样式

效果如图

html 原生js手写树 仿照antd 样式_第1张图片

doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
head>

<body style="height:100%;width:100%;">
    <ul id="tree" class="tree">ul>

    <script>
        var opensvg = ''
        var closesvg = ''
        var filesvg = ''
        // 递归函数生成树的节点
        function createNode(data) {
            var li = document.createElement("li");
            var div = document.createElement("div");
            div.classList.add("nodetree");
            if (data.children) {
                div.innerHTML = opensvg + '' + data.name + '';
            } else {
                div.innerHTML = filesvg + '' + data.name + '';
            }

            li.appendChild(div);
            if (data.children) {
                var ul = document.createElement("ul");
                for (var i = 0; i < data.children.length; i++) {
                    ul.appendChild(createNode(data.children[i]));
                }
                li.appendChild(ul);
            }
            return li;
        }

        // 生成树的节点并添加到树的容器中
        var treeData = [
            {
                name:'测试1',
                children:[
                    {
                        name:'测试1-1'
                    }
                ]
            },
            {
                name:'测试2',
                children:[
                    {
                        name:'测试2-1'
                    }
                ]
            }
        ]
        var tree = document.getElementById("tree");
        for (var i = 0; i < treeData.length; i++) {
            tree.appendChild(createNode(treeData[i]));
        }
        // 定义节点的样式和事件
        var nodes = document.querySelectorAll("#tree li");
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].classList.add("node");
            nodes[i].addEventListener("click", function (e) {
                if (this.getAttribute('class').indexOf('open') > -1) {
                    this.querySelector(".nodetree .svg").innerHTML = opensvg;
                } else {
                    this.querySelector(".nodetree .svg").innerHTML = closesvg;
                }
                e.stopPropagation();
                this.classList.toggle("open");
            });
        }
    script>
body>
<style>
    .tree {
        display: inline-block;
        height: 24px;
        margin: 0;
        padding: 0 5px;
        color: rgba(0, 0, 0, .65);
        line-height: 24px;
        text-decoration: none;
        vertical-align: top;
        border-radius: 2px;
        cursor: pointer;
        transition: all .3s;
        font-size: 14px;
        font-variant: tabular-nums;
        font-feature-settings: "tnum";
    }

    .node {
        cursor: pointer;
    }

    .nodetree {
        display: flex;
        align-items: center;
    }

    .nodetree svg {
        margin-right: 5px;
        vertical-align: middle;
    }

    .node>ul {
        display: none;
    }

    .node.open>ul {
        display: block;
        margin: 0;
        padding: 0 0 0 18px;
    }

    ul>li {
        position: relative;
        margin: 0;
        padding: 4px 0;
        white-space: nowrap;
        list-style: none;
        outline: 0;
    }

    ul li:not(:last-child):before {
        position: absolute;
        left: 7px;
        width: 1px;
        height: 100%;
        height: calc(100% - 22px);
        margin: 22px 0 0;
        border-left: 1px solid #d9d9d9;
        content: " ";
    }
style>

html>

你可能感兴趣的:(javascript,html,css)