参考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>