CN110825382A - 一种前端大数据树形结构展示方法 - Google Patents

一种前端大数据树形结构展示方法 Download PDF

Info

Publication number
CN110825382A
CN110825382A CN201910971377.4A CN201910971377A CN110825382A CN 110825382 A CN110825382 A CN 110825382A CN 201910971377 A CN201910971377 A CN 201910971377A CN 110825382 A CN110825382 A CN 110825382A
Authority
CN
China
Prior art keywords
tree
nodes
node
tree structure
dom
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201910971377.4A
Other languages
English (en)
Inventor
郑胜伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Unicloud Nanjing Digital Technology Co Ltd
Original Assignee
Unicloud Nanjing Digital Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Unicloud Nanjing Digital Technology Co Ltd filed Critical Unicloud Nanjing Digital Technology Co Ltd
Priority to CN201910971377.4A priority Critical patent/CN110825382A/zh
Publication of CN110825382A publication Critical patent/CN110825382A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/42—Syntactic analysis
    • G06F8/427—Parsing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/901—Indexing; Data structures therefor; Storage structures
    • G06F16/9027—Trees
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Abstract

本发明公开了一种前端大数据树形结构展示方法。涉及计算机技术领域。包括以下步骤：确定需要进行前端展示树形结构的原数据，通过递归组件将原数据转换成DOM结构的扁平数组；获取根节点DOM，并分成两个子节点，两个字节点都是绝对定位，为了在滚动时避免数据的更改回头触发滚动事件；通过获取两个节点高度、以及滚动条位置，获取展示虚拟列表长度，计算出需要展示的起始节点，以及结束节点。本发明通过将树形结构树进行扁平化管理，通过空间来换时间，达到快速渲染效果；和建立虚拟显示长度，减少渲染节点数量，达到大数据量渲染效果。

Description

