今天将ztree加载的一些问题做一个集合。希望对大家有帮助。
1、ztree无限循环问题：
IT分享
不要怀疑了。就是你的返回数据有问题，你返回的json里面有递归数据。导致的无限循环。先自己排查一下服务端的数据吧。
var setting = {
async: true, // 需要异步加载zTree
asyncUrl: "../Public/getSubTree.ashx?who=0", // 异步加载时访问的页面
asyncParam: ["id"], // 异步加载时要传递的参数
isSimpleData: true, // 简单数据模型，必须提供下面的两项
treeNodeKey: "id", // 节点的id
treeNodeParentKey: "pId", // 父节点的id
showIcon : false,
showLine: false, // zTree显示连接线
expandSpeed: "", // 设置 zTree 节点展开、折叠时的动画速度，默认为"fast"，""表示无动画
callback: { // 回调函数
click: zTreeOnClick, // 单击鼠标时
asyncSuccess:zTreeOnAsyncSuccess //beforeAsync: zTreeBeforeAsync
//rightClick: zTreeOnRightClick, // 鼠标右击 zTree
//beforeRemove: zTreeOnBeforeRemove
//remove: zTreeOnRemove
}
};
2、ztree异步时需要配置那些参数？
必须设置：
async: true, // 需要异步加载zTree
关于async内的enable属性值有如下说明：
true 表示 开启 异步加载模式
false 表示 关闭 异步加载模式
如果设置为 true，请务必设置 setting.async 内的其它参数。
如果需要根节点也异步加载，初始化时 treeNodes 参数设置为 null 即可。
asyncUrl: "../Public/getSubTree.ashx?who=0", // 异步加载时访问的页面
可以设置asyncParam: ["id"], // 异步加载时要传递的参数
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="left.aspx.cs" Inherits="teachingAndStudy.Html.left" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="../js/jq1.6.2.min.js" type="text/javascript"></script>
<script src="../js/jquery.ztree-2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
var zTree;
var setting = {
async: true, // 需要异步加载zTree
asyncUrl: "../Public/getSubTree.ashx?who=0", // 异步加载时访问的页面
asyncParam: ["id"], // 异步加载时要传递的参数
isSimpleData: true, // 简单数据模型，必须提供下面的两项
treeNodeKey: "id", // 节点的id
treeNodeParentKey: "pId", // 父节点的id
showIcon : false,
showLine: false, // zTree显示连接线
expandSpeed: "", // 设置 zTree 节点展开、折叠时的动画速度，默认为"fast"，""表示无动画
callback: { // 回调函数
click: zTreeOnClick, // 单击鼠标时
asyncSuccess:zTreeOnAsyncSuccess
//beforeAsync: zTreeBeforeAsync
//rightClick: zTreeOnRightClick, // 鼠标右击 zTree
//beforeRemove: zTreeOnBeforeRemove
//remove: zTreeOnRemove
}
};
$(document).ready(function(){
zTree = $("#tree").zTree(setting, null);
});
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
zTree.expandAll(true);
}
}
function zTreeOnClick(event, treeId, treeNode) {
}
</script>
</head>
<body>
<div>
<ul id="tree" class="tree" style="width:500px; overflow:visible;"></ul>
</div>
</body>
</html>
