需求:
由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中。而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全加载不出来。于是需要进行优化为动态加载(增量加载)的方式,以便数据加载,提高体验度。
这应该好办,只要找到父节点单击事件,然后进行数据加载,结点附加即可。时间紧,任务重,完全没给研究的时间。只能硬着上,随便搜索一个“zTree动态加载”,出是出来了,标题也对,可里面的代码根本没找到添加结点一说……一边是需求催,一边是没找到类似。无语……对啊,不是有官网,于是把所有api函数浏览一遍,终于发现一个叫addNodes的函数。喜!
var zNodes;
var zTree;
$(function () {
$.ajax({
cache: true,type: "get",url: "/User/NextLeve",async: false,success: function (data) {
zNodes = data;
},error: function (data) {
alert("error");
}
});
zTree = ZTreeCustom.init($("#treeDemo"),setting,zNodes);
zTree.expandAll(false);
})
var setting = {
view: {
nameIsHTML: true
},data: {
simpleData: {
enable: true
},keep: {
parent: true
}
},open: false,callback: {
onClick: nodeClick,onExpand: function (event,treeId,treeNode) {
addSubNode(treeNode);
}
}
};
function showIconForTree(treeId,treeNode) {
return !treeNode.isParent;
};
function searchM() {
var username = $("#txtName").val()
}
function nodeClick(event,treeNode,clickFlag) {
addSubNode(treeNode);
}
function addSubNode(treeNode) {
if (!treeNode.isParent) return;
var s = treeNode.children;
if (s != undefined)
return;
$.ajax({
cache: true,data: { userId: treeNode.id },async: true,success: function (data) {
zTree.addNodes(treeNode,data);
},error: function (data) {
alert("error");
}
});
}