123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- <!DOCTYPE html>
- <HTML>
- <HEAD>
- <TITLE> ZTREE DEMO - async for All</TITLE>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
- <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
- <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
- <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
- <!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
- <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
- <SCRIPT type="text/javascript">
- <!--
- var demoMsg = {
- async: "Loading asynchronous, please wait a moment and then click...",
- expandAllOver: "Expansion Completed.",
- asyncAllOver: "Asynchronously loading Completed.",
- asyncAll: "Asynchronously loading Completed, no need to reload it again.",
- expandAll: "Asynchronously loading completed, please use expandAll method."
- }
- var setting = {
- async: {
- enable: true,
- url:"../asyncData/getNodes.php",
- autoParam:["id", "name=n", "level=lv"],
- otherParam:{"otherParam":"zTreeAsyncTest"},
- dataFilter: filter,
- type: "get"
- },
- callback: {
- beforeAsync: beforeAsync,
- onAsyncSuccess: onAsyncSuccess,
- onAsyncError: onAsyncError
- }
- };
- function filter(treeId, parentNode, childNodes) {
- if (!childNodes) return null;
- for (var i=0, l=childNodes.length; i<l; i++) {
- childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
- }
- return childNodes;
- }
- function beforeAsync() {
- curAsyncCount++;
- }
-
- function onAsyncSuccess(event, treeId, treeNode, msg) {
- curAsyncCount--;
- if (curStatus == "expand") {
- expandNodes(treeNode.children);
- } else if (curStatus == "async") {
- asyncNodes(treeNode.children);
- }
- if (curAsyncCount <= 0) {
- if (curStatus != "init" && curStatus != "") {
- $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
- asyncForAll = true;
- }
- curStatus = "";
- }
- }
- function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
- curAsyncCount--;
- if (curAsyncCount <= 0) {
- curStatus = "";
- if (treeNode!=null) asyncForAll = true;
- }
- }
- var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
- goAsync = false;
- function expandAll() {
- if (!check()) {
- return;
- }
- var zTree = $.fn.zTree.getZTreeObj("treeDemo");
- if (asyncForAll) {
- $("#demoMsg").text(demoMsg.expandAll);
- zTree.expandAll(true);
- } else {
- expandNodes(zTree.getNodes());
- if (!goAsync) {
- $("#demoMsg").text(demoMsg.expandAll);
- curStatus = "";
- }
- }
- }
- function expandNodes(nodes) {
- if (!nodes) return;
- curStatus = "expand";
- var zTree = $.fn.zTree.getZTreeObj("treeDemo");
- for (var i=0, l=nodes.length; i<l; i++) {
- zTree.expandNode(nodes[i], true, false, false);
- if (nodes[i].isParent && nodes[i].zAsync) {
- expandNodes(nodes[i].children);
- } else {
- goAsync = true;
- }
- }
- }
- function asyncAll() {
- if (!check()) {
- return;
- }
- var zTree = $.fn.zTree.getZTreeObj("treeDemo");
- if (asyncForAll) {
- $("#demoMsg").text(demoMsg.asyncAll);
- } else {
- asyncNodes(zTree.getNodes());
- if (!goAsync) {
- $("#demoMsg").text(demoMsg.asyncAll);
- curStatus = "";
- }
- }
- }
- function asyncNodes(nodes) {
- if (!nodes) return;
- curStatus = "async";
- var zTree = $.fn.zTree.getZTreeObj("treeDemo");
- for (var i=0, l=nodes.length; i<l; i++) {
- if (nodes[i].isParent && nodes[i].zAsync) {
- asyncNodes(nodes[i].children);
- } else {
- goAsync = true;
- zTree.reAsyncChildNodes(nodes[i], "refresh", true);
- }
- }
- }
- function reset() {
- if (!check()) {
- return;
- }
- asyncForAll = false;
- goAsync = false;
- $("#demoMsg").text("");
- $.fn.zTree.init($("#treeDemo"), setting);
- }
- function check() {
- if (curAsyncCount > 0) {
- $("#demoMsg").text(demoMsg.async);
- return false;
- }
- return true;
- }
- $(document).ready(function(){
- $.fn.zTree.init($("#treeDemo"), setting);
- $("#expandAllBtn").bind("click", expandAll);
- $("#asyncAllBtn").bind("click", asyncAll);
- $("#resetBtn").bind("click", reset);
- });
- //-->
- </SCRIPT>
- </HEAD>
- <BODY>
- <h1>Expand All Nodes with Async</h1>
- <h6>[ File Path: super/asyncForAll.html ]</h6>
- <div class="content_wrap">
- <div class="zTreeDemoBackground left">
- <ul id="treeDemo" class="ztree"></ul>
- </div>
- <div class="right">
- <ul class="info">
- <li class="title"><h2>Explanation of implementation method</h2>
- <ul class="list">
- <li>Using 'onAsyncSuccess' / 'onAsyncError' callback and 'reAsyncChildNodes' or 'expandNode' method, you will achieve all functionalities.</li>
- <li class="highlight_red">Note: If there are large amount parent nodes, please use delay to avoid excessive asynchronous process.</li>
- <li class="highlight_red">Recommendation: please use the debugging tools to view the ajax loading process with network.</li>
- <li>Demonstrate operation
- <br/><br/>
- [ <a id="expandAllBtn" href="#" onclick="return false;">Expand All Nodes</a> ]
- [ <a id="asyncAllBtn" href="#" onclick="return false;">Load all nodes (don't expand)</a> ]<br/><br/>
- [ <a id="resetBtn" href="#" onclick="return false;">Reset zTree</a> ]<br/><br/>
- <p class="highlight_red" id="demoMsg"></p>
- </li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </BODY>
- </HTML>
|