【技术实现步骤摘要】
一种应用于HTML5的大数据树组件实现方法及系统
本专利技术涉及HTML5前端
,具体涉及一种应用于HTML5的大数据树组件实现方法及系统。
技术介绍
随着互联网技术的不断发展,前端技术也开始日新月异,模块化/组件化成为了当前提高前端开发效率、降低WEB(页面)维护成本的首选开发模式。当前,树组件作为前端开发中最常见的组件之一,被广泛的应用于拥有层级关系的树状结构之中,基于html5(超文本5.0)的树组件较多,有专注于树控件的库,例如zTree(依靠jQuery实现的多功能树插件)、jsTree(基于javascript的跨浏览器树控件),也有专业的组件库,例如kendotree、zorrotree等,它们都具有以下功能特性:1、兼容IE、FireFox、Chrome等主流浏览器;2、支持静态和Ajax异步加载节点数据;3、支持自定义样式;4、支持灵活切换单选/多选;5、提供多种事件响应回调;6、支持模糊搜索节点;7、支持编辑(增/删/改/查)及拖拽节点。前端代码运行实体为浏览器,目前主流浏览器使用的渲染引擎 ...
【技术保护点】
1.一种应用于HTML5的大数据树组件实现方法,其特征在于,包括以下步骤:/n获取节点数据并发送至树组件;/n采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储,形成map集合;/n在map集合中获取视图中待显示的节点ID集合,并将所获取的节点ID集合发送至视图;/n基于视口所在位置,将视口所在位置节点ID集合对应的节点信息进行渲染呈现。/n
【技术特征摘要】
1.一种应用于HTML5的大数据树组件实现方法,其特征在于,包括以下步骤:
获取节点数据并发送至树组件;
采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储,形成map集合;
在map集合中获取视图中待显示的节点ID集合,并将所获取的节点ID集合发送至视图;
基于视口所在位置,将视口所在位置节点ID集合对应的节点信息进行渲染呈现。
2.如权利要求1所述的一种应用于HTML5的大数据树组件实现方法,其特征在于:所述节点信息包括节点展开状态、节点文本信息、节点选中状态、节点隐藏状态,以及checkbox对象的三态、禁用、隐藏。
3.如权利要求1所述的一种应用于HTML5的大数据树组件实现方法,其特征在于:所述采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储,形成map集合,具体步骤包括:
将节点数据的节点ID作为map数据结构的key关键字,节点数据的节点信息作为map数据结构的value值,对树组件所接收的节点数据进行存储,形成map集合。
4.如权利要求1所述的一种应用于HTML5的大数据树组件实现方法,其特征在于:所述基于视口所在位置,将视口所在位置节点ID集合对应的节点信息进行渲染呈现,具体步骤包括:
采用虚拟滚动方式缓存所有节点数据的节点ID;
基于视口的高度和单个节点数据的高度,得到视口所在位置的节点数据数量,以及视口所在位置的所有节点ID,形成节点ID集合;
根据所确定的节点ID集合,在map集合中获取节点ID集合内节点ID对应的节点信息,并对所获取的节点信息进行渲染呈现。
5.如权利要求1所述的一种应用于HTML5的大数据树组件实现方法,其特征在于,所述对所获取的节点信息进行渲染呈现之前,还包括:
将节点ID集合内节点ID对应的节点分成父节点集合和叶子节点集合两部分;
将父节点集合中父节点及父节点的check状态进行变更,叶子节点集合中节点的check状态进行变更;
从倒数第二的节点层级至根节点,计算出对应父节点的半选状态。
6.一种应用于H...
【专利技术属性】
技术研发人员:朱良栋,周婷,
申请(专利权)人:烽火通信科技股份有限公司,
类型:发明
国别省市:湖北;42
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。