zttree树具有异步加载的属性;
在定义树的时候在async属性里设置enable:true/false即打开或关闭异步加载功能;
async:{
enable:true,
}
而何时执行此功能呢?
根据我的实验(当然了这只是我的猜测不一定对,望大神指正):
当执行 createTree()方法时,判断加载节点的子节点长度大于零,则直接加载数据,如若子节点的数据长度不大于零则调用异步加载获取数据。
具体事例入下:
<script type="text/javascript">
var userTree;var user_tree_setting = {
view: {
selectedMulti: false
},
data : {
keep : {
leaf : true,
parent : true
},
simpleData : {
enable : true,
idKey : "treeId",
pIdKey : "parentId"
}
},
check: false,
callback: {
beforeClick:function(treeId, treeNode) {
if(treeNode.type == "class" || treeNode.type == "grade" ) {
return false;
}
},
onClick: function(event, treeId, treeNode, clickFlag) {
loadTableContent();
}
},
async:{
enable:true,
autoParam:['id'],
dataType: "text",
type:'post',
url:"getStudentTreeData.action",
dataFilter:function(treeId, parentNode, responseData) {
if(responseData.length > 0) {
var treeObj = $.fn.zTree.getZTreeObj("userTree");
treeObj.addNodes(parentNode, responseData);
if(parentNode.type == 'class') {
treeObj.selectNode(parentNode.children[0]);
loadTableContent();
}
} else {
if(parentNode.type == 'class') {
$.showFMsgBox(parentNode.name + "下没有学生", 3000);
}
}
}
}
};
createTree();
function createTree() {
$.fn.zTree.destroy();
$.ajax({
url:"loadGradeClassTreeData.action?oldYearId="+$("#year").val(),
type:"post",
dataType:"json",
success:function(jsonData) {
if(jsonData.length > 0) {
userTree = $("#userTree").zpTree(jsonData, user_tree_setting), nodes = userTree.getNodes();
var flag = true;
if(nodes){
$.each(nodes, function(i, node) {
if(flag && node.children && node.children.length > 0){//当判断子节点的时候没有数据便去进行异步加载获取数据
userTree.expandNode(node, true);
var cNodes = node.children;
if(cNodes){ /当判断子节点的时候没有数据便去进行异步加载获取数据
$.each(cNodes, function(i, cnode){
if(flag){
userTree.expandNode(cnode, true);
flag = false;
}
})
}
}
});
}
}
}
});
}
</script>