ZtreeMasterFile（zTree大数据量一次性加载）

ZtreeMasterFile（zTree大数据量一次性加载）

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

<%@ Page Language="C#" MasterPageFile="~/pages/master/WebList.Master" AutoEventWireup="true"
    CodeBehind="ZtreeMasterFile.aspx.cs" Inherits="BF.Web.pages.MedicalTreatmentCombination.ZtreeMasterFile" %>

<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 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,
                //onDblClick: zTreeOnDblclick
            }
        }


        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) {//节点展开前
        }

        function onExpand(event, treeId, treeNode) {//节点展开
        }

        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 () {
            startTime = new Date();
            $.ajax({
                async: false, //【重要】：设置false不然出不来数据
                type: "post", //要用post方式                 
                url: "ZtreeForm.aspx/GetZtreeList", //方法所在页面和方法名
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) { //请求成功后处理函数。
                    var _data = $.parseJSON(data.d);
                    treeNodes = _data; //把后台封装好的简单Json格式赋给treeNodes
                },
                error: function () {//请求失败处理函数
                    alert('请求失败');
                }
            });
            //debugger;
            endTime = new Date();
            var usedTime = (endTime.getTime() - startTime.getTime()) / 1000;
            showLog("加载完毕，异步加载, 耗时：" + usedTime + " 秒");

            $.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: 85px">
            </ul>
        </div>
    </div>
</asp:Content>

【ZtreeMasterFile（zTree大数据量一次性加载）】