近来公司做一个项目用到zTree,zTree功用壮大就不必多说了,置信用过的人都晓得。
公司项目由于要展现的节点异常多,所以请求要完成搜刮节点的功用,zTree确切很壮大,它供应了getNodesByParamByFuzzy(key, value, parentNode)要领可根据关键字举行隐约查询获得想要的节点,极为轻易。然则题目来了,由于要读取节点的数据量很大,节点的数目有几万个以至更多,考虑到机能和时候上的题目,因而不能一次性把悉数节点数据读取出来,这里我采纳的是zTree自带的分批异步加载形式。然则如许就又造成了别的一个题目,再运用getNodesByParamByFuzzy这个要领时便只能找到已加载出来的节点,而没法找到还没有举行加载的节点,从而运用户体验不好。
为了处理这个题目,刚开始的主意是每次都去数据库查询数据,每次只显示搜刮到的第一条效果,然后再举行下一条查询,查到末了一条时又返回第一条,现实如许的思绪是行的通的,然则如许完成起来异常贫苦,而在项目中一般都不止一棵树,难不成每棵树都要如许,为了这小小的功用却要写云云多的代码着实恶心,空话不多说,下面是我本身想的以为比较好的要领。看下面代码:
// 节点加载完的回调函数,加载体式格局照旧是分批加载,然则不是等用户睁开节点才去加
// 载,而是让它自动完成加载,这里不好的处所是照旧要加载悉数数据,所以必需守候
// 它加载完才运用搜刮功用
function onAsyncSuccess(event, treeId, treeNode, msg) {
var zTreeObj = $.fn.zTree.getZTreeObj();
// 这个要领是将规范 JSON 嵌套花样的数据转换为简朴 Array 花样
var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
for (var i = 0; i < nodes.length; i++) {
// 推断节点是不是已加载过,假如已加载过则不须要再加载
if (!nodes[i].zAsync) {
zTreeObj.reAsyncChildNodes(nodes[i], '', true);
}
}
}
所以还必需定义多一个推断树节点是不是已悉数加载完的要领。这个要领我是参考《通晓JavaScript》上面关于守候页面加载完的要领来写的
function treeAsyncReady(treeId, f) {
// 假如树已加载完,立时实行函数
if (treeAsyncReady.done) {
return f();
}
var zTreeObj = $.fn.zTree.getZTreeObj();
treeAsyncReady.timer = setInterval(function() {
if (treeAsyncReady.done) {
return false;
}
// 猎取没有异步加载过的节点
var nodes = zTreeObj.getNodesByFilter(funciton(node) {
return !node.zAsync;
});
// 假如节点数为零则申明已加载完
if (nodes.length == 0) {
clearInterval(treeAsyncReady.timer);
treeAsyncReady.timer == null;
// 实行函数
f();
treeAsyncReady.done = true;
}
}, 13);
}
定义了这个要领,然后就能够在这个要领完成完成你要搜刮的功用了
treeAsyncReady('treeId', function() {
// 在这里写搜刮节点的代码
...
});