<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>异步加载</title> <link href="${pageContext.request.contextPath}/zTree_v3-master/css/demo.css"> <link href="${pageContext.request.contextPath}/zTree_v3-master/css/zTreeStyle/zTreeStyle.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/zTree_v3-master/js/jquery.ztree.core.min.js"></script> <script type="text/javascript"> var setting = { async : { enable : true, url : "${pageContext.request.contextPath}/ztreeAction!getMenusById.jhtml", autoParam : [ "id" ], //dataFilter : filter }, data : { key : { url : "xUrl" }, simpleData : { enable : true, pIdKey : "pid" } }, }; $(document).ready(function() { $.fn.zTree.init($("#treeDemo"), setting); }); </script> </head> <body> <div class="ztree" style="width: 20%; height: 500px; padding-top: 10px; float: left; border: 1px solid #FF0000;"> <ul></ul> </div> </body> </html>