ZtreeAsyncMasterFile（zTree大数据量分批次异步加载）

关于后台数据存储将集中在最后一篇讲解，此处省略

<%@ Page Language="C#" MasterPageFile="~/pages/master/WebList.Master" AutoEventWireup="true"    CodeBehind="ZtreeAsyncMasterFile.aspx.cs" Inherits="BF.Web.pages.MedicalTreatmentCombination.ZtreeAsyncMasterFile" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceJs" runat="server">    <link href="zTree-zTree_v3-master/zTree_v3/css/demo.css" rel="stylesheet" type="text/css" />    <link href="zTree-zTree_v3-master/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"        type="text/css" />    <script src="zTree-zTree_v3-master/zTree_v3/js/jquery-1.4.4.min.js" type="text/javascript"></script>    <script src="zTree-zTree_v3-master/zTree_v3/js/jquery.ztree.core-3.5.js" type="text/javascript"></script>    <script src="zTree-zTree_v3-master/zTree_v3/js/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>    <script type="text/javascript">        var iconOpen = "zTree-zTree_v3-master/zTree_v3/css/zTreeStyle/img/diy/1_open.png"; //默认 加载图标        var icon = "zTree-zTree_v3-master/zTree_v3/css/zTreeStyle/img/loading.gif"; //ajax 加载图标        var setting = {            isSimpleData: true, //数据是否采用简单 Array 格式，默认false            treeNodeKey: "gID", //在isSimpleData格式下，当前节点id属性            treeNodeParentKey: "gPID", //在isSimpleData格式下，当前节点的父节点id属性            showLine: true, //是否显示节点间的连线            expandSpeed: "fast",            isParent: "isParent",            icon: {                iconOpen: decodeURI("iconOpen"),                iconClose: decodeURI("iconClose")//自定义图标 展开 伸缩不同【仅支持父节点】            },            check: {                enable: true //开启checkbox            },            callback: {                onCheck: onCheck, //节点勾选                onClick: onClick, //节点单击                beforeExpand: beforeExpand, //节点展开前                onExpand: onExpand            }        }        function onCheck(e, treeId, treeNode) {            var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),                    nodes = treeObj.getCheckedNodes(true),                    v = "";            for (var i = 0; i < nodes.length; i++) {                v += nodes[i].name + ",";            }        }        function beforeExpand(treeId, treeNode) {//节点展开前            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");            var newNodes;            //debugger;            var treeULDemo = $("[id='" + treeNode.tId + "_a']").next();            if (treeULDemo != null && treeULDemo != undefined && treeULDemo.length > 0) {                treeObj.updateNode(treeNode);                treeObj.reAsyncChildNodes(treeNode, "refresh");            } else {                startTime = new Date();                $.ajax({                    async: false, //【重要】：设置false不然出不来数据                    type: "post", //要用post方式                                     url: "ZtreeForm.aspx/GetRootByChildsID", //方法所在页面和方法名                    contentType: "application/json; charset=utf-8",                    data: '{ gid:"' + treeNode.gID + '"}',                    dataType: "json",                    success: function (data) { //请求成功后处理函数。                        var _data = $.parseJSON(data.d);                        newNodes = _data; //把后台封装好的简单Json格式赋给treeNodes                    },                    error: function () {//请求失败处理函数                        alert('请求失败');                    },                    beforeSend: function () {                        $("#" + treeNode.tId + "_a").children("#" + treeNode.tId + "_ico").css("background-image", "url('" + icon + "')"); //jquery子代选择器 【暂用】                        //$("#" + treeNode.tId + "_ico").css("background-image", "url('" + icon + "')");//jquery ID选择器 【暂不用】                    },                    complete: function () {                        treeNode.iconOpen = iconOpen;                    }                });                newNodes = treeObj.addNodes(treeNode, newNodes, true); //展开父节点                treeObj.updateNode(treeNode);                endTime = new Date();                var usedTime = (endTime.getTime() - startTime.getTime()) / 1000;                showLog("加载完毕，异步加载, 耗时：" + usedTime + " 秒");            }        }        function onExpand(event, treeId, treeNode) {//节点展开            var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //加载指定节点            zTree.selectNode(treeNode.children[0]);        }        function onClick(e, treeId, treeNode) {            if (treeNode.gID.toUpperCase() == '07D42700-6201-47A7-9E7F-B7D6704CD12E' || treeNode.gID.toUpperCase() == 'CA0692EB-44F9-4566-B76E-18E23E7D2E2B')//国家总局 青海省民政厅 不可选                return false;            var zTree = $.fn.zTree.getZTreeObj("treeDemo");            zTree.expandNode(treeNode, null, null, null, true);        }        function zTreeOnDblclick(e, treeId, treeNode) {            alert("gID:" + treeNode.gID + " gPID:" + treeNode.gPID + " name:" + treeNode.name);        }        function getTime() {            var now = new Date(),            h = now.getHours(),            m = now.getMinutes(),            s = now.getSeconds(),            ms = now.getMilliseconds();            return (h + ":" + m + ":" + s + " " + ms);        }        function showLog(str) {            var log = $("#log");            log.append("<li>" + str + "</li>");        }        var startTime = 0, endTime = 0;        var treeNodes;        $(function () {            $.ajax({                async: false, //【重要】：设置false不然出不来数据                type: "post", //要用post方式                                 url: "ZtreeForm.aspx/GetZtreeRootList", //方法所在页面和方法名                contentType: "application/json; charset=utf-8",                dataType: "json",                success: function (data) { //请求成功后处理函数。                    var _data = $.parseJSON(data.d);                    treeNodes = _data; //把后台封装好的简单Json格式赋给treeNodes                },                error: function () {//请求失败处理函数                    alert('请求失败');                }            });            //debugger;            $.fn.zTree.init($("#treeDemo"), setting, treeNodes); //自动展开所有节点            var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //加载指定节点            var node = zTree.getNodeByParam('name', '青海省民政厅', null);            if (node != null) {                zTree.selectNode(node);                zTree.expandNode(node, true, false); //只展开当前节点下的一级节点            }        });    </script></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHtml" runat="server">    <div class="content_wrap">        <div class="zTreeDemoBackground left">            <ul id="treeDemo" class="ztree">            </ul>            <ul id="log" class="log" style="height: 185px">            </ul>        </div>    </div></asp:Content>

【ZtreeAsyncMasterFile（zTree大数据量分批次异步加载）】