哎呀妈呀!!!ztree又踩坑了 节点全展开 搜索词加颜色

246 阅读2分钟

事情的开始是做一个关键字搜索的ztree列表,关键词在ztree列表里高亮显示!!!

开始我是这样写的

// $(obj).val() 就是检索的关键字
var Ztree = $.fn.zTree.init($("#zTreeId"), setting, resData);var nodes = Ztree.getNodesByParamFuzzy("name", $(obj).val(), null);for (var i = 0; i < nodes.length; i++) {    
    var name = nodes[i].name;    
    var highlight = name.replace($(obj).val(), '<em style="color:#f00;font-style: normal;">'+$(obj).val()+'</em>');    
    nodes[i].name = highlight;  
    Ztree.updateNode(nodes[i]);}
Ztree.expandAll(true);

哎呀呀 这样写有一个弊端就是,当请求的返回的数据resData返回的超多的时候, 他会先显示一级数据 然后显示展开的全部数据 就有一秒的卡壳 这个体验就非常的不友好 并且我今天才知道expandAll这个方法它是异步的, 

# ztree中expandAll这个方法为什么是异步的

**ztree 中的 expandAll 方法是异步的,因为在展开所有节点时,需要对每个节点进行遍历,并且在遍历过程中需要对每个节点的子节点进行加载。如果 expandAll 方法是同步的,那么在展开所有节点时,页面将处于阻塞状态,直到所有节点都加载完成。这可能会导致页面加载缓慢,甚至导致浏览器崩溃。 为了避免这种情况,ztree 将 expandAll 方法设计为异步的。这样,在展开所有节点时,页面将不会处于阻塞状态,并且用户可以在页面加载的同时进行其他操作。**

**ztree 中的 expandAll 方法是通过 setTimeout 函数来实现异步执行的。setTimeout 函数会在指定的毫秒数后执行指定的函数。在 ztree 中,expandAll 方法会在 100 毫秒后执行。这使得页面有足够的时间来加载所有节点,而不会导致页面阻塞。**

正确的写法应该是在请求的数据返回的时候 进行遍历 将每条数据的open字段 设置为true,并且同时可以将name里需要高亮显示的词也进行替换

$.each(resData, function (index, item) {    
    var name = item.name;    
    var highlight = name.replace($(obj).val(), '<em style="color:#f00;font-style: normal;">'+$(obj).val()+'</em>');    
    item.name = highlight;    
    item.open = true    
})
$.fn.zTree.init($("#zTreeId"), Setting, resData);