53zTree - 异步加载模式下全部展开-CFANZ编程社区

效果图：
53zTree - 异步加载模式下全部展开_css
代码：
<!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.js"></script>
  <!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
  <SCRIPT type="text/javascript">
    <!--
    var demoMsg = {
      async:"正在进行异步加载，请等一会儿再点击...",
      expandAllOver: "全部展开完毕",
      asyncAllOver: "后台异步加载完毕",
      asyncAll: "已经异步加载完毕，不再重新加载",
      expandAll: "已经异步加载完毕，使用 expandAll 方法"
    }
    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>异步加载模式下全部展开</h1>
<h6>[ 文件路径: 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>实现方法说明</h2>
        <ul class="list">
        <li>利用 onAsyncSuccess / onAsyncError 回调函数 和 reAsyncChildNodes 或 expandNode 方法可以实现全部功能。</li>
        <li class="highlight_red">如果父节点数量很大，请注意利用延时进行控制，避免异步进程过多。</li>
        <li class="highlight_red">建议：演示时请利用调试工具查看 network 的 ajax 加载过程。</li>
        <li>演示操作
          <br/><br/>
        [ <a id="expandAllBtn" href="#" onclick="return false;">全部展开</a> ] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        [ <a id="asyncAllBtn" href="#" onclick="return false;">后台自动全部加载</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>