sciter封装穿梭器组件总结

Posted 岁月可贵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sciter封装穿梭器组件总结相关的知识,希望对你有一定的参考价值。

sciter穿梭器组件封装总结

以下穿梭器组件分为两种,一种是树形结构穿梭器,另外一种是列表结构穿梭器。

最终实现的效果:调用方可以通过抛出方法,对组件进行初始化,配置参数。组件根据参数生成相关组件。


穿梭器实现的功能点

  • 对数据项进行操作
    • 增加:点击增加按钮,可以从左容器中获取到被选中的数据项,并将其添加到右容器中。此时左容器中的数据项为禁止状态
    • 删除:点击删除按钮,可以从右容器中获取到被选中的数据项,并将其添加到左容器中。此时左容器中的数据项后根据右容器传递过来的数据项进行匹配解除禁止状态。
    • 清空:点击清空按钮,可以从右容器中获取所有数据项,并将其添加到左容器中。同理:此时左容器数据项也会解除禁止状态
  • 头部实时记录被选中的列表数据项或叶子数据项的数量
  • 搜索:根据配置参数来确定是否配置搜索功能
    • 搜索方法可以自定义方法,也可以使用默认搜索方法
  • 双击数据项:实现被双击数据项的增加(左容器)或删除(右容器)
  • 实现checkbox的三种状态(选中,未选中,非全选状态)

实现过程中出现的难点:

1、数据状态持久化

以上是关于sciter封装穿梭器组件总结的主要内容,如果未能解决你的问题,请参考以下文章

sciter组件封装总结

sciter组件封装总结

SciterSciter 结合 Preact 封装 图片查看器总结

sciter: 基于 sciter 封装通知栏组件

sciter:JSX 组件实现数据持久化

sciter:JSX 组件实现数据持久化