一种前端大数据树形结构展示方法
技术领域
本发明属于计算机技术领域，特别是涉及一种前端大数据树形结构展示方法。
背景技术
随着信息化技术的发展，各种信息化的web应用系统越来越多。用树形结构展现数据在web应用中有着很广泛的应用，如用于显示带有上下级关系的组织结构和用户关系、用于显示层级的菜单等等。树形结构能最直观地呈现出数据间的父子关系。
树形结构最基本的单元是节点，一个常见的树形结构包括根节点、分支节点和叶子节点。在客户端应用程序中一般通过使用的开发语言提供的树形控件来实现，而在web应用程序中因为没有相应的控件，需要采用其它如JavaScript、CSS等页面技术来实现。前端展示过程中，用的比较多的是递归版tree，将栈数据的读取交给解析器(引擎)来完成，递归版tree渲染存在着性能问题(基于10000个节点数据):script耗时执行超过8s—耗时主要是在实例创建上面(一般展示需要在3s内)；render耗时主要集中在Recalculate Style、Layout—主要是界面显示样式，有10000个节点需要渲染10000次；DOM结构节点数不好控制—DOM不仅有纵向的结构也同时有嵌套的结构。
发明内容
本发明的目的在于提供一种前端大数据树形结构展示方法，通过将树形结构树进行扁平化管理，通过空间来换时间，达到快速渲染效果；和建立虚拟显示长度，减少渲染节点数量，达到大数据量渲染效果，解决了现有的render耗时主要集中在RecalculateStyle、Layout—主要是界面显示样式，有10000个节点需要渲染10000次；DOM结构节点数不好控制的问题。
为解决上述技术问题，本发明是通过以下技术方案实现的：
本发明为一种前端大数据树形结构展示方法，包括以下步骤：
确定需要进行前端展示树形结构的原数据，通过递归组件将原数据转换成DOM结构的扁平数组；
获取根节点DOM，并分成两个子节点，两个字节点都是绝对定位，为了在滚动时避免数据的更改回头触发滚动事件；
通过获取两个节点高度、以及滚动条位置，获取展示虚拟列表长度，计算出需要展示的起始节点，以及结束节点。
进一步地，所述前端树形结构展示主要包含了后端数据获取、树形节点实例化、树形节点样式渲染。
进一步地，所述递归组件为解析器引擎。
进一步地，所述两个子节点分别为fui-tree phantom和fui-tree content。
本发明具有以下有益效果：
1、本发明将树形结构树进行扁平化管理，通过空间来换时间，达到快速渲染效果，可以支持到20w条节点，响应时间(10000个节点)从8s优化到了0.4s，改善用户体验，增强系统健壮性。
2、本发明通过建立虚拟显示长度，减少渲染节点数量，达到大数据量渲染效果。
当然，实施本发明的任一产品并不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明的流程示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
在本发明的描述中，需要理解的是，术语“开孔”、“上”、“下”、“厚度”、“顶”、“中”、“长度”、“内”、“四周”等指示方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的组件或元件必须具有特定的方位，以特定的方位构造和操作，因此不能理解为对本发明的限制。
请参阅图1所示，本发明为一种前端大数据树形结构展示方法，包括以下步骤：
确定需要进行前端展示树形结构的原数据，通过递归组件将原数据转换成DOM结构的扁平数组；前端树形结构展示主要包含了后端数据获取、树形节点实例化、树形节点样式渲染；递归组件为解析器引擎；具体实现程序如下：
<div style＝"margin-left：0px；">父节点
<label class＝"fui-checkbox")＝＝$0
<span class＝"fui-checkbox_input"y..</span>
<span class＝"fui-checkbox_label">
“一级“
<！--->
</span>
</1abel>
</div>
<div style＝"margin-left：20px；“>子节点
<labelclass＝"fui-checkbox">
<span c1ass＝"fui-checkbox_input">＝</span>
<<span class＝"fui-checkbox_label")
“子节点0”
获取根节点DOM(DOM是这样规定的：整个文档是一个文档节点从每个XML标签是一个元素节点包含在XML元素中的文本是文本节点每一个XML属性是一个属性节点注释属于注释节点)，并分成两个子节点，两个子节点分别为fui-tree phantom和fui-treecontent，两个字节点都是绝对定位，为了在滚动时避免数据的更改回头触发滚动事件；
通过获取两个节点高度、以及滚动条位置，获取展示虚拟列表长度，计算出需要展示的起始节点，以及结束节点。
在本说明书的描述中，参考术语“一个实施例”、“示例”、“具体示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。

Claims (4)

1.一种前端大数据树形结构展示方法，其特征在于，包括以下步骤：
确定需要进行前端展示树形结构的原数据，通过递归组件将原数据转换成DOM结构的扁平数组；
获取根节点DOM，并分成两个子节点，两个字节点都是绝对定位，为了在滚动时避免数据的更改回头触发滚动事件；
通过获取两个节点高度、以及滚动条位置，获取展示虚拟列表长度，计算出需要展示的起始节点，以及结束节点。
2.根据权利要求1所述的一种前端大数据树形结构展示方法，其特征在于，所述前端树形结构展示主要包含了后端数据获取、树形节点实例化、树形节点样式渲染。
3.根据权利要求1所述的一种前端大数据树形结构展示方法，其特征在于，所述递归组件为解析器引擎。
4.根据权利要求1所述的一种前端大数据树形结构展示方法，其特征在于，所述两个子节点分别为fui-tree phantom和fui-tree content。
CN201910971377.4A 2019-10-14 2019-10-14 一种前端大数据树形结构展示方法 Pending CN110825382A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910971377.4A CN110825382A (zh) 2019-10-14 2019-10-14 一种前端大数据树形结构展示方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910971377.4A CN110825382A (zh) 2019-10-14 2019-10-14 一种前端大数据树形结构展示方法

Publications (1)

Publication Number Publication Date
CN110825382A true CN110825382A (zh) 2020-02-21

Family

ID=69549053

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910971377.4A Pending CN110825382A (zh) 2019-10-14 2019-10-14 一种前端大数据树形结构展示方法

Country Status (1)

