easyui-tree/combotree 子节点前端懒加载（主要解决ie11下加载慢

「爱情、让人受尽委屈。」 2021-12-03 21:11 845阅读 0赞

## 场景 ##

最近在项目开发上遇到了easyui-comboxtree （下拉树）在IE11下加载缓慢、导致页面卡顿的情况，对比分析了一下发现，树的数据量越大页面加载就越缓慢。由于数据是一次性塞到组件上的，把大量树形数据递归转换成树形dom再渲染到页面上，必然会导致页面的性能问题。因此选择使用子节点懒加载方式解决。

[官方文档里采用的懒加载方式][Link 1]是通过 `url` 属性和后台服务配合实现的，我看不懂而且也没有现成的接口可以用，只有一个接口能一次性拿到所有数据，基于目前的条件只能做一个伪懒加载，但至少可以解决ie11下的加载问题。

## 树形数据结构 ##

var treeData = [ { id: '1', parentId: '0', text: '兰州新区', state: 'closed', children: [ { id: '11', parentId: '1', text: '秦川园区', state: 'closed', children: [ { id: '111', parentId: '2', text: '新昌村', state: 'closed', children: [] } ] }, { id: '12', parentId: '1', text: '中川园区', state: 'closed', children: [] } ] } ]

## 递归树查询（根据id查询节点下的子节点数据 ##

//data-树形数据 id-要查询的节点 function findTreeChildNodes(data, id){ if(data.id == id) return data.children for(var i =0; i < data.children.length; i++){ //ie11不支持es6 支持的环境可以用of语法遍历 var res = findTreeChildNodes(data.children[i], id) if(res) return res } }

## easyui-combotree/tree 的配置 ##

var rootNode = JSON.parse(JSON.stringify(treeData)) rootNode.children = []//初始化只渲染根节点数据 $('#cb-tree').combotree({ data: rootNode, onBeforeExpand: function(node){ if(node.isLoaded) return var childs = findTreeChildNodes(treeData[0], node.id) childs.map(function(){ if(e.children.length){ e.children = []//清空获取的子节点数据下的孙子节点 否则会把子级全部加载出来 如果数据量大 会造成卡顿 e.state = 'closed' } }) var tree = $('#cb-tree').combotree('tree')//如果是tree组件 使用$('x').tree()即可 tree.tree('append', { parent: node.target, data: childs }) //标记此节点已经加载过数据 tree.tree('update', { target: node.target, isLoaded: true }) } })

到这里 `easyui` 树形控件的子节点伪懒加载功能就已经完成了，实现真正的懒加载还是需要后台接口来配合。首先，我们这里一开始就加载全部数据，造成了数据资源浪费；其次，前端本不应该负责大数量的数据处理。

转载于:https://www.cnblogs.com/qimeng/p/11208693.html

[Link 1]: http://www.jeasyui.com/tutorial/tree/tree2.php