需要注意的是：动态生成的树节点数据不是在后面拼接的，而是直接在done里面
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/> <!-- 分别导入jquery，zTree的两个js文件，其中excheck是显示复选框一定要有的 --> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript" src="js/jquery.ztree.core.js"></script> <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script> </head> <BODY> <div> <ul id="treeDemo" class="ztree"></ul> <input id="btn1" value="获取选中节点id" type="button"/> </div> <script> var treeNodes = []; $(function(){ $.ajax({ url: "http://127.0.0.1:8081/uris", type: "GET", dataType: "json" }).done(function(result){ var da = result.data; for (var i = 0; i < da.length;i ++) { var node = {}; node.id=da[i].id; node.superiorsId=da[i].superiorsId; node.uriName=da[i].uriName; if (da[i].id===112) { node.checked="true"; } treeNodes.push(node); } // 树是在done里面生成,而不是在后面,这个ready写在此处 $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,treeNodes) }); console.log(treeNodes); }) }) var zTreeObj; // function ajaxDataFilter(treeId,parentNode,responseData) { // return responseData.data; // } var setting = { // 开启复选框,其他不写就都是默认 check: { enable: true }, // name:"uriName"和取别名差不多 data: { key:{ name:"uriName" }, // 开启简单数据,其他默认 // idKey:"id",pIdKey:"superiorsId"也差不多是取别名 simpleData: { enable: true, idKey: "id", pIdKey: "superiorsId", rootPId: 0 } } } // 点击按钮后获取选中的数据 $("#btn1").on("click", function(){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"); var nodes=treeObj.getCheckedNodes(true); for(var i=0;i<nodes.length;i++){ console.log(nodes[i].id); } }) </script> </BODY> </HTML>
如果不是要一开始默认选中，而只是显示树节点，可以用更简单的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="../css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/> <script type="text/javascript" src="jquery-3.4.1.js"></script> <script type="text/javascript" src="jquery.ztree.core.js"></script> <script type="text/javascript" src="jquery.ztree.excheck.js"></script> </head> <body> <div> <ul id="treeDemo" class="ztree"></ul> <input id="btn1" value="获取选中节点id" type="button"/> </div> <script> var treeNodes = ""; $(function(){ $.ajax({ url: "http://127.0.0.1:8081/uris", type: "get", dataType: "json" }).done(function(result){ console.log(result.data); treeNodes = result.data; $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,treeNodes) }); }) }) var zTreeObj; var setting = { // 开启复选框,其他不写就都是默认 check: { enable: true }, // name:"uriName"和取别名差不多 data: { key:{ name:"uriName" }, // 开启简单数据,其他默认 // idKey:"id",pIdKey:"superiorsId"也差不多是取别名 simpleData: { enable: true, idKey: "id", pIdKey: "superiorsId", rootPId: 0 } } } $("#btn1").on("click", function(){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"); var nodes=treeObj.getCheckedNodes(true); for(var i=0;i<nodes.length;i++){ console.log(nodes[i].haveSuperiors); } }) </script> </body> </html>