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
原创粉丝点击