zTree分批异步加载方式下实现节点搜索功能

Shisui 发布于2019-08-19 17:55 / 2514人阅读

摘要：这个方法我是参考精通上面关于等待页面加载完的方法来写的如果树已经加载完，马上执行函数获取没有异步加载过的节点如果节点数为零则说明已经加载完执行函数定义了这个方法，然后就可以在这个方法实现实现你要搜索的功能了在这里写搜索节点的代码

最近公司做一个项目用到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() {
    // 在这里写搜索节点的代码
    ...
});

服务器托管私有云搜索功能java实现 js分批加载数据 ztree选中节点 ztree获取选中节点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78978.html

zTree分批异步加载方式下实现节点搜索功能

摘要：如果树已经加载完，马上执行函数获取没有异步加载过的节点如果节点数为零则说明已经加载完执行函数实现搜索功能定义了这个方法，然后就可以在这个方法实现实现你要搜索的功能了。前言最近公司做一个项目用到zTree，zTree功能强大就不用多说了，相信用过的人都知道。公司项目因为要展示的节点非常多，所以要求要实现搜索节点的功能，zTree确实很强大，它提供了getNodesByParamByF...

kaka 2019-08-19 18:00 评论0 收藏0
zTree -- jQuery 树插件构造treeNode JSON 数据对象

摘要：前言是一个依靠实现的多功能树插件。不同的树目录根据不同的数据，在服务器端编写好不同的，将其配置在这里即可。依赖获取的数据类型，默认值。依赖用于对返回数据进行预处理的函数。详细说明参见文档代码还是树插件使用方法与例子中的那个，不在重复粘贴。前言 zTree 是一个依靠 jQuery 实现的多功能树插件。网址：http://www.ztree.me/v3/main.p... 上回说到...

周国辉 2019-08-21 10:50 评论0 收藏0
zTree -- jQuery 树插件使用方法与例子

摘要：简介是一个依靠实现的多功能树插件。使用说明下载文件将需要使用的相关的文件分别放置到相应目录，并且保证相对路径正确。页面分别在和中引入文件，如代码所示。设置是否显示节点的图标。简介 zTree 是一个依靠 jQuery 实现的多功能树插件。网址：http://www.ztree.me/v3/main.p... 上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指...

hightopo 2019-08-19 17:44 评论0 收藏0
淘宝新势力周H5性能优化实战

摘要：前言淘宝新势力周春上新是命运石链路链路第一次承接级大促，面对级大促内容丰富且复杂的页面需求，链路遇到了一些性能问题，在未进行性能优化之前，搭建出来的页面，业务方普遍反馈页面卡顿严重，无法滑动。前言淘宝新势力周（春上新）是命运石kimi链路（H5链路）第一次承接S级大促，面对S级大促内容丰富且复杂的页面需求，kimi链路遇到了一些性能问题，在未进行性能优化之前，搭建出来的页面，业务方...

Lionad-Morotar 2019-08-22 16:17 评论0 收藏0