asyncForAll.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> ZTREE DEMO - async for All</TITLE>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  7. <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  8. <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  9. <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
  10. <!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
  11. <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
  12. <SCRIPT type="text/javascript">
  13. <!--
  14. var demoMsg = {
  15. async: "Loading asynchronous, please wait a moment and then click...",
  16. expandAllOver: "Expansion Completed.",
  17. asyncAllOver: "Asynchronously loading Completed.",
  18. asyncAll: "Asynchronously loading Completed, no need to reload it again.",
  19. expandAll: "Asynchronously loading completed, please use expandAll method."
  20. }
  21. var setting = {
  22. async: {
  23. enable: true,
  24. url:"../asyncData/getNodes.php",
  25. autoParam:["id", "name=n", "level=lv"],
  26. otherParam:{"otherParam":"zTreeAsyncTest"},
  27. dataFilter: filter,
  28. type: "get"
  29. },
  30. callback: {
  31. beforeAsync: beforeAsync,
  32. onAsyncSuccess: onAsyncSuccess,
  33. onAsyncError: onAsyncError
  34. }
  35. };
  36. function filter(treeId, parentNode, childNodes) {
  37. if (!childNodes) return null;
  38. for (var i=0, l=childNodes.length; i<l; i++) {
  39. childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
  40. }
  41. return childNodes;
  42. }
  43. function beforeAsync() {
  44. curAsyncCount++;
  45. }
  46. function onAsyncSuccess(event, treeId, treeNode, msg) {
  47. curAsyncCount--;
  48. if (curStatus == "expand") {
  49. expandNodes(treeNode.children);
  50. } else if (curStatus == "async") {
  51. asyncNodes(treeNode.children);
  52. }
  53. if (curAsyncCount <= 0) {
  54. if (curStatus != "init" && curStatus != "") {
  55. $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
  56. asyncForAll = true;
  57. }
  58. curStatus = "";
  59. }
  60. }
  61. function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
  62. curAsyncCount--;
  63. if (curAsyncCount <= 0) {
  64. curStatus = "";
  65. if (treeNode!=null) asyncForAll = true;
  66. }
  67. }
  68. var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
  69. goAsync = false;
  70. function expandAll() {
  71. if (!check()) {
  72. return;
  73. }
  74. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  75. if (asyncForAll) {
  76. $("#demoMsg").text(demoMsg.expandAll);
  77. zTree.expandAll(true);
  78. } else {
  79. expandNodes(zTree.getNodes());
  80. if (!goAsync) {
  81. $("#demoMsg").text(demoMsg.expandAll);
  82. curStatus = "";
  83. }
  84. }
  85. }
  86. function expandNodes(nodes) {
  87. if (!nodes) return;
  88. curStatus = "expand";
  89. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  90. for (var i=0, l=nodes.length; i<l; i++) {
  91. zTree.expandNode(nodes[i], true, false, false);
  92. if (nodes[i].isParent && nodes[i].zAsync) {
  93. expandNodes(nodes[i].children);
  94. } else {
  95. goAsync = true;
  96. }
  97. }
  98. }
  99. function asyncAll() {
  100. if (!check()) {
  101. return;
  102. }
  103. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  104. if (asyncForAll) {
  105. $("#demoMsg").text(demoMsg.asyncAll);
  106. } else {
  107. asyncNodes(zTree.getNodes());
  108. if (!goAsync) {
  109. $("#demoMsg").text(demoMsg.asyncAll);
  110. curStatus = "";
  111. }
  112. }
  113. }
  114. function asyncNodes(nodes) {
  115. if (!nodes) return;
  116. curStatus = "async";
  117. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  118. for (var i=0, l=nodes.length; i<l; i++) {
  119. if (nodes[i].isParent && nodes[i].zAsync) {
  120. asyncNodes(nodes[i].children);
  121. } else {
  122. goAsync = true;
  123. zTree.reAsyncChildNodes(nodes[i], "refresh", true);
  124. }
  125. }
  126. }
  127. function reset() {
  128. if (!check()) {
  129. return;
  130. }
  131. asyncForAll = false;
  132. goAsync = false;
  133. $("#demoMsg").text("");
  134. $.fn.zTree.init($("#treeDemo"), setting);
  135. }
  136. function check() {
  137. if (curAsyncCount > 0) {
  138. $("#demoMsg").text(demoMsg.async);
  139. return false;
  140. }
  141. return true;
  142. }
  143. $(document).ready(function(){
  144. $.fn.zTree.init($("#treeDemo"), setting);
  145. $("#expandAllBtn").bind("click", expandAll);
  146. $("#asyncAllBtn").bind("click", asyncAll);
  147. $("#resetBtn").bind("click", reset);
  148. });
  149. //-->
  150. </SCRIPT>
  151. </HEAD>
  152. <BODY>
  153. <h1>Expand All Nodes with Async</h1>
  154. <h6>[ File Path: super/asyncForAll.html ]</h6>
  155. <div class="content_wrap">
  156. <div class="zTreeDemoBackground left">
  157. <ul id="treeDemo" class="ztree"></ul>
  158. </div>
  159. <div class="right">
  160. <ul class="info">
  161. <li class="title"><h2>Explanation of implementation method</h2>
  162. <ul class="list">
  163. <li>Using 'onAsyncSuccess' / 'onAsyncError' callback and 'reAsyncChildNodes' or 'expandNode' method, you will achieve all functionalities.</li>
  164. <li class="highlight_red">Note: If there are large amount parent nodes, please use delay to avoid excessive asynchronous process.</li>
  165. <li class="highlight_red">Recommendation: please use the debugging tools to view the ajax loading process with network.</li>
  166. <li>Demonstrate operation
  167. <br/><br/>
  168. [ <a id="expandAllBtn" href="#" onclick="return false;">Expand All Nodes</a> ] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  169. [ <a id="asyncAllBtn" href="#" onclick="return false;">Load all nodes (don't expand)</a> ]<br/><br/>
  170. [ <a id="resetBtn" href="#" onclick="return false;">Reset zTree</a> ]<br/><br/>
  171. <p class="highlight_red" id="demoMsg"></p>
  172. </li>
  173. </ul>
  174. </li>
  175. </ul>
  176. </div>
  177. </div>
  178. </BODY>
  179. </HTML>