CSS+HTML+JS实现的的一个树

最新推荐文章于 2022-10-10 17:12:20 发布

weixin_33963189

最新推荐文章于 2022-10-10 17:12:20 发布

阅读量635

点赞数

文章标签：前端 json python ViewUI

原文链接：https://my.oschina.net/marjeylee/blog/860448

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: silver;
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=20);
        }

        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 40%;
            height: 50%;
            padding: 16px;
            border: 3px solid slategray;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
    </style>
    <script src="../jquery.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/>
    <script type="text/javascript" src="js/SimpleTree.js"></script>

</head>
<body>
<p>可以根据自己要求修改css样式<a href="javascript:void(0)"
                     οnclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a>
</p>
<div id="light" class="white_content">

    <a href="javascript:void(0)" style="float:right ; text-decoration:none; "
       οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
        取消</a></div>
<div id="fade" class="black_overlay">
</div>
</body>
<script>
    var jsons = [{
        "typeName": "员工服务中心",
        "id": "4AC1C287EBA90038E0530A6F0ACB0038",
        "title": "111",
        "driveRoute": "111"
    }, {
        "typeName": "员工服务中心",
        "id": "4AC1C287EBAA0038E0530A6F0ACB0038",
        "title": "333",
        "driveRoute": "33"
    }, {
        "typeName": "员工服务中心",
        "id": "4AC1C287EBAB0038E0530A6F0ACB0038",
        "title": "222",
        "driveRoute": "11"
    }, {
        "typeName": "员工服务中心",
        "id": "4AC1C287EBAC0038E0530A6F0ACB0038",
        "title": "222",
        "driveRoute": "222"
    }, {
        "typeName": "员工服务中心",
        "id": "4AC1C287EBAD0038E0530A6F0ACB0038",
        "title": "111",
        "driveRoute": "11111111111"
    }, {
        "typeName": "员工服务中心",
        "id": "4AC1C287EBAE0038E0530A6F0ACB0038",
        "title": "333",
        "driveRoute": "222222222"
    }, {
        "typeName": "员工服务中心",
        "id": "4AC1C287EBAF0038E0530A6F0ACB0038",
        "title": "111",
        "driveRoute": "1111111111"
    }];
    console.log(jsons);
    var root = {};
    function createNoneLeafNode() {
        for (var i = 0; i < jsons.length; i++) {
            var json = jsons[i];

            function createSecondGrade(json) {
                if (!root.hasOwnProperty(json.typeName)) {
                    root[json.typeName] = {name: json.typeName};
                }
            }

            createSecondGrade(json);
            function createThirdGrade(json) {
                if (!root[json.typeName].hasOwnProperty(json.title)) {
                    root[json.typeName][json.title] = {name: json.title}
                }
            }

            createThirdGrade(json);
        }
    }
    createNoneLeafNode();

    function insertLeafNodeToTree() {
        function insertLeafNode(json) {
            root[json.typeName][json.title][json.driveRoute] = {id: json.id, name: json.driveRoute}
        }

        for (var i = 0; i < jsons.length; i++) {
            var json = jsons[i];
            insertLeafNode(json);
        }
    }
    insertLeafNodeToTree();
    console.log(root);
    function layout(root) {
        var contentDIV = $('<br/><br/><div class="st_tree"></div>');
        $('#light').append(contentDIV);
        var rootOl = $('<ul></ul>');
        contentDIV.append(rootOl);

        function showForthGrid(Li, thirdRoot) {
            for (var pro in thirdRoot) {
                if (thirdRoot.hasOwnProperty(pro)) {
                    if (pro != 'name') {
                        var id = thirdRoot[pro].id;
                        console.log(thirdRoot[pro].id);
                        var tempLi = $('<li><a href="#"  class="leafNode_a" ref="' + id + '" >' + pro + '</a></li>');
                        Li.append(tempLi);
                    }
                }
            }
        }

        function showThirdGrid(secondGridLi, secondRoot) {
            for (var pro in secondRoot) {
                if (secondRoot.hasOwnProperty(pro)) {
                    if (pro != 'name') {
                        var tempLi = $('<li><a href="#" ref="">' + pro + '</a></li>');
                        secondGridLi.append(tempLi);
                        var tempUl = $('<ul></ul>');
                        secondGridLi.append(tempUl);
                        showForthGrid(tempUl, secondRoot[pro]);
                    }
                }
            }
        }

        function showSecondGrid() {
            for (var property in root) {
                if (root.hasOwnProperty(property)) {
                    var secondGridLi = $('<li><a href="#" >' + property + '</a></li>');
                    rootOl.append(secondGridLi);
                    var secondGridUl = $('<ul></ul>');
                    rootOl.append(secondGridUl);
                    showThirdGrid(secondGridUl, root[property]);
                }
            }
        }

        showSecondGrid();
    }
    layout(root);
    $(function () {
        $(".st_tree").SimpleTree({
            click: function (a) {
                if (!$(a).attr("hasChild"))
                    alert($(a).attr("ref"));
            }
        });
    });
    function eventBinding() {
        $('.leafNode_a').click(function () {
            console.log($(this).attr("ref"));
            document.getElementById('light').style.display = 'none';
            document.getElementById('fade').style.display = 'none'
            console.log($(this).text());
        })
    }
    eventBinding();

</script>
</html>

CSS

@charset "utf-8";

.st_tree {
    padding: 10px;
    font-size: 30px;
}

.st_tree a {
    color: #222;
    text-decoration: none;
    font-size: 22px;
}

.st_tree a:hover {
    color: #f33;
    text-decoration: underline;
}

.st_tree ul {
    padding: 0 0 0 18px;
    margin: 0;
}

.st_tree ul li {
    font-size: 13px;
    color: #222;
    line-height: 18px;
    cursor: pointer;
    list-style: none;
    background-repeat: no-repeat;
    padding: 0 0 3px 20px;
}

.st_tree ul li ul {
}

.st_tree ul li ul li {
}

.st_tree .folder {
    list-style-image: url(imgs/st_icon.png);
    background-repeat: no-repeat;
    padding: 0 0 0 20px;
}

.st_tree .open {
    list-style-image: url(imgs/st_icon_open.png);
    background-repeat: no-repeat;
    padding: 0 0 0 20px;
}

.st_tree .hover {
    background-color: #ffa;
}

$(function () {
    $.fn.extend({
        SimpleTree: function (options) {
            var option = $.extend({
                click: function (a) {
                }
            }, options);
            option.tree = this;
            option._init = function () {
                this.tree.find("ul ul").hide();
                this.tree.find("ul ul").prev("li").removeClass("open");
                this.tree.find("ul ul[show='true']").show();
                this.tree.find("ul ul[show='true']").prev("li").addClass("open");
            };
            this.find("a").click(function () {
                $(this).parents("li").click();
                return false;
            });
            this.find("li").click(function () {
                var a = $(this).find("a")[0];
                if (typeof(a) != "undefined")
                    option.click(a);
                if ($(this).next("ul").attr("show") == "true") {
                    $(this).next("ul").attr("show", "false");
                } else {
                    $(this).next("ul").attr("show", "true");
                }
                option._init();
            });

            this.find("li").hover(
                function () {
                    $(this).addClass("hover");
                },
                function () {
                    $(this).removeClass("hover");
                }
            );
            this.find("ul").prev("li").addClass("folder");
            this.find("li").find("a").attr("hasChild", false);
            this.find("ul").prev("li").find("a").attr("hasChild", true);
            option._init();
        }
    });
});

转载于:https://my.oschina.net/marjeylee/blog/860448