最近写程序需要一颗可以一步加载的树，发现ztree功能很强大。搞了好久才知道怎么实现树节点的异步加载，

在这里记录下来以方便以后自己忘记了。代码如下：

  1. <spanstyle="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <htmlxmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <metahttp-equiv="Content-Type"content="text/html; charset=GBK"/>

  5. <title></title>

  6. <#global path = request.getContextPath() >

  8. <!--以下为,需要引入的css和js类库-->

  9. <linkrel="stylesheet"href="${path}/ztree/css/zTreeStyle/zTreeStyle.css"type="text/css"/>

  10. <scripttype="text/javascript"src="${path}/ztree/js/jquery-1.4.4.min.js"></script>

  11. <scripttype="text/javascript"src="${path}/ztree/js/jquery.ztree.core-3.1.js"></script>

  12. <script>

  14. <!--

  15. var zTree;

  16. var productIframe;

  18. var setting = {

  19. async: {

  20. enable: true,//启用异步加载

  21. url:"${path}/pmproductAction!producttree.action", //异步请求地址

  22. autoParam:["id", "str1"], //需要传递的参数,为你在ztree中定义的参数名称

  23. otherParam:{"chk":"chk"}

  24. },

  25. view: {

  26. dblClickExpand: false,

  27. showLine: true,

  28. selectedMulti: false,

  29. expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"

  30. },

  31. data: {

  32. simpleData: {

  33. enable: true

  34. }

  35. },

  36. callback: {

  37. onAsyncSuccess: onAsyncSuccess,

  38. beforeClick: function(treeId, treeNode)

  40. var zTree = $.fn.zTree.getZTreeObj("ztree");

  41. if (treeNode.isParent) {

  42. zTree.expandNode(treeNode);

  43. return false;

  44. } else {

  45. productIframe.attr("src",treeNode.url);

  46. return true;

  47. }

  48. }

  49. }

  50. };

  52. function onAsyncSuccess(event, treeId, treeNode, msg) {

  53. cancelHalf(treeNode);

  54. }

  55. function cancelHalf(treeNode) {

  56. var zTree = $.fn.zTree.getZTreeObj("ztree");

  57. treeNode.halfCheck = false;

  58. zTree.updateNode(treeNode); //异步加载成功后刷新树节点

  59. }

  61. $(document).ready(function(){

  62. //以下为第一次要加载的一级节点

  64. $.post("${path}/pmproductAction!producttree.action",{id:0,str1:"type"},function(result){

  65. $.fn.zTree.init($("#ztree"), setting, result);

  66. });

  67. productIframe = $("#products");

  68. productIframe.bind("load", loadReady);

  69. });

  71. function loadReady() {

  72. var bodyH = productIframe.contents().find("body").get(0).scrollHeight,

  73. htmlH = productIframe.contents().find("html").get(0).scrollHeight,

  74. maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),

  75. h = productIframe.height() >= maxH ? minH:maxH ;

  76. if (h <530) h = 530;

  77. productIframe.height(h);

  78. }

  80. //-->

  82. </script>

  83. </head>

  85. <body>

  86. <tableborder=0height=500pxalign=left>

  87. <tr>

  88. <tdwidth="20%"align="left"valign="top"style="BORDER-RIGHT: #999999 1px dashed">

  89. <ulid="ztree"class="ztree"style="overflow:auto;"></ul>

  90. </td>

  91. <tdwidth="80%"align="left"valign="top">

  92. <iframename="products"id="products"scrolling="auto"width="100%"height="500px"frameborder="0"></iframe>

  93. </td>

  94. </tr>

  95. </table>

  96. </body>

  97. </html>

  100. </span>