前端扁平化数据转树形数据_一种前端大数据树形结构展示方法与流程

本发明属于计算机技术领域,特别是涉及一种前端大数据树形结构展示方法。

背景技术:

随着信息化技术的发展,各种信息化的web应用系统越来越多。用树形结构展现数据在web应用中有着很广泛的应用,如用于显示带有上下级关系的组织结构和用户关系、用于显示层级的菜单等等。树形结构能最直观地呈现出数据间的父子关系。

树形结构最基本的单元是节点,一个常见的树形结构包括根节点、分支节点和叶子节点。在客户端应用程序中一般通过使用的开发语言提供的树形控件来实现,而在web应用程序中因为没有相应的控件,需要采用其它如javascript、css等页面技术来实现。前端展示过程中,用的比较多的是递归版tree,将栈数据的读取交给解析器(引擎)来完成,递归版tree渲染存在着性能问题(基于10000个节点数据):script耗时执行超过8s—耗时主要是在实例创建上面(一般展示需要在3s内);render耗时主要集中在recalculatestyle、layout—主要是界面显示样式,有10000个节点需要渲染10000次;dom结构节点数不好控制—dom不仅有纵向的结构也同时有嵌套的结构。

技术实现要素:

本发明的目的在于提供一种前端大数据树形结构展示方法,通过将树形结构树进行扁平化管理,通过空间来换时间,达到快速渲染效果;和建立虚拟显示长度,减少渲染节点数量,达到大数据量渲染效果,解决了现有的render耗时主要集中在recalculatestyle、layout—主要是界面显示样式,有10000个节点需要渲染10000次;dom结构节点数不好控制的问题。

为解决上述技术问题,本发明是通过以下技术方

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值