Country Link
CN (1) CN110825382A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111857490A (zh) * 2020-07-17 2020-10-30 苏州易卖东西信息技术有限公司 一种基于vue实现的支持多树结构的下拉选择组件构建方法
CN112434030A (zh) * 2020-11-11 2021-03-02 上海芯翌智能科技有限公司 基于树形结构数据的高性能列表实现方法与设备
CN112506509A (zh) * 2020-12-11 2021-03-16 杭州安恒信息技术股份有限公司 一种实现树形控件支持大数据渲染的方法及相关装置
CN113642292A (zh) * 2021-07-14 2021-11-12 广州市玄武无线科技股份有限公司 一种树形列表的实现方法、系统、设备及存储介质
CN116931783A (zh) * 2023-09-15 2023-10-24 中建三局信息科技有限公司 一种前端海量树形结构展示方法、装置、电子设备及介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
叶雨森: "前端tree组件，10000个树节点，从12.19s到0.49s", 《HTTPS://JUEJIN.CN/POST/6844903766479634446》 *

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111857490A (zh) * 2020-07-17 2020-10-30 苏州易卖东西信息技术有限公司 一种基于vue实现的支持多树结构的下拉选择组件构建方法
CN112434030A (zh) * 2020-11-11 2021-03-02 上海芯翌智能科技有限公司 基于树形结构数据的高性能列表实现方法与设备
CN112506509A (zh) * 2020-12-11 2021-03-16 杭州安恒信息技术股份有限公司 一种实现树形控件支持大数据渲染的方法及相关装置
CN112506509B (zh) * 2020-12-11 2024-02-09 杭州安恒信息技术股份有限公司 一种实现树形控件支持大数据渲染的方法及相关装置
CN113642292A (zh) * 2021-07-14 2021-11-12 广州市玄武无线科技股份有限公司 一种树形列表的实现方法、系统、设备及存储介质
CN113642292B (zh) * 2021-07-14 2022-06-14 广州市玄武无线科技股份有限公司 一种树形列表的实现方法、系统、设备及存储介质
CN116931783A (zh) * 2023-09-15 2023-10-24 中建三局信息科技有限公司 一种前端海量树形结构展示方法、装置、电子设备及介质

Similar Documents

Publication Publication Date Title
CN110825382A (zh) 一种前端大数据树形结构展示方法
CN107451296B (zh) 一种基于组件的网站模块化渲染方法
JP4339554B2 (ja) 階層データを表示するユーザインタフェースを作成し表示するためのシステムおよび方法
US8407585B2 (en) Context-aware content conversion and interpretation-specific views
US20110219321A1 (en) Web-based control using integrated control interface having dynamic hit zones
US20080134019A1 (en) Processing Data And Documents That Use A Markup Language
CN101799753A (zh) 一种实现树形结构的方法及装置
WO2006137565A1 (ja) 文書処理装置及び文書処理方法
US9817811B2 (en) Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method
US20140013211A1 (en) Content providing apparatus compatible with various terminal devices
CN102065114A (zh) 一种移动终端访问网页的方法及装置
JP4521408B2 (ja) 文書処理装置及び文書処理方法
CN103593414A (zh) 一种浏览器中网页的展现方法和装置
JPWO2006051958A1 (ja) 情報配信システム
CN106162302B (zh) 一种Launcher主界面的编排方法、装置及智能电视
CN1316782C (zh) 在b/s结构中实现树型结构的方法
CN112035197A (zh) 一种前端页面的配置方法及装置
JPWO2006051954A1 (ja) 文書処理装置及び文書処理方法
CN110377371B (zh) 一种基于Web标签的样式表系统管理方法
US20080282150A1 (en) Finding important elements in pages that have changed
CN115935944A (zh) 一种跨平台的标准文件树形结构生成方法与展示控件
US20070283246A1 (en) Processing Documents In Multiple Markup Representations
WO2007081017A1 (ja) 文書処理装置
JP4723511B2 (ja) 文書処理装置及び文書処理方法
CN112433995A (zh) 文件格式转换方法、系统、计算机设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20200221