一种穿梭框组件的实现方法技术

本发明专利技术涉及数据筛选技术领域，提供一种穿梭框组件的实现方法，本发明专利技术的方法包括：通过设置左侧数据盒子

【技术实现步骤摘要】
一种穿梭框组件的实现方法


[0001]本专利技术涉及数据筛选
，尤其涉及一种的穿梭框组件的实现方法
。

技术介绍

[0002]穿梭框组件是一种数据筛选组件，其左右各有一个复选框列表，可以将左侧选中的数据项移动到右侧，或者将右侧框内选中的数据项移回到左侧框，用于响应数据筛选的需求
。
[0003]在日常的开发中，数据筛选控件存在以下不足：
1.
操作繁琐，只能先选中要移动的节点，在通过点击中间的左右移动按钮进行操作，无法实现通过对节点直接拖拽；
2.
仅支持对列表数据的操作，不支持树形结构数据的筛选操作；
3.
组件在大数据场景中效率低，尤其是在数据库内数据很多的时候，组件变得十分卡顿，现有的
ui
框架也并未针对数据量非常大的时候给到合适的数据渲染方案，由于无法处理当数据量非常大的时候节点的渲染，导致用户不得不直接放弃使用组件
。
[0004]因此，如何实现一种操作更加简便
、
适用性更广且效率更高的穿梭框组件，成为亟待本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种穿梭框组件的实现方法，其特征在于，所述方法包括：通过设置左侧数据盒子
、
左右移动按钮和右侧数据盒子，为穿梭框组件设置页面布局；通过定义
hook
方法，为页面布局中的数据创建对应的数据操作方法；将创建的数据操作方法与对应的页面事件进行绑定；通过懒加载和虚拟列表滚动经过页面事件绑定的页面布局进行渲染
。2.
根据权利要求1所述的穿梭框组件的实现方法，其特征在于，通过设置左侧数据盒子
、
中间移动按钮和右侧数据盒子，为穿梭框组件设置页面布局，包括：将待处理的数据内置在左侧数据盒子和
/
或右侧数据盒子中，为每个数据设置对应的复选框
。3.
根据权利要求2所述的穿梭框组件的实现方法，其特征在于，当待处理的数据为树形结构节点，将待处理的树形结构节点内置在左侧数据盒子和
/
或右侧数据盒子中，为每个节点设置对应的复选框
。4.
根据权利要求1所述的穿梭框组件的实现方法，其特征在于，通过定义
hook
方法，为页面布局中的数据创建对应的数据操作方法，包括：创建控制数据变化对象，为创建的控制数据变化对象设置添加和移除方法；创建右侧列表数据对象，通过控制数据变化对象设置向右侧列表数据对象添加数据和从右侧列表数据对象删除数据的方法；通过将初始数据对象过滤右侧列表数据对象，获得左侧列表数据对象；通过创建拖拽对象并对创建的拖拽对象赋值，为数据设置可拖拽属性
。5.
根据权利要求4所述的穿梭框组件的实现方法，其特征在于，创建控制数据变化对象，为创建的控制数据变化对象设置添加和移除方法，包括：创建控制数据变化对象，为创建的控制数据变化对象设置向左
/
向右属性；通过向控制数据变化对象的向左
/
向右属性中添加节点，为控制数据变化对象设置添加方法；通过向控制数据变化对象的向左
/
向右属性中删除节点，为控制数据变化对象设置移除方法
。6.
根据权利要求4所述的穿梭框组件的实现方法，其特征在于，创建右侧列表数据对象，通过控制数据变化对象设置向右侧列表数据对象添加数据和从右侧列表数据对象删除数据的方法，包括：将右侧列表数据对象的初始数据设置为空数组，通过控制数据变化对象将在...

【专利技术属性】
技术研发人员：孙晓明，
申请(专利权)人：中电云计算技术有限公司，
类型：发明
国别省市：