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

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大数据量分批次异步加载）】