showHierarchy.html

<!DOCTYPE html>
<HTML>

<HEAD>
    <TITLE> ZTREE DEMO </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.42/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.42/js/jquery.ztree.core.min.js"></script>
    <script src="./data.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
        console.log(data)
        var zTreeObj;
        var setting = {}; // zTree 的参数配置，后面详解
        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,
            data); //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
        });
    </SCRIPT>
</HEAD>

<BODY>
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</BODY>

</HTML>