JavaScript高级编程之树节点搜索过滤的设计和实现

基于zTree树组件实现的对树节点的搜索过滤扩展组件,效果如下图:

过滤前树组件本身效果:


过滤后展示效果:


根据输入框的字符串自动匹配过滤树节点并对匹配的节点高亮展示,在树节点较多的情况下,能够有效提高树节点的选择效率,提高易用性。

实现的方式采用JavaScript高级编程中的组件化编程方式,基于zTree树组件,采用JS的原型构造模式开发的一个树节点过滤器组件。

包括的功能点如下:

1、支持自定义初始化加载树时所有节点是否展开(默认:true)

2、是否使用过滤器功能(默认:true)

3、过滤匹配的节点总数超过多少时全部节点收起(因为过多的节点展开展示影响浏览器的性能,允许自由设置可以展开的节点最大数)(默认:50)

4、支持鼠标在输入框中剪切和粘贴修改输入框的值触发自动匹配的效果(默认:true)

5、支持自定义开始匹配的字符串最少长度(字符串长度越长,匹配的精确度越大,效率越高)(默认:3)

6、支持自定义输入框中停止输入后多长时间后开始执行节点过滤方法,默认(默认:1000ms)


具体代码demo可下载附件获取:http://download.csdn.net/detail/baichuanzhong123/9602991


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白5167

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值