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>