layui框架中table字段筛选功能有什么用
创始人
2024-12-17 08:22:08
0次

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

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

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

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

实际这些都是靠后面的点击事件再做处理就好,在点击的事件中去遍历得到当前这一列的值的一个集合。

注意!这里是我们最终看到的内容的集合,而不是针对数据的,因为字段有templet可以进行转换,所以即使背后的值可能不一样最终显示出来的也有可能是一样的,这里应该是归纳为相同的一类。

然后点击这个筛选的时候都做了什么呢?

除了上面说了得到一个集合之外,就是利用这个集合作为一个table的数据,并且根据逻辑得到是否初始选中,然后layer去弹出一个弹框把表格渲染到里面去。

这里有一个关键的就是是否要多列筛选的支持,就是说可以先赛选一个列,然后点击另外一个列在前面筛选的前提下筛选这个列,目前是直接否决了这个需求,因为太复杂了而且很难解释。

因为他们之间都是会相互影响的,这边的列隐藏之后对于那边的列它可能会出现部分分类它的数据部分是显示的部分是隐藏的。

这时候怎么办?

唯一一个比较严谨的就是新增一种状态叫半选状态,但是实际应用场景应该遇到的不大,要实现却是相当费劲的,所以干脆不支持,这个在excel中好像也是这么个限定,不知道有没有记错。

最后是监听这个表格的复选事件,背后的实际的逻辑就是把对应的tr给显示或者隐藏。然后点击打开这个过滤的选项的时候也是根据table内部的tr的显示隐藏情况来决定是默认选中还是未选中。

然后因为图标在layui提供的里面找不到合适的,新增了一个样式文件来支持,注意加入:

存在问题:细心的应该会看到字段筛选之后下面的统计列没有更新,实际这个是不对的,筛选之后部分列不显示了,那么对应的统计应该是我们看到的列的统计,这个可以自己考虑下如何处理。

我的思路是封装出来一个针对表格统计的方法,可以对数据进行计算然后更新到对应的dom节点上,原始的table提供的统计最大的作用就是生成一个固定在下方的容器节点。

至于里面的内容实际是不要紧的,很多小伙伴会问layui能不能提供统计行的数据是后台返回的支持之类的问题,实际这些都可以在上面提到的这个封装方法里面去处理,也可以变得很自由,不仅仅是求和,还可以是各种各样的计算之类的,但是这个不是这个帖子的重点,后面再实现。

测试页面: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabledgitee项目: https://gitee.com/sun_zoro/layuiTablePlug

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...