layui列表筛选列_浅谈layui中的table字段筛选功能

本文介绍了layui框架table模块的字段筛选功能,包括实现思路、关键代码和存在的问题。通过给cols配置项添加filter属性来决定是否开启筛选,点击事件处理筛选逻辑,以及监听表格复选事件来显示或隐藏tr。同时指出多列筛选的复杂性,并分享了测试页面和项目链接。
摘要由CSDN通过智能技术生成

table模块在layui 2.0的版本中全新推出,是layui框架最核心的组成之一。本篇文章就来为大家介绍一下layui框架的table模块的字段筛选功能,希望对大家有一定的帮助。

先看效果,使用过excel的应该很熟悉

功能比较直白无需赘述,直接说实现思路还有需要解决的问题。

测试页面: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled

gitee项目: https://gitee.com/sun_zoro/layuiTablePlug

首先是在这个是针对字段的,所以给cols新增一个配置项,来决定哪些列需要有过滤的功能,一般来说只有那些数据可以归纳成几种分布的列才有做这个过滤的需求,比如例子中的性别列还有职业列,id列这些的意义不大,当然也不是绝对的,有的就是需要呢。

所以新增了一个配置项filter: true/false/null

然后在表格渲染完毕之后给表头对应的字段添加上过滤的那个图标和事件

这个是主要的代码篇幅太长没办法全显示,简单介绍一下,就是利用table.eachCols去遍历表头,把需要添加图标的给加上图标就好了,注意这时候实际是不会生成我们后面点击看到的里面的复选的内容的。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值