事情的开始是做一个关键字搜索的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);