zTree -- jQuery 树插件

zTree简介：http://www.treejs.cn/v3/main.php#_zTreeInfo

API文档：http://www.treejs.cn/v3/api.php

Demo演示：http://www.treejs.cn/v3/demo.php#_101

zTree下载：https://gitee.com/zTree/zTree_v3

附上一个入门的例子：

zTree的一个效果图：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/demo.css" type="text/css">
        <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
        <script>
            var zTreeObj;
            // zTree 的参数配置
            var setting = {
                   view: {
                       
               },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
               };
            // zTree 的数据属性
            var zNodes =[
            {id: 1,   pId: 0,  name: "总部", open: true},
            
            {id: 100, pId: 1,  name:"北京分公司", open: true},
            {id: 101, pId:100, name:"东城区子公司"},
            {id: 102, pId:100, name:"海定区子公司"},
            
            {id: 200, pId: 1,  name:"上海分公司"},
            {id: 201, pId:200, name:"黄浦区子公司"},
            {id: 202, pId:200, name:"长宁区子公司"},
            
            {id: 300, pId: 1,  name:"广州分公司"},
            {id: 301, pId:300, name:"天河区子公司"},
            {id: 302, pId:300, name:"海珠区子公司"},
            {id: 303, pId:300, name:"番禺区子公司"},
            {id: 304, pId:300, name:"增城区子公司"},
            
            {id: 400, pId: 1,  name:"深圳分公司"}
            ];
            $(document).ready(function(){
              zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
        </script>
    </head>
    <body>
        <div id="treeDemo" class="ztree"></div>
    </body>
</html>

相关阅读:
es6 类
set/ weakset/ map/ weakmap
async/await
生成函数
数组的操作
解决异步（重点promise函数）
迭代器
遍历
symbol 数据类型
es6.代理 proxy

原文地址：https://www.cnblogs.com/zxg-6/p/11276633.html