easyui-combotree数据量较大时，渲染速度问题

最新推荐文章于 2021-04-17 16:51:33 发布

众秒之门

最新推荐文章于 2021-04-17 16:51:33 发布

阅读量1.2k

点赞数

文章标签： easyui

本文链接：https://blog.youkuaiyun.com/webcamds/article/details/108523761

版权

当easyui-combotree组件面临大量数据时，原生渲染导致延迟。通过分析源码，发现过滤逻辑中查找并显示匹配节点的父级操作是性能瓶颈。为提高性能，可以考虑舍弃部分用户体验，重写doFilter方法，不再递归显示父节点。另一种解决方案是实现前端节点懒加载，以减少初始渲染的数据量。欢迎高手交流指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用easyui-combotree组件时，如果数据量特别大，又不想做节点懒加载，需要一次性把数据渲染出来，这个时候组件加载需要耗时很久（点击下拉后需要过很久才弹出下拉面板）。怎么解决呢？

直接撸源码：
找到tree下的doFilter，

doFilter:function(jq,q){
    return jq.each(function(){
        _f5(this,q);
    });
}

ok,找一下_f5这个方法：

function _f5(_f6,q){
    var _f7=$.data(_f6,"tree");
	var _f8=_f7.options;
	var ids={};
	$.easyui.forEach(_f7.data,true,function(_f9){
		if(_f8.filter.call(_f6,q,_f9)){
			$("#"+_f9.domId).removeClass("tree-node-hidden");
			ids[_f9.domId]=1;
			_f9.hidden=false;
		}else{
			$("#"+_f9.domId).addClass("tree-node-hidden");
			_f9.hidden=true;
		}
	});
	for(var id in ids){
		_fa(id);
	}
	function _fa(_fb){
		var p=$(_f6).tree("getParent",$("#"+_fb)[0]);
		while(p){
			$(p.target).removeClass("tree-node-hidden");
			p.hidden=false