一种组件化树形控件的处理方法技术

本发明专利技术涉及WEB开发技术领域，特别涉及一种组件化树形控件的处理方法。本发明专利技术的方法包括如下步骤：1，将获取的数据整合为可遍历、具有层级关系的数据结构；然后，遍历数据，在数据的每一层中加入状态字段，并为其赋予默认值；2，根据状态构建包含对应所需HTML代码或监听事件的虚拟DOM对象；3，在子组件中写入树形控件的固定渲染部分的HTML代码，在渲染树形节点部分通过渲染函数对虚拟DOM对象进行遍历渲染；4，将HTML代码，树形控件的通用事件及样式组件化为子组件。本发明专利技术解决了树形控件统一维护、快速渲染问题；可以用于组件化树形控件的处理。

A processing method of component tree control

【技术实现步骤摘要】
一种组件化树形控件的处理方法
本专利技术涉及WEB开发
，特别涉及一种组件化树形控件的处理方法。
技术介绍
现如今的数据量日益庞大，不同的数据结构，需要用到不同的展示方式。而树形控件则是对某种数据层级关系的一种较好展示方式。由于表示层级关系的数据结构一般较为复杂，展示的数据量一般较多，用户可操作项多，且每层需要根据几种字段来表示其状态；因此，需要一种便于统一维护、能快速渲染且不会造成页面性能消耗的方式来创建树形控件。在树形控件中，由于需要较多地操作节点改变状态，因此需要页面渲染的次数较为频繁。在执行原生JS代码操作DOM时，浏览器会重新执行一遍构建DOM的流程，造成页面回流。频繁的进行DOM操作，如树形控件频繁的展开、折叠会多次进行重新构建；会造成浏览器卡顿，页面加载缓慢，从而影响用户体验。
技术实现思路
本专利技术解决的技术问题在于提供一种组件化树形控件的处理方法；基于虚拟DOM，可以避免回流，减少浏览器的性能消耗。本专利技术解决上述技术问题的技术方案是：所述的方法包括如下步骤：步骤1本文档来自技高网...

【技术保护点】
1.一种组件化树形控件的处理方法，其特征在于：所述的方法包括如下步骤：/n步骤1，将获取的数据整合为可遍历、具有层级关系的数据结构；然后，遍历数据，在数据的每一层中加入状态字段，并为其赋予默认值；/n步骤2，根据状态构建包含对应所需HTML代码或监听事件的虚拟DOM对象；/n步骤3，在子组件中写入树形控件的固定渲染部分的HTML代码，在渲染树形节点部分通过渲染函数对虚拟DOM对象进行遍历渲染；/n步骤4，将HTML代码，树形控件的通用事件及样式组件化为子组件。/n

【技术特征摘要】
1.一种组件化树形控件的处理方法，其特征在于：所述的方法包括如下步骤：
步骤1，将获取的数据整合为可遍历、具有层级关系的数据结构；然后，遍历数据，在数据的每一层中加入状态字段，并为其赋予默认值；
步骤2，根据状态构建包含对应所需HTML代码或监听事件的虚拟DOM对象；
步骤3，在子组件中写入树形控件的固定渲染部分的HTML代码，在渲染树形节点部分通过渲染函数对虚拟DOM对象进行遍历渲染；
步骤4，将HTML代码，树形控件的通用事件及样式组件化为子组件。


2.根据权利要求1所述的方法，其特征在于：步骤1中，
所述的数据结构包含根节点所有信息及其子节点的相关信息；
所述的状态是各个节点的展开、选中、选择或自定义状态；可以根据父组件传入的状态改变各个节点的状态。


3.根据权利要求1所述的方法，其特征在于：步骤2中，
所述的监听事件是指支持用户对节点操作并发生响应事件的动作事件；
所述的虚拟DOM对象是指装有真实DOM渲染所需的HTML、CSS和监听事件的一个对象集合。


4.根据权利要求2所述...

【专利技术属性】
技术研发人员：张跃聪，季统凯，
申请(专利权)人：国云科技股份有限公司，
类型：发明
国别省市：广东;44