参考http://www.treejs.cn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入css-->

    <link rel="stylesheet" href="bower_components/layer/skin/default/layer.css">
    <link rel="stylesheet" href="bower_components/ztree/css/metroStyle/metroStyle.css"/>
</head>
<body>
<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>
<!--引入js-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js">
</script>
<script>
    //简单ztree配置
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: 0
            }
        }
    }
    $.ajax({
        url: "/menu/doFindZtreeMenuNodes",
        success: function (result) {
            //初始化zTree(参考http://www.treejs.cn/)
            //基于setting配置将返回的数据在treeDemo位置进行呈现
            $.fn.zTree.init($("#treeDemo"), setting, result.data);
        }
    })

</script>
</body>
</html>

效果图

03-05 13:56