JavaScript高级编程之树节点搜索过滤的设计和实现
来源:互联网 发布:淘宝网店名可以改吗 编辑:程序博客网 时间:2024/05/13 01:26
基于zTree树组件实现的对树节点的搜索过滤扩展组件,效果如下图:
过滤前树组件本身效果:
过滤后展示效果:
根据输入框的字符串自动匹配过滤树节点并对匹配的节点高亮展示,在树节点较多的情况下,能够有效提高树节点的选择效率,提高易用性。
实现的方式采用JavaScript高级编程中的组件化编程方式,基于zTree树组件,采用JS的原型构造模式开发的一个树节点过滤器组件。
包括的功能点如下:
1、支持自定义初始化加载树时所有节点是否展开(默认:true)
2、是否使用过滤器功能(默认:true)
3、过滤匹配的节点总数超过多少时全部节点收起(因为过多的节点展开展示影响浏览器的性能,允许自由设置可以展开的节点最大数)(默认:50)
4、支持鼠标在输入框中剪切和粘贴修改输入框的值触发自动匹配的效果(默认:true)
5、支持自定义开始匹配的字符串最少长度(字符串长度越长,匹配的精确度越大,效率越高)(默认:3)
6、支持自定义输入框中停止输入后多长时间后开始执行节点过滤方法,默认(默认:1000ms)
具体代码demo可下载附件获取:http://download.csdn.net/detail/baichuanzhong123/9602991
0 0
- JavaScript高级编程之树节点搜索过滤的设计和实现
- 《JavaScript高级编程设计》之变量、作用域和内存的问题
- 轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点
- Google搜索的高级功能 -- 按时间过滤搜索结果
- 找出二叉搜索树的最大节点和最小节点
- ExtJs+SHH实现异步树节点搜索和查找
- 《JavaScript高级编程》,removeChild()后,节点不存在于document中
- ionic-基于angularjs和javascript实用的顶部搜索过滤组件
- jquery 实现百度搜索过滤的例子
- 二叉搜索树建立、插入、删除、前继节点、后继节点之c++实现
- Java实现二叉搜索树节点的删除
- 关于easyui tree控件树节点的搜索实现
- Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- Android实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- Android实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- Android实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- Android实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- my学习OC--字符串NSString
- hdu Lweb and String ( LIS)
- 一个人安静了才能看见自己的内心吧
- XStream Mode
- 安装maven时遇到的一些问题
- JavaScript高级编程之树节点搜索过滤的设计和实现
- 华为OJ——名字的漂亮度
- ubuntu 16.04LTS 下Code::Blocks + Opencv3.1开发环境配置
- go-struct、方法
- Android 蓝牙音箱开发
- 调试安卓程序
- 数据结构-二叉堆
- mysql应用笔记
- NSSet 集合创建,获取,遍历,可变集合的删除 - iOS