本文主要介绍了jquery ztree树插件动态加载效果的实例代码,需要的朋友可以参考下，希望能帮助大家更好理解ztree功能。
需求：
由于项目中家谱图数据量超大，而一般加载方式是通过，页面加载时 ztree.init方法进行数据加载，将所有数据一次性加载到页面中。而在项目中家谱级别又非常广而深，成千上万级，因此一次加载，完全加载不出来。于是需要进行优化为动态加载（增量加载）的方式，以便数据加载，提高体验度。
解决断路：
这应该好办，只要找到父节点单击事件，然后进行数据加载，结点附加即可。时间紧，任务重，完全没给研究的时间。只能硬着上，随便搜索一个“ztree动态加载”，出是出来了，标题也对，可里面的代码根本没找到添加结点一说……一边是需求催，一边是没找到类似。无语……对啊，不是有官网，于是把所有api函数浏览一遍，终于发现一个叫addnodes的函数。喜！
控件代码
<p class="usertree">
<ul id="treedemo" class="ztree"></ul>
</p>
脚本代码（实现结点展开、单击事件时进行动态加载）：
<script>
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, treeid, treenode, clickflag) {
addsubnode(treenode);
}
function addsubnode(treenode) {
if (!treenode.isparent) return;
var s = treenode.children;
if (s != undefined)
return;
$.ajax({
cache: true,
type: get,
url: /user/nextleve,
data: { userid: treenode.id },
async: true,
success: function (data) {
ztree.addnodes(treenode, data);
},
error: function (data) {
alert(error);
}
});
}
</script>
其中后端请求：
其中数据来源为请求路径“/user/nextleve?userid=xxx”，为返回如下结构的列表的json数据（即list<usernode>类型的.tojson()数据），其中userid可为，为空时默认取当前登录用户：
public class usernode
{
public long id { get; set; }
public long pid { get; set; }
public string name { get; set; }
public bool open { get; set; }
public bool isparent { get; set; }
public string icon { get; set; }
}
效果，则实现为单击父结点/展开父结点时动态加载子结点。
相关推荐：
jquery中ztree树插件使用分享
实例详解jquery easyui结合ztree树形结构制作web页面
实例讲解jquery使用ztree插件实现可拖拽功能
以上就是jquery ztree树插件动态加载的详细内容。