JavaScript 树

最新推荐文章于 2023-03-17 23:36:51 发布

何时_枫叶红

最新推荐文章于 2023-03-17 23:36:51 发布

阅读量260

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yuchen352416/article/details/50615534

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/tree.css"/>
        <script src="js/jquery-2.1.3.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/tree.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <div id="left">
            <div id="tree_container"></div>
        </div>

        <div id="right">
            <div id="tree_container_right">aaaaaaaaaaaaaaa</div>
        </div>

    </body>

    <script type="text/javascript">
        // 创建对象
        var tree = new Tree();
        // 初始化数据
        tree.initData('{"id"    :"130100", "parent":"#", "text"     :"石家庄", "child" : [{"id"    :"130101", "parent":"130100", "text"    :"桥东区", "child" : [{"id"    :"130101001", "parent":"130101", "text" :"胜南街道社区卫生服务中心", "child"    : "#"}, {"id"   :"130101002", "parent":"130101", "text" :"胜北街道社区卫生服务中心", "child"    : "#"}, {"id"   :"130101003", "parent":"130101", "text" :"中山东路街道社区卫生服务中心", "child"  : "#"} ] }, {"id"   :"130102", "parent":"130100", "text"    :"桥西区", "child" : [{"id"    :"130102001", "parent":"130102", "text" :"红旗街道社区卫生服务中心", "child"    : "#"}, {"id"   :"130102002", "parent":"130102", "text" :"新石街道社区卫生服务中心", "child"    : "#"}, {"id"   :"130102003", "parent":"130102", "text" :"友谊街道道社区卫生服务中心", "child"   : "#"} ] } ] }');
        // 初始化树
        tree.init("tree_container");



    </script>
</html>

JavaScript

function Tree() {

    this.treeContainer = {};
    this.root = {};
    this.data = {};

    /**
     * 创建节点
     * 
     * @param {Object} container    容器
     * @param {String} type         节点类型
     * @param {String} nodeId       节点id
     * @param {String} text         节点文本
     */
    this.createNode = function (container, type, nodeId, text) {
        var node = document.createElement(type);
        node.id = nodeId;
        node.innerText = text;
        container.appendChild(node);
        return node;
    }

    /**
     * 初始化数据
     * @param {JSON} data           JSON数据
     */
    this.initData = function(data) {
        this.data = eval("([" + data + "])");
    }

    /**
     * 初始化组件
     * @param {String} containerId  容器id
     */
    this.init = function(containerId) {
        this.treeContainer = document.getElementById(containerId);
        this.root = this.createNode(this.treeContainer,"ul","root", "");
        this.createTree(this.root, this.data);
    }

    /**
     * 节点单击事件
     */
    this.click = function() {
        try{
            var display = document.getElementById("_"+this.id).style.display;
            if("" == display){
                document.getElementById("_"+this.id).style.display = "none";
            } else {
                document.getElementById("_"+this.id).style.display = "";
            }
        }catch(e) {}
    }

    /**
     * 创建树
     * @param {Object} container    容器
     * @param {Object} datas        数据源
     */
    this.createTree = function(container,datas) {
        for (var i = 0; i < datas.length; ++i) {
            var data = datas[i];
            var branches = this.createNode(container,"li", data.id, data.text);
            branches.onclick = this.click;
            if("#" != data.child){
                var twig = this.createNode(container,"ul", "_"+data.id, "");
                this.createTree(twig, data.child);
            }
        }
    }
}

CSS

li {
    list-style-type: none;
    cursor: pointer;
    font-family: "微软雅黑";
    padding-left: 5px;
}

li:hover {
    background-color: #ccc;
}

ul {
    padding-left: 17px;
}

JSON

[
    {
        "id": "130100",
        "parent": "#",
        "text": "石家庄",
        "child": [
            {
                "id": "130101",
                "parent": "130100",
                "text": "桥东区",
                "child": [
                    {
                        "id": "130101001",
                        "parent": "130101",
                        "text": "胜南街道社区卫生服务中心",
                        "child": "#"
                    }, {
                        "id": "130101002",
                        "parent": "130101",
                        "text": "胜北街道社区卫生服务中心",
                        "child": "#"
                    }, {
                        "id": "130101003",
                        "parent": "130101",
                        "text": "中山东路街道社区卫生服务中心",
                        "child": "#"
                    }
                ]
            }, {
                "id": "130102",
                "parent": "130100",
                "text": "桥西区",
                "child": [
                    {
                        "id": "130102001",
                        "parent": "130102",
                        "text": "红旗街道社区卫生服务中心",
                        "child": "#"
                    }, {
                        "id": "130102002",
                        "parent": "130102",
                        "text": "新石街道社区卫生服务中心",
                        "child": "#"
                    }, {
                        "id": "130102003",
                        "parent": "130102",
                        "text": "友谊街道道社区卫生服务中心",
                        "child": "#"
                    }
                ]
            }
        ]
    }
]