首页 前端知识 关于jquery使用xmSelect的时候动态设置不同属性效果

关于jquery使用xmSelect的时候动态设置不同属性效果

2024-08-30 03:08:58 前端知识 前端哥 182 819 我要收藏

关于jquery使用xmSelect的时候动态设置不同属性效果

hello,小伙伴们,今天给大家带来的是关于jquery在使用xmSelect的时候动态设置不同的属性效果。现在应该有很少小伙伴们在处理关于jquery的东西了,最近在维护一下老项目的时候,发现一处使用jquery进行对xmSelect的动态设置,感觉挺有意思的,拿出来和大家分享一下,如果有需要的可以作为参考,如果有描述不对的地方,还请可以在评论留言。

话不多说,现在就开始和大家一起分享。

动态配置禁用

  • 关于用过或了解过xmSelect的小伙伴都知道,想将某些选项设置禁用的效果,可以在初始化的时候对特定选项进行设置disabled为true,这个时候,渲染出来的这个选项就会出现禁用的效果。
  • 但是如果想通过其他的选项或者是因素进行对某个xmSelect选择框里的数据进行筛选性的禁用,初始化就不好使了。这个时候有的小伙伴们可以说使用.render()的方法,进行重新渲染该xmSelect,就可以实现了。如果你的回调函数是放到了渲染xmSelect里面,这个方法是可以实现的。但如果是多个xmSelect的时候,并且每个回调函数都不一样,都是作为callBack参数进行传进去的,就不能使用render了,他重新渲染的时候,是不会渲染你的自定义回调的。这个时候就可以使用以下这种方法。
    • 虽然不能重新渲染,但我们可以获取xmSelect的渲染实例对象,xmSelect.get(id,true),这个时候我们可以拿到一个对象。
    • 然后一步步找到自己想要的数据(data),然后通过循环进行对数据进行筛选和操作。
    • 这个时候发现尽管自己设置了disabled,并且重新获取的实例对象中的数据也是设置成功的,就是页面不会发生回显处理,这个时候我们就要需求添加一步——重新操作dom元素,可以是获取选中的内容(.getValue()),也可以是主动打开选择面板(opened),或者是主动关闭选择(closed),这样自己设置的就可以生效了。

动态配置展开和收起

  • 当我们进行多选的时候,会出现一次性选择很多个,会导致咱们的选择框变的很高(为了展示全部选中项),但是我们如果只是单纯设置showCount,虽然可以解决多行展示的问题,但是去没办法有之前那种可以一目了然的效果了,那我们如何做到不需要的时候是收起的,想看到全部的时候是展开的呢?
  • 有的小伙伴可能已经想到了,那就是动态配置showCount的值,当showCount设置10个的时候,就是最多只会展示10个,多余的内容就是N+的效果显示,当设置为0的时候,就是可以呈现展开的效果。
  • 使用方法和禁用一样,大家可以参考禁用的方法。

关于其他的动态配置的效果,都可以利用这个方法进行实现。
好了今天的反向就到这里了,如果有更好的方法可以留言,我们一起讨论一下吧!再回!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17171.html
标签
评论
发布的文章

npm install 报错解决记录

2024-09-09 00:09:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!