layui的treeTablle大数据量加载缓慢的解决方案

最近公司的项目使用的layui框架开发权限相关业务,多个页面使用到了treetable。
这个treetable在较少数据量的时候加载还可以接受,在上千条数据以后,加上table的操作栏会变得非常的卡。

在明确了需求以后,尝试了多种方案,现在特来汇总一下给后续踩坑的朋友们。

1:使用layui自带的treeTable,这种方案只支持较少数据量,实测数据量在200条左右会出现略微卡顿,

2:使用layui的社区插件,例如layui的treegrid(实测性能也很一般)、或者souleTable(soulTable的展开方式有模拟树表,不过还在测试中,后续开发可以关注一下)

3:静态资源引入easyui,使用easyui的treegird。这是最终使用的方案。加载速度很满意,接近两千条数据2s加载完成,美中不足的就是没有操作栏,不过可以在右键选中当前行以后以弹窗操作的形式实现需求(就看各位的实际需求了)
值得注意的是:静态资源引入easyui跟layui并不冲突,相关的配置文件依然可以使用layui的layui.use方法引入到当前页面,赋值给全局变量。
在这里插入图片描述
在这里插入图片描述代码没有贴出来实际操作可能需要学习一下eaui的treegrid还有相关的dialog,combobox赋值,select赋值等,方法可行,符合需求请尽快动手实践吧

